后台执行js先执行前端的JS函数,再执行后台函数的按钮实

结合__doPostBack()解析一文,自己做了个实验,达到客户端用input button类型按钮先触发前台JS函数,再执行后台操作的目的
  1、第一种实现方式:
  <script type ="text/javascript" language ="javascript">
  function CheckData()
  {
  alert("first");
  __doPostBack("Button2","");
  }
  </script>
  <input id="Button2" type="button" value="button" onclick ="CheckData()" onserverclick ="abc" />
  <input id="submit1" name = "submit1" type="submit" runat ="server" onserverclick ="abc" onclick ="CheckData()" />
  .cs 文件 pageload函数内:
  protected void Page_Load(object sender, EventArgs e)
  {
  if (Request.Form["__EVENTTARGET"] == "Button2")
  {
  abcd();
  }
   }
  protected void abcd()
  {
  Response.Write("<script>alert('留言成功添加');</script>");
  }
  2、第二种实现方式:
  用input 的 submit类型按钮,可以直接如下恁地写,就可以达到,先执行JS的CheckData函数再执行后台abc函数了。
  <input id="submit1" name = "submit1" type="submit" runat ="server" onserverclick ="abc" onclick ="CheckData()" />
  又在网上找了下submit与button的区分,但是在实验中没有发现网上的那种提交处理两次的现象,先记下吧,以后慢慢阐发
  ------------------------------------------------
  1、按钮为button,可在js中调用formName.submit()显性提交处理。若是submit按钮,则不能再这样加提交处理语句,不然会提交处理两次。
  2、1个input域中回车,会默许第1个submit属性的按钮提交处理。若都是butoon属性,则回车不会提交处理表单。
  3、有时提交处理表单后不能按F5页面,即没有action=""的情况,<form name="hand" method="post" onSubmit="javascript:return handle();">(此时在handle()中进行处置惩罚后会返回1个false)或<form name="hand" method="post" onSubmit="javascript:handle();return false">或<input type="button" id="addbt" name="addbt" value="增加关联" onClick="javascript:subList();return false;" />。这样做了后能保证只执行js代码后,本页面不按F5,也不提交处理到另外1个页面。

原文地址:https://www.cnblogs.com/mahaisong/p/1997444.html