Jquery點擊按鈕 非同步與同步提交表單

最近在開發一個jsp學生資訊管理系統，由於剛接觸jsp，遇到問題比較多，特此記錄與大家分享。

Jquery ajax提交表單到servlet範例

前台部分程式碼：

    <form class="addSud" method="post" action="">
        <table>
        <tr>
        <td class="textRight">姓名</td>
        <td colspan="2"><input type="text" id="name" name="name"></td>
        <td class="textRight">学号</td>
        <td colspan="2"><input type="text" id="studentId" name="studentId"></td>
        </tr>
        <tr>
            <td colspan="5">    <input type="submit" id="addStudents" value="提交"></td>
        </tr>
    </table>
    </form>

ajax提交表單程式碼：

    //增加学生，异步提交学生表单
    $("#addStudents").click(function() {
        $.ajax({
            url: "addStudents.do",//要请求的服务器url 
            //这是一个对象，表示请求的参数，两个参数：method=ajax&val=xxx，服务器可以通过request.getParameter()来获取 
            //data:{method:"ajaxTest",val:value},  
            data: {
                name: $("#name").val(),
                studentId: $("#studentId").val(),
            },
            async: true,   //是否为异步请求
            cache: false,  //是否缓存结果
            type: "POST", //请求方式为POST
            dataType: "json",   //服务器返回的数据是什么类型 
            success: function(result){  //这个方法会在服务器执行成功是被调用 ，参数result就是服务器返回的值(现在是json类型) 
                if(result){
                    alert("true");
                }else{
                    alert("false");
                }
            }
          });
    });

web.xml設定碼：

  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>addStudents</servlet-name>
    <servlet-class>org.cms.students.addStudents</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>addStudents</servlet-name>
    <url-pattern>/addStudents.do</url-pattern>
  </servlet-mapping>

adddStuden

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        PrintWriter out = response.getWriter();
        String name=request.getParameter("name");
        System.out.println(name);
        System.out.println("123456789");
        out.print("false");
    }

web.xml設定碼提交表單

通過上面的配置後，我輸入學生姓名然後提交表單，但是在myeclipse的控制台裡並沒有打印出姓名和字符串“123456789”,然後我就開始了瘋狂的檢查，檢查了n遍，還是不知道錯誤出現在哪裡，一次偶然的機會我發現了問題所在。我在ajax程式碼區塊後面加了個alert()語句，奇蹟出現了，瀏覽器彈出相應內容，myeclipse的控制台裡打印出姓名和字符串“123456789”，這讓我很是疑惑，在查閱大量博客和官方文件後，我才明白一切都是JQuery ajax的同步和非同步提交的原因。

先來了解下JQuery ajax方法：

異步的理解：當程式碼執行到ajax部分時，它與ajax之後的外部程式碼是一起執行的，假如此時有外部程式碼要用到ajax中的回傳值，而ajax的async屬性為true(即此時ajax為非同步)，那麼後續的外部程式碼是不可能能拿到ajax的回傳值的，只有設定為同步即ajax的async屬性為true，執行完ajax部分時，再接著執行後續程式碼時，才會在關係上產生連續性，這樣才能拿到其回傳值。

然後我就將async設定為false,問題真的解決了，但是還是不知道為什麼添加了alert語句即使是異步也可以列印出姓名和字串？

繼續查閱資料我自己的總結如下（歡迎各位大牛指點）：

1、async:true時：當點擊提交按鈕時，執行點擊事件裡的代碼語句，執行到ajax時，由於是異步執行，所以不會阻塞後面語句的執行，因為後面沒有語句了，所以可能由於ajax還沒來得及執行完點擊事件就結束了，自然就沒有打印出姓名和字符串。如果在ajax後面加入alert語句，點擊事件就會被阻塞到這裡，這時ajax就有充足的時間執行，所以控制台就能列印出姓名和字串。我嘗試去除外層的點擊事件，直接執行ajax，這時不論同步或者異步都可以打印出姓名和字符串，可以證明我的猜想。

2、async:false時：當點擊提交按鈕時，也會執行點擊事件裡的程式碼語句，執行到ajax時，由於是同步執行，所以必須等ajax成功返回後才繼續執行後面的程式碼，自然就能列印出姓名和字串。