form表单的提交方式

1. 最基本的提交方式，<input type="submit" value="提交">，或者<button type="submit">提交</button>，这两种方式效果是一样的。如果需要再提交表单之前进行验证，可以在form标签中设置onsubmit属性，如下

    <form id="form1" action="<%=basePath%>code/getCode" onsubmit="return mySubmit()">
           <label>name</label>
           <label><input name="name" value=""></label>
           <label><input type="submit" value="提交"/></label>
       </form>

   函数mySubmit()如下：

   <script type="text/javascript">
           function mySubmit(){
               var name=document.getElementsByName("name")[0].value;
               if(name.trim()==""){
                   alert("请填写名字");
                   return false;
               }
               return true;
           }
       </script>

    

2. 使用js的submit（）（注意：此函数不是jquery的，而是Html DOM的方法）函数进行表单提交，此类表单提交不会触发onsubmit句柄，因此如果需要验证表单，不能依赖onsubmit进行验证，可以用如下方式：

    <form id="form1" action="<%=basePath%>code/getCode">
           <label>name</label>
           <label><input name="name" value=""></label>
           <label><button type="button" onclick="myfun()" >提交</button></label>
       </form>

   函数myfun的代码如下

       <script type="text/javascript">
           function myfun(){
               var name=document.getElementsByName("name")[0].value;
               if(name.trim()==""){
                   alert("请填写名字");
                   return false;
               }
               
               document.getElementById("form1").submit();
           }
       </script>

    

3. 使用jquery的submit（）方法，区别于js原生的submit方法，jquery的submit方法是能够触发onsubmit句柄的，看下面的例子

    <form id="form1" action="<%=basePath%>code/getCode" onsubmit="return mysubmit()">
           <label>name</label>
           <label><input name="name" value=""></label>
           <label><button type="button" onclick="myfun()" >提交</button></label>
       </form>

   js代码如下：

       <script type="text/javascript" src="<%=basePath%>resources/js/jquery1.8.js"></script>
       <script type="text/javascript">
           function myfun(){
               $("#form1").submit();
           }
           function mysubmit(){
               var name=document.getElementsByName("name")[0].value;
               if(name.trim()==""){
                   alert("请填写名字");
                   return false;
               }
               return true;
           }
       </script>

   4.ajax的方式提交

       <script type="text/javascript">
           function myfun(){
               
               var name=document.getElementsByName("name")[0].value;
               if(name.trim()==""){
                   alert("请填写名字");
                   return false;
               }
               $.ajax({
                   url:'<%=basePath%>code/getCode',
                   type:'get',
                   async:false,
                   data:'name='+name,
                   success:function(data){
                       
                   }
               })
               
           }
       </script>

   准确来说，这不算表单提交，只能是ajax请求。