form的提交方式多了,不免會時常忘記,這裡我總結了常見的表單提交的方法:

1.使用普通 button 按鈕+onclick 事件+事件中編寫程式碼:獲取(通過任意選擇器得到表單即可)        表單.submit();

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

    input 的 type=button，呼叫 submit()方法提交

2.  使用 submit 按鈕 + onclick="return 函式()" +函式編寫程式碼:最後必須返回： return true/false;

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

3.使用 submit 按鈕/圖片提交按鈕 + 表單 onsubmit="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()">&nbsp;
       <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提交。