最近在開發一個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>
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。