jquery操做DOM

時間  2019-11-29
標籤 jquery dom 欄目 JQuery 简体版
原文   原文鏈接

8.1 jQuery框架中的Ajax簡介

Ajax技術的核心是XMLHTTPRequest對象，該對象是Ajax實現的關鍵，發送異步請求、接收服務器端的響應以及執行回調等操做都是經過XMLHTTPRequest對象來完成的。php

jQuery框架對Ajax操做進行了封裝，在jQuery框架的Ajax模塊中提供了不少方法用於網絡編程。咱們主要從Ajax網絡請求、Ajax事件以及序列化等方面講解。html

8.2 jQuery框架中的Ajax網絡請求

jQuery框架中爲咱們提供的發送網絡請求方法主要有：ajax

  • load方法
  • ajax方法
  • get方法
  • post方法
  • getScript方法
  • getJSON方法

① load方法編程

語法 jQ.load(url,[data],[callback])
參數json

  • url 資源的請求路徑
  • data 發送請求時提交的參數，支持查詢字符串和JSON對象格式
  • callback 加載完成的回調函數，3形參爲：響應體 + 狀態 + 請求對象

說明該方法請求遠程的資源，並插入到選中的jQ實例對象中。瀏覽器

注意緩存

  • 默認發送GET請求，若是傳遞參數(JSON對象)則發送POST請求。
  • 支持對返回的數據進行篩選

代碼示例安全

複製代碼 
1 //01 直接加載文件中的數據
2 //默認發送的是GET請求
3 //$("#demo").load("php/test.html");
4 //02 加載文件中的數據，獲取其中的某一部分（進行篩選）
5 //$("#demo").load("php/test.html span");
6 //參數在請求體中進行傳遞
7 $("#demo").load("php/test.html span",{"namme":"zs"});
複製代碼

② ajax方法服務器

語法 $.ajax(url,[settings]) | $.ajax(settings)網絡

經常使用參數說明

  • url 資源的請求路徑
  • data 發送請求時提交的參數，支持查詢字符串和JSON對象格式
  • async 是否異步發送網絡請求
  • cache 是否進行緩存處理
  • context 指定回調函數中的this指針
  • dataType 預期服務器返回的數據類型
  • timeout 請求的超時時間
  • beforeSend 請求發送前執行的回調函數
  • complete 請求完成後執行的回調函數
  • error 請求失敗執行的回調函數
  • success 請求成功執行的回調函數

說明該方法是jQuery框架中最底層的Ajax實現，用於發送網絡請求。
注意

    • 最簡單的狀況下，$.ajax()能夠不帶任何參數直接使用。
    • 全部的選項均可以經過$.ajaxSetup()函數來進行全局設置。

    • 8.1 jQuery框架中的Ajax簡介

      Ajax技術的核心是XMLHTTPRequest對象，該對象是Ajax實現的關鍵，發送異步請求、接收服務器端的響應以及執行回調等操做都是經過XMLHTTPRequest對象來完成的。

      jQuery框架對Ajax操做進行了封裝，在jQuery框架的Ajax模塊中提供了不少方法用於網絡編程。咱們主要從Ajax網絡請求、Ajax事件以及序列化等方面講解。

      8.2 jQuery框架中的Ajax網絡請求

      jQuery框架中爲咱們提供的發送網絡請求方法主要有：

      • load方法
      • ajax方法
      • get方法
      • post方法
      • getScript方法
      • getJSON方法

      ① load方法

      語法 jQ.load(url,[data],[callback])
      參數

      • url 資源的請求路徑
      • data 發送請求時提交的參數，支持查詢字符串和JSON對象格式
      • callback 加載完成的回調函數，3形參爲：響應體 + 狀態 + 請求對象

      說明該方法請求遠程的資源，並插入到選中的jQ實例對象中。

      注意

      • 默認發送GET請求，若是傳遞參數(JSON對象)則發送POST請求。
      • 支持對返回的數據進行篩選

      代碼示例

      複製代碼 
      1 //01 直接加載文件中的數據
