jQueryAjax使用起來非常方便,簡單易用,整理了一些內容和大家分享一下:
頁面代碼:
<body>
<form action="oneServlet" method="post" id="form">
姓名:<input type="text" name="name" /><br/>
年齡:<input type="text" name="age" /><br/>
</form>
<input type="button" value="提交" id="load" />
<div id="show"></div>
</body>後臺代碼:
package com.zb.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class OneServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String name = request.getParameter("name");
String age = request.getParameter("age");
PrintWriter out = response.getWriter();
out.print("您的姓名是:"+name+";今年"+age+"歲;");
out.flush();
out.close();
}
}1.使用load實現Ajax:
<script type="text/javascript">
$("#load").click(function(){
$("#show").load("oneServlet",$("#form").serializeArray());
});
</script>2.使用$.ajax({})實現Ajax:
<script type="text/javascript">
$("#load").click(function(){
$.ajax({url:"oneServlet",data:$("#form").serializeArray()})
.done(function(data,statusText){
$("#show").empty;
$("#show").append("服務器響應狀態:"+statusText);
$("#show").append(data);
})
.fail(function(){
alert("響應失敗");
})
});
</script>這兩種方式都可以簡單的將後臺響應內容在<div id="show"></div>中顯示出來,只是load方法無需指定回調函數;
記得剛開始用jQueryAjax的時候代碼是這樣寫的:
<script type="text/javascript">
$("#load").click(function(){
$.ajax({
url:"oneServlet",
data:$("#form").serializeArray(),
success:function(msg){...},
error:function(){...}
})
});
</script>需要指定success和error屬性來執行調用成功或調用失敗的函數,而從jQuery1.5開始,$.ajax()方法返回的是一個叫Deferred的對象,可以通過done()方法來執行調用成功的函數,通過fail()方法來執行調用失敗的函數,這兩種方式其實同樣都能實現想要的效果,不過就如同jQuery封裝DOM對象給我們操作一樣,Deferred對象也是經過封裝的,統一處理回調函數的對象而已.喜歡用哪種還是仁者見仁智者見智.