jQuery 中的 AJAX 請求(四種）
阿新 • • 發佈：2020-12-10
技術標籤：D_JavaWeb階段# D15_JavaWeb中的Ajax知識javaajax
jQuery 提供多個與 AJAX 有關的方法。通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠端伺服器上請求文字、HTML、XML 或 JSON 同時能夠把接收的資料更新 到 DOM 物件
$.ajax 方法
$.ajax() 是 jQuery 中 AJAX 請求的核心方法，所有的其他方法都是在內部使用此方法。
語法： $.ajax( { name:value, name:value, … } )
說明：引數是 json 的資料，包含請求方式，資料，回撥方法等
contentType ：傳送資料到伺服器時所使用的內容型別。預設是： “application/x-www-form-urlencoded”。
data： 規定要傳送到伺服器的資料，可以是：string， 陣列，多數是 json
dataType：期望從伺服器響應的資料型別。jQuery 從 xml, json, text, html 這些中測試最可能 的型別
- “xml” - 一個 XML 文件
- “html” - HTML 作為純文字
- “text” - 純文字字串
- “json” - 以 JSON 執行響應，並以物件返回
error(xhr,status,error)
success(result,status,xhr)： 當請求成功時執行的函式，其中 result, status, xhr 是自定義的形參 名
type：規定請求的型別（GET 或 POST 等），預設是 GET， get，post 不用區分大小寫
url：規定傳送請求的 URL。
以上是常用的引數。
error() , success()中的 xhr 是 XMLHttpRequest 物件
Jquery_Ajax_request.html：
// ajax請求 $("#ajaxBtn").click(function(){ // ajax請求 $("#ajaxBtn").click(function(){ $.ajax({ url:"http://localhost:8080/16_AJAX//ajaxServlet", // data:"action=jQueryAjax", data:{action:"jQueryAjax"}, type:"GET", success:function (data) { // alert("伺服器返回的資料是：" + data); // var jsonObj = JSON.parse(data); $("#msg").html(" ajax 編號：" + data.id + " , 姓名：" + data.name); }, dataType : "json" }); }); })
AjaxServlet：
protected void jQueryAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println(" jQueryAjax == 方法呼叫了");
Person person = new Person(1,"Tom");
Gson gson = new Gson();
String personToJsonStr = gson.toJson(person);
resp.getWriter().write(personToJsonStr);
}
$.get 方法和$.post 方法
get:
$.get() 方法使用 HTTP GET 請求從伺服器載入資料。
語法：$.get(url,data,function(data,status,xhr),dataType)
post:
$.post() 方法使用 HTTP POST 請求從伺服器載入資料。
語法 $.post(URL,data,function(data,status,xhr),dataType)
get、post引數相同：
url 必需。規定您需要請求的 URL。
data 可選。規定連同請求傳送到伺服器的資料。 function(data,status,xhr) 可選。當請求成功時執行的函式。data,status,xhr 是自定義形參名。
引數說明：
- data - 包含來自請求的結果資料
- status - 包含請求的狀態（“success”、“notmodified”、“error”、“timeout”、“parsererror”）
- xhr - 包含 XMLHttpRequest 物件
dataType 可選。規定預期的伺服器響應的資料型別。預設地，jQuery 會智慧判斷。可能的 型別：
- “xml” 一個 XML 文件
- “html” - HTML 作為純文字
- “text” - 純文字字串
- “json” - 以 JSON 執行響應，並以物件返回
Jquery_Ajax_request.html：
// ajax--get請求
$("#getBtn").click(function(){
$.get("http://localhost:8080/16_AJAX/ajaxServlet","action=jQueryGet",function (data) {
$("#msg").html(" Get 編號：" + data.id + " , 姓名：" + data.name);
},"json");
});
// ajax--post請求
$("#postBtn").click(function(){
// post請求
$.get("http://localhost:8080/16_AJAX/ajaxServlet","action=jQueryPost",function (data) {
$("#msg").html(" post 編號：" + data.id + " , 姓名：" + data.name);
},"json");
});
AjaxServlet：
protected void jQueryGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println(" jQueryGet == 方法呼叫了");
Person person = new Person(1,"Tom");
Gson gson = new Gson();
String personToJsonStr = gson.toJson(person);
resp.getWriter().write(personToJsonStr);
}
protected void jQueryPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println(" jQueryPost == 方法呼叫了");
Person person = new Person(1,"Tom");
Gson gson = new Gson();
String personToJsonStr = gson.toJson(person);
resp.getWriter().write(personToJsonStr);
}
$.getJSON 方法
Jquery_Ajax_request.html：
// ajax--getJson請求
$("#getJSONBtn").click(function(){
$.getJSON("http://localhost:8080/16_AJAX/ajaxServlet","action=jQueryGetJson",
function (data) {
$("#msg").html(" getJSON編號：" + data.id + " , 姓名：" + data.name);
});
});
AjaxServlet：
protected void jQueryGetJson(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println(" jQueryGetJson == 方法呼叫了");
Person person = new Person(1,"Tom");
Gson gson = new Gson();
String personToJsonStr = gson.toJson(person);
resp.getWriter().write(personToJsonStr);
}
表單序列化 serialize()
serialize()可以把表單中所有表單項的內容都獲取到，並以 name=value&name=value 的形式進行拼接
Jquery_Ajax_request.html：
// ajax請求
$("#submit").click(function(){
// 把引數序列化
$.getJSON("http://localhost:8080/16_AJAX/ajaxServlet","action=jQuerySerialize&" +
$("#form01").serialize(),function (data) {
$("#msg").html(" Serialize編號：" + data.id + " , 姓名：" + data.name);
});
});
<form id="form01" >
使用者名稱：<input name="username" type="text" /><br/>
密碼：<input name="password" type="password" /><br/>
下拉單：<select name="single">
<option value="Single">Single</option>
<option value="Single2">Single2</option>
</select><br/>
下拉多：
<select name="multiple" multiple="multiple">
<option selected="selected" value="Multiple">Multiple</option>
<option value="Multiple2">Multiple2</option>
<option selected="selected" value="Multiple3">Multiple3</option>
</select><br/>
復：
<input type="checkbox" name="check" value="check1"/> check1
<input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/>
單：
<input type="radio" name="radio" value="radio1" checked="checked"/> radio1
<input type="radio" name="radio" value="radio2"/> radio2<br/>
</form>
<button id="submit">提交--serialize()</button>
AjaxServlet：
protected void jQuerySerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println(" jQuerySerialize == 方法呼叫了");
Person person = new Person(1,"Tom");
String username = req.getParameter("username");
String password = req.getParameter("password");
System.out.println(username);
System.out.println(password);
Gson gson = new Gson();
String personToJsonStr = gson.toJson(person);
resp.getWriter().write(personToJsonStr);