2 //默認發送的是GET請求
3 //$("#demo").load("php/test.html");
4 //02 加載文件中的數據，獲取其中的某一部分（進行篩選）
5 //$("#demo").load("php/test.html span");
6 //參數在請求體中進行傳遞
7 $("#demo").load("php/test.html span",{"namme":"zs"});
      複製代碼

      ② ajax方法

      語法 $.ajax(url,[settings]) | $.ajax(settings)

      經常使用參數說明

      • url 資源的請求路徑
      • data 發送請求時提交的參數，支持查詢字符串和JSON對象格式
      • async 是否異步發送網絡請求
      • cache 是否進行緩存處理
      • context 指定回調函數中的this指針
      • dataType 預期服務器返回的數據類型
      • timeout 請求的超時時間
      • beforeSend 請求發送前執行的回調函數
      • complete 請求完成後執行的回調函數
      • error 請求失敗執行的回調函數
      • success 請求成功執行的回調函數

      說明該方法是jQuery框架中最底層的Ajax實現，用於發送網絡請求。
      注意

      • 最簡單的狀況下，$.ajax()能夠不帶任何參數直接使用。
      • 全部的選項均可以經過$.ajaxSetup()函數來進行全局設置。

      • 代碼示例

        複製代碼 
         1 $.ajax({
 2             "url":"php/03-ajax.php",  //設置請求路徑
 3             "type":"get", //設置請求方法，不區分大小寫
 4             "success":function (res,status,xhr) {  
 5                 //請求成功的回調
 6                 $("#demo").html(res); //獲取響應狀態碼
 7                 console.log(status);  //獲取請求的狀態
 8                 console.log(xhr);     //獲取請求對象自己
 9                 console.log(this);    //獲取上下文
10             },
11             "error":function (res) {
12                 //請求失敗的回調函數
13                 console.log("失敗");
14                 console.log(res);
15             },  
16             //"data":"name=ls"    //參數：查詢字符串形式
17             "data":{"name":"ls"}, //參數：JSON對象形式
18             "timeout":10，        //設置請求超時的時間 
19             statusText：timeout
20             "context":obj,    //設置回調函數中this的指向
21             "complete":function (res) {
22                 console.log("請求完成");
23                 console.log(res);
24             }
25         });
        複製代碼

         

        ③ get和post方法

        語法
        [1]$.get(url,[data],[callback]，[type])
        [2]$.post(url,[data],[callback]，[type])

        參數

        • url 資源的請求路徑
        • data 發送請求時提交的參數
        • callback 請求成功的回調函數
        • type 服務器端返回內容的格式：包括xml、html、json、script等

        GET和POST對比

        • GET請求參數跟在URL後，POST請求參數做爲請求體發送。
        • GET請求對參數大小有限制，而POST請求理論上不受限制。
        • GET請求的數據會被瀏覽器緩存，存在嚴重的安全性問題。
        • 服務器端讀取數據的方式不一樣。在PHP中，區分爲$_GET和$_POST。

        代碼示例

        複製代碼 
         1  //發送請求獲取服務器返回的文本,把div的內容替換掉
 2  //第一個參數:url請求路徑(必傳)
 3  //第二個參數:參數 支持兩種形式[查詢字符串][JSON對象]
 4  //第三個參數:success(response,status,xhr)
 5  //         請求成功的回調
 6  //         response:服務器返回的響應體
 7  //         status:狀態說明[success-error]
 8  //         xhr:請求對象
 9  //第四個參數:預期返回的數據類型:json|script|jsonP等
