提交from表单多种方式实现

常用的大概有ajax，jquery，layui，onclick，submit几种方式

 <button id="submit_btn"  class="layui-btn layui-btn-sm"  >保存合同</button>     <!--jquery+ajax方式-->
  <button class="layui-btn layui-btn-sm" lay-submit lay-filter="go" >保存合同</button> <!--layui+ajax方式-->

1.jquery+ajax

工作中最常用的方式 $("#submit_btn").on(events,[selector],[data],fn)

$("#submit_btn").on('click',function(){
	$.ajax({ 
        type: "POST",  //提交方式
      	url: '${base }/contractother/savecontractother.htm?updateType=${updateType}', //后台保存的方法代码
      	data: $("#contractOtherForm").serialize(), //表单的数据
      	error:function(){ 
              alert("请求失败..."); 
              $("#contractOtherForm").unmask();//遮罩
      	}, 
      	success: function(msg){ 
            if(msg!='error'){
            	  alert("保存成功");
            	  var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            	  parent.layer.close(index); //再执行关闭
            	  window.parent.location.reload('tableIns');  //加载父页面的方法
            }else{ 
                alert("操作失败，请稍候再试！"); 
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
           	    parent.layer.close(index); //再执行关闭
           	    window.parent.location.reload('tableIns'); 
            }
            $("#contractOtherForm").unmask();
         } 
     }); 
 	return false;
 });  

2.layui+ajax

form.on('submit(go)', function(data){
	$.ajax({ 
        type: "POST",  //提交方式
      	url: '${base }/contractother/savecontractother.htm?updateType=${updateType}', //后台保存的方法代码
      	data: $("#contractOtherForm").serialize(), //表单的数据
      	error:function(){ 
              alert("请求失败..."); 
              $("#contractOtherForm").unmask();//遮罩
      	}, 
      	success: function(msg){ 
            if(msg!='error'){
            	  alert("保存成功");
            	  var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            	  parent.layer.close(index); //再执行关闭
            	  window.parent.location.reload('tableIns');  //加载父页面的方法
            }else{ 
                alert("操作失败，请稍候再试！"); 
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
           	    parent.layer.close(index); //再执行关闭
           	    window.parent.location.reload('tableIns'); 
            }
            $("#contractOtherForm").unmask();
         } 
     }); 
 	return false;
});

3.onclick

<img src="../1.jpg" alt="图片" οnclick="mouse()"/>

<script type="text/javascript">
	function mouse(){
		alert('我是一张图片!!!');
	}
</script>

4.sumbit

<form id="form_test" action="" method="post">   
   用户名：<input type="text" value="" id="username"/>
   密    码：<input type="text" value="" id="password"/>
   <button id="submit_btn">submit</button>
</form>

<script type="text/javascript">
    form_test.onsubmit = function(e) {
        e.preventDefault();
        console.log('form_test')
    }
    submit_btn.onclick = function(e) {
//      e.preventDefault();
        console.log('submit_btn')
    }
</script>

还有传统的js方式，不常用就不写了