天天看點
傳回

Ajax詳解第六篇（jQuery實作Ajax）

文章目錄

  • ​​AJAX​​
  • ​​1.$.ajax() 核心函數​​
  • ​​1.1文法​​
  • ​​2 $.get()​​
  • ​​2.1文法​​
  • ​​2.2例子​​
  • ​​3 $.post()​​
  • ​​3.1文法​​
  • ​​4.實戰（對比）​​

AJAX

使用jQuery提供的函數實作Ajax請求的處理。代替直接使用XMLHttpRequest，但是jQuery實際還是使用的異步對象。

jQuery提供多個與AJAX有關的方法。通過jQuery AJAX方法，您能夠使用HTTP Get 和 HTTP Post 從遠端伺服器上請求文本、HTML、XML或JSON同時能夠把接收的資料更新到DOM對象。

1.$.ajax() 核心函數

$.ajax()是jQuery中AJAX請求的核心方法，所有的其他方法都是在内部使用此方法。

1.1文法 

$.ajax({name:value,name:value,....})//json格式的參數
//json格式的參數：key是定義好的，需要開發人員給key指派。這些key是用來表示Ajax請求必須的參數。

PS:

1.參數是json資料，包含請求方式，資料，回調方法等。

2.json格式的參數：key是定義好的，需要開發人員給key指派。這些key是用來表示Ajax請求必須的參數。

3.例如：請求的url位址，是不是異步請求，請求的方式等等。

$.ajax({
    //除了必用的，其他的都可以省略
    url:"queryProvinceServlet",//必用的。
    type:"get",
    data:{"name":"李四","age":20},
    dataType:"json",
    success:function(resp){  開發人員擷取資料，更新dom對象  },//必用的。
    error:function(){alert("請求錯誤")}
})

參數：

url:伺服器端的位址，例如某個servlet的通路位址。queryProvinceServlet

type:表示請求方式，get,post。預設是get。這個值不用區分大小寫。

data：表示送出的請求參數，可以是String，數組，json類型的。推薦使用json格式。

例如：data：（“name”:“李四”,“age”:20）

jQuery在發送請求時，會把json中的key作為請求的參數使用，key對應的值作為參數資料。

queryProvinceServlet轉為的結果：http://localhost:8080/myweb/queryProvinceServlet?name=李四&age=20

dataType:

資料格式，可以是HTML、text、xml、json等等。表示發起請求後，希望伺服器端傳回的資料格式。

jQuery可以嘗試使用對應格式處理傳回的資料。比如你指定了dataType，表示希望伺服器傳回的是json格式資料。然後jQuery把json資料轉為json對象。

伺服器代碼可以擷取到dataType的内容。

例如：請求中dataType:“json”,jQuery發起請求後，在請求頭中

Accept application/json, text/javascript, /; q=0.01

如果dataType:“text”,請求中Accept:text/plain,/;q=0.01

success:

函數function。當伺服器端傳回了資料，jQuery處理完資料後，執行這個函數。等同于異步對象的

readyState==4&&status==200//表示接收資料

的情況。

例如:sucess:function(resp){開發人員處理伺服器傳回的資料}

resp是自定義形參，相當于 resp = xhr.responseText;

error:

function()，當請求錯誤時，執行這個函數。

contentType:

表示請求的參數資料格式。例如application/json，這個内容可以不寫。

async:

是一個Boolean值，表示請求是同步的還是異步的。true是異步的，預設是true；false是同步的。

2 $.get()

$.get()這個函數就是執行get請求方式的ajax。

2.1文法 

$.get(url,請求參數,success函數,dataType);

2.2例子

這種方式比$.ajax()要簡便很多。

$.get("queryName",{"proid":1},function(resp){擷取省份名稱},"text");

3 $.post()

$.get()這個函數就是執行get請求方式的ajax。

3.1文法 

$.post("queryName",{"proid":1},function(resp){擷取省份名稱},"text");

4.實戰（對比）

之前使用js語句實作Ajax，但是使用jQuery實作Ajax更簡便清晰。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>使用Ajax查詢省份名稱</title>
  <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  <script type="text/javascript">
    $(function () {
      //給按鈕綁定事件    開始
      $("#btnSearch").on("click",function () {
        //alert("button click");
        $.ajax({
          url:"queryJson",
          type:"get",
          data:{"proid":$("#proid").val()},
          dataType:"json",
          success:function (resp) {
            //resp是伺服器傳回的資料，這個資料先通過jQuery處理的。
            //jQuery按照dataType的格式，可以把伺服器傳回的資料轉為json對象。
            //alert("resp===="+resp) //[object]
            //更新dom
            $("#proname").val(resp.name);
            $("#projiancheng").val(resp.jiancheng);
            $("#proshenghui").val(resp.shenghui);
          }
        })
      })
      //事件完成
      $("#btnGet").click(function () {
        $.get("queryJson",
                {"proid":$("#proid").val()},
                function (resp) {alert("收到的資料="+resp)},
                "json"
        )
      })
    })
  </script>
</head>
<body>
<div align="center">
  <p>根據id查詢省份全部資訊</p>
  <table>
    <tr>
      <td>省份id:</td>
      <td><input type="text" id="proid"></td>
    </tr>
    <tr>
      <td>省份名稱</td>
      <td><input type="text" id="proname"></td>

    </tr>
    <tr>
      <td>省份簡稱:</td>
      <td><input type="text" id="projiancheng"></td>
    </tr>
    <tr>
      <td>省會名稱:</td>
      <td><input type="text" id="proshenghui"></td>
    </tr>
    <tr>
      <td>操作</td>
      <td><input type="button" id="btnSearch" value="查詢" >
      <input type="button" id="btnGet" value="Get查詢"></td>
    </tr>
  </table>
</div>
</body>
</html>
Ajax詳解第六篇（jQuery實作Ajax）
public class QueryProvinceServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        String json ="";

        String strProid = request.getParameter("proid");
        Province p = null;
        //判斷是否為空，并且不為空字元串
        if(strProid!=null&&!strProid.trim().equals("")){

            ProvinceDao dao = new ProvinceDao();
            p = dao.queryProvinceName(Integer.valueOf(strProid));

            //把對象轉為json，才通過HttpServletResponse輸出。

            if(p!=null){//說明查出了真實的對象。

                ObjectMapper om = new ObjectMapper();
                json = om.writeValueAsString(p);
                //得到一個JSON格式的字元串
            }
        }

        //擷取請求頭中的accept
        String accept=request.getHeader("Accept");
        System.out.println("請求頭accept = "+accept);

        System.out.println("sevlet province轉為json==="+json);
        //可以處理不同的請求
        if(accept.startsWith("application/json")){
            response.setContentType("application/json;charset=utf-8");
            PrintWriter out = response.getWriter();
            out.println(json);
            out.flush();
            out.close();
        }else if(accept.startsWith("text/plain")){
            response.setContentType("application/json;charset=utf-8");
            PrintWriter out = response.getWriter();
            out.println("文本資料="+p.toString());
            out.flush();
            out.close();
        }

        //輸出json給ajax請求。

        //application/json;給浏覽器輸出的是一個json格式的資料格式
        /*
        response.setContentType("application/json;charset=utf-8");

        PrintWriter out = response.getWriter();

        out.println(json);
        out.flush();
        out.close();
        */
    }
}
ajax java json jquery javascript
上一篇: AjaxAJAX（Asynchronous Javascript And Xml）
下一篇: 資料如何實作圖形化？

繼續閱讀