$.ajax()方法和$.get()方法使用小結

時間 2019-11-18

標籤 ajax 方法使用小結欄目 Ajax 简体版

原文原文鏈接

一. 使用JQuery的$.get()方法實現異步請求

1. 編寫JSP

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
 7     <script type="text/javascript" src="js/verify_jquery_get.js"></script>
 8 </head>
 9 <body>
10     <input type="text" id="inputVal"/><br/>
11         <input type="button" value="獲取xml數據" onclick="verifyJqueryGet()"/>
12     <div id="result"></div>
13 </body>
14 </html>

2. 編寫verify_jquery_get.js

1 function verifyJqueryGet() {
2     $.get("AjaxServer?value="+$('#inputVal').val(),
3         null,
4         function (data) {
5             $('#result').html("<p>"+data+"</p>");
6         });
7 }

$.get()方法參數說明:

$.get(url, param, callback(data));javascript

url 請求資源的路徑html

param 請求參數, 注意將請求參數寫在url後, 這裏填nulljava

callback(data) 回調函數, 服務器響應數據後, Ajax引擎(xhr)會自動調用該回調函數,數據還沒回來時, 頁面不會等待, 而是繼續執行, 中斷...jquery

3. 編寫Servlet

 1 /**
 2  * Created by IntelliJ IDEA.
 3  *
 4  * @Auther: ShaoHsiung
 5  * @Date: 2018/8/20 15:12
 6  * @Title: Ajax後臺程序
 7  * @Description: 獲取異步請求參數, 若參數知足條件, 則使用輸出對象向瀏覽器輸出數據
 8  */
 9 public class AjaxServer extends HttpServlet {
10     @Override
11     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
12         // 設置響應內容類型
13         resp.setContentType("text/html;charset=utf-8");
14         // 獲取輸出對象
15         PrintWriter out = resp.getWriter();
16         // 獲取異步請求參數
17         String value = req.getParameter("value");
18         // 設置參數編碼爲UTF-8
19         String valueUtf8 = URLDecoder.decode(value, "UTF-8");
20         // 檢驗參數
21         if (valueUtf8==null || valueUtf8.equals("")) {
22             out.println("用戶名不能爲空!");
23         } else {
24             // 判斷參數是否知足條件
25             if(valueUtf8.equals("young")) {
26                 out.println("用戶名可使用!");
27             } else {
28                 out.println("用戶名沒法使用!");
29             }
30         }
31     }
32 
33     @Override
34     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
35         doGet(req, resp);
36     }
37 }

4. 程序演示

二. 使用JQuery的$.ajax()方法實現異步請求

1. 編寫JSP

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
 7     <script type="text/javascript" src="js/verify_jquery_ajax.js"></script>
 8 </head>
 9 <body>
10     <input type="text" id="inputVal"/><br/>
11         <input type="button" value="獲取xml數據" onclick="verifyJqueryAjax()"/>
12     <div id="result"></div>
13 </body>
14 </html>

2. 編寫verify_jquery_ajax.js

 1 function verifyJqueryAjax() {
 2     $.ajax({
 3         type: "get",  // 請求方式
 4         url: "AjaxXmlServer",  // 目標資源
 5         data: "value="+$('#inputVal').val(), // 請求參數
 6         dataType: "xml",  // 服務器響應的數據類型
 7         success : function (data) {  // readystate == 4 && status == 200
 8             $('#result').html("<p>"+$(data).children().text()+"</p>");  // data是一個dom對象, 先將其轉化爲jquery對象
 9         }
10     });
11 }

小結:

1) js中定義一個對象方式:
var obj1 = {};
var obj2 = {name: "zhang", age: 18};

2) dom->jquery
var $data = $(data)

3) 須要注意jquery對象的children方法的使用ajax

$.ajax()方法參數說明:

type 請求方式 get/post瀏覽器

url 請求資源路徑服務器

data 請求參數, 注意格式app

dataType 服務器響應的數據類型dom

success(data) 回調函數, data是一個dom對象異步

3. 編寫Servlet

 1 /**
 2  * Created by IntelliJ IDEA.
 3  *
 4  * @Auther: ShaoHsiung
 5  * @Date: 2018-8-21 12:41:06
 6  * @Title: Ajax後臺程序, 返回xml數據
 7  * @Description: 獲取異步請求參數, 若參數知足條件, 則使用輸出對象向瀏覽器輸出xml數據
 8  */
 9 public class AjaxXmlServer extends HttpServlet {
10     @Override
11     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
12 
13         // 設置響應內容類型爲xml
14         resp.setContentType("text/xml;charset=utf-8");
15         // 獲取輸出對象
16         PrintWriter out = resp.getWriter();
17         // 獲取異步請求參數
18         String value = req.getParameter("value");
19         //System.out.println("1" + value);
20         //System.out.println("2" + new String(value.getBytes("ISO8859-1"), "UTF-8"));
21         // 設置參數編碼爲UTF-8
22         String valueUtf8 = URLDecoder.decode(value, "UTF-8");
23         // 準備響應的數據
24         StringBuffer buffer = new StringBuffer();
25         buffer.append("<message>");
26         // 檢驗參數
27         if (valueUtf8==null || valueUtf8.equals("")) {
28             buffer.append("用戶名不能爲空!").append("</message>");
29         } else {
30             // 判斷參數是否知足條件
31             if(valueUtf8.equals("young")) {
32                 buffer.append("用戶名可使用!").append("</message>");
33             } else {
34                 buffer.append("用戶名沒法使用!").append("</message>");
35             }
36         }
37         // 響應數據
38         out.print(buffer.toString());
39     }
40 
41     @Override
42     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
43         doGet(req, resp);
44     }
45 }