form的提交方式多了,不免会时常忘记,这里我总结了常见的表单提交的方法:

1.使用普通 button 按钮+onclick 事件+事件中编写代码:获取(通过任意选择器得到表单即可)        表单.submit();

<input type="button" onclick="getName1();" value="提交表单方法 1" />

    input 的 type=button，调用 submit()方法提交

2.  使用 submit 按钮 + οnclick="return 函数()" +函数编写代码:最后必须返回： return true/false;

<input type="submit" onclick="return getName2();" value="提交表单方法 2" />

3.使用 submit 按钮/图片提交按钮 + 表单 οnsubmit="return 函数();" +函数编写代码:最后必须返回： return true|false;

<form name="form" action="跳转的页面" method="post"  onsubmit="return getName3()">
       <input type="text" id="name"/>
       <input type="submit" value="提交"/> //注意onsubmit函数写在form表单上
 </form>
<input type="image" src="图片的路径" width="60px" height="40px" />

下面为完整的调用流程:

<form id='myform1' name="myform2" action="#" method="get" onsubmit="return getName3();">

    <!--通过 js 事件： sub()提交表单-->
    <input type="button" onclick="getName1();" value="提交表单方法 1" />
    <input type="submit" onclick="return getName();" value="提交表单 2" />
    <input type="submit" value="提交 onsubmit" /><br />
    <input type="image" src="路径" />
</form>

<script type="text/javascript">
  
   //input 的 type=button，调用 submit()方法提交
    function getName1(){
        document.myform1.submit();
    }

    //进行校验，返回值为 true 才能提交
    function getName2(){
        var uname = document.getElementById("uname");
        var val = uname.value;
        if(val.length>0){
        return true;//提交
    }
   
    return false; //不提交
    }

    //onsubmit 事件提交
    function getName3 () {
        var uname = document.getElementById("uname");
        var val = uname.value;
    if(val.length>0){
        return true;//提交
    }
   
        return false; //不提交
    }

</script>

4.ajax实现form提交方式

<form id="form1" onsubmit="return false" action="#" method="post">
       <p>用户名：<input name="userName" type="text" id="txtUserName" value=""/></p>
       <p>密　码：<input name="password" type="password" id="TextBox2" value=""/></p>
       <p><input type="button" value="登录" onclick="login()"> 
       <input type="reset" value="重置"></p>
</form>   
  
<script type="text/javascript">
        function login() {
            $.ajax({
            //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/users/login" ,//url,请求的路径
                data: $('#form1').serialize(),
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result.resultCode == 200) {
                        alert("SUCCESS");
                    }
                    ;
                },
                error : function() {
                    alert("异常！");
                }
            });
        }
</script>

5.小结一下

（1）ajax在提交、请求、接收时，都是异步进行，网页不需要刷新，只刷新页面局部，不关心也不影响页面其他部分的内容。 Form提交则是新建一个页面，哪怕是提交给自己本身的页面，也需要刷新，为了维持页面用户对表单的状态改变，要在控制器和模板之间传递更多参数以保持页面状态。 
（2）ajax提交时，是在后台新建一个请求。 Form却是放弃本页面，然后再请求。 
（3）ajax必须要用js来实现，存在调试麻烦、浏览器兼容问题，而且不启用js的浏览器，无法完成操作。 Form表单是浏览器自带的，无论是否开启js，都可以提交表单。 
（4）ajax在提交、请求、接收时，整个过程都需要使用程序来对其进行数据处理。 Form表单提交，是根据表单结构自动完成，不需要代码干预。用submit提交。 

6.附加一种提交到后台的方法

<form id="myform" class="form-horizontal" method="post" action="user" >
			  
	    <input type="hidden" name="action" value="updateInfo">
			   
	    <label for="img" class="col-sm-2 control-label">头像:</label>
	    <div class="col-sm-5">
			<input type="file" id="img" name="img">
		</div>
	    <label for="mood" class="col-sm-2 control-label">心情:</label>
	    <textarea class="form-control" name="mood" id="mood" rows="3">
            ${user.mood }        
        </textarea>
	    <button type="submit" id="btn" class="btn btn-success">修改</button>              
        <span style="color:red" id="msg">${resultInfo.msg }</span>
			  
</form>

上面程序点击修改是会提交到user的servlet那里,隐藏域的值也随之传了过去.