10  $.get("php/03-get.php",{"param1":"value1"},
11      function (response,status,xhr) {
12      console.log(response);
13      console.log(status);
14      console.log(xhr);
15  })
16 //注意點:GET請求請求路徑同樣會緩存,POST請求不會緩存
17  $.post("php/04-post.php",{"param1":"value1"},
18      function (response,status,xhr) {
19      console.log(response);
20      console.log(status);
21      console.log(xhr);
22  }) 
        複製代碼

        ④ getScript和getJson方法

        jQuery框架提供了getScript和getJson方法來直接加載js文件和JSON數據

        語法

        [1] $.getScript(url,[callBack])
        [2] $.getJson(url,[callBack])

        說明

        • getScript方法用於加載js文件，並自動執行。
        • getJson方法用於加載JSON數據。

        代碼示例

        1 $.getScript("test.js", function(){
2      //加載完成後執行的回調函數
3       alert("加載並執行JS文件");
4 });

        8.3 jQuery框架中的Ajax事件方法

        jQuery框架中除了提供上述方法來發送網絡請求外，還提供了一些事件方法來對調用Ajax方法過程當中的HTTP請求進行精細控制。經過jQuery提供的一些自定義全局函數，可以爲各類與Ajax相關的事件註冊回調函數。jQuery的Ajax全局事件方法以下：

        [1] ajaxStart(callBack) =>檢測到網絡請求開始發送會觸發，1次
        [2] ajaxStop(callBack) =>檢測到網絡請求結束會觸發，1次
        [3] ajaxSend(callBack) =>檢測到網絡請求開始發送會觸發，N次
        [4] ajaxComplete(callBack)=>檢測到網絡請求結束會觸發，N次
        [5] ajaxError(callBack) => 網絡請求失敗會觸發
        [6] ajaxSuccess(callBack) => 網絡請求成功會觸發

        複製代碼 
         1 $(document).ajaxStart(function () {
 2      console.log("第一個已經開始+++++");
 3      $("#demoID").show(1000);
 4 })
 5 $(document).ajaxStop(function () {
 6      console.log("最後一個已經結束+++++");
 7      $("#demoID").hide(1000);
 8 })
 9 $(document).ajaxSend(function () {
10      console.log("開始發送網絡請求___");
11 })
12 $(document).ajaxComplete(function () {
13     console.log("發送網絡請求完成___");
14 })
15 $.ajax({ //發送網絡請求--A
16     "url":"php/06-other.php",
17     "type":"GET",
18     "success":function (res,status,xhr) {
19           console.log("網絡請求成功--1");
20       }
21 })
22 $.ajax({  //發送網絡請求--B
23     "url":"php/06-other.php",
24     "type":"GET",
25     "success":function (res,status,xhr) {
26           console.log("網絡請求成功--2");
27       }
28 })
29 $(document).ajaxError(function () {
30     console.log("請求失敗");
31 })
32 $(document).ajaxSuccess(function () {
33     console.log("請求成功");
34 })
        複製代碼

        8.4 jQuery框架中的序列化方法

        在開發的時候，常常須要把表單中的數據做爲網絡請求的參數，若是一個一個的獲取再拼接成查詢字符串那麼至關的麻煩，jQuery框架中爲咱們提供了兩個對應的方法，能夠方便解決該需求。

        serialize方法可以將DOM元素內容序列化爲查詢字符串。
        serializeArray方法能夠將DOM元素序列化後返回JSON格式的數據。

        代碼示例

        複製代碼 
         1 <body>
 2 <form>
 3     <input type="text" name="username" id="demo1">
 4     <input type="text" name="password" id="demo2">
 5 </form>
 6 <button>按鈕</button>
 7 <script>
 8     $("button").click(function () {
 9         $.ajax({
10             "url":"php/07-get.php",
11             //"data":"username="+$("#demo1").val()+"&password=" +$("#demo2").val(),
12             "data":$("form").serialize(),
13             "success":function (res) {
14                 console.log(res);
15             }
16         })
17         //把表單中的key-value按照固定的格式拼接爲查詢字符串:username=lisi&password=abcd
18         console.log($("form").serialize());
19         console.log($("form").serializeArray());
20         //[{"username":"zhangsan"},{"password":"123"}];
21     })
22 </script>
23 </body>
        複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程