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">&nbsp;&nbsp;&nbsp;&nbsp;<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>

addStudents.java代碼(采用POST提交方式):

	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");
	}

ajax提交表單

通過上面的配置后,我輸入學生姓名然后提交表單,但是在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成功返回后才繼續執行后面的代碼,自然就能打印出姓名和字符串。

當然這些只是我個人的一些猜想,目前我還在查閱更多的資料來證明完善我的猜想,希望大牛們能指出我的錯誤,我一定虛心接受。

最近發現真正的原因是:
ajax本身就是異步的,發起ajax請求后,當前的js還會繼續執行,如果你想通過ajax阻止提交,就不能在sumit事件中發起ajax,比如,搞個<input type='button'>(別用type=‘submit’,那個默認還是會提交表單,用button默認不會提交表單)。或者阻止按鈕的默認事件,在點擊事件結束前加return false。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM