安裝Web環境

Ajax方法需要與Web伺服器端進行互動，需要有環境才可正常使用，安裝環境的工具包有很多，可以選擇自行下載。

jQuery中的Ajax

在jQuery中，$.ajax()方法屬於最底層的方法，第2層是load()，$.get()，和$.post()，第3層是$.getScript()和$.getJSON()方法。

一、 load( ) 方法

結構

load( url , [data] , [callback] )

 捕獲.PNG

1.1 應用

1.1.1首先構建一個被load（）方法載入並追加到HTML檔案，名字為xi.html，html程式碼如下：

1 <ul>
2
 
     <li>《慢慢來，一切都來得及》</li>
3     <li>《你的孤獨雖敗猶榮》</li>
4     <li>《你只是看上去很努力》</li>
5     <li>《JavaScript從入門到放棄》</li>
6 </ul>
7 <div>你篩選出來的元素</div>

1.1.2然後再新建一個空白頁面，用來追加的HTML內容，HTML程式碼如下：

1 <h3>你最喜歡讀什麼書？</h3>
2 <p id="cont"></p>
3
 
 <button>點選</button>

1.1.3接下來就是編寫Jquery程式碼了，等DOM載入完畢之後，通過單擊按鈕來呼叫load（）方法，然後將xi.html的內容載入到id=“cont”的元素裡。
jQuery程式碼如下：

1 $("button").click(function(){
2     $("#cont").load("xi.html")//單擊時將xi.html的內容載入到頁面上
3     })
4 })

執行結果：

1.2篩選載入的HTML文件

上面的例子是將xi.html頁面中的內容都載入到id為“cont”的元素裡，如果只要載入頁面內的某些內容，可以使用load（URL selector）方法的URL引數來達到目的。

注意：URL和選擇器之間有一個空格。

例如只需要載入xi.html的li元素中內容，可以使用如下程式碼：

1 $("button").click(function(){
2     $("#cont").load("xi.html li");
3 }

執行結果：

1.3傳遞方式

load（）方法傳遞方式根據引數data來自動指定。如果沒有引數傳遞，則採用get方式，反之，則自動轉換為post方式。

1 $("button").click(function(){
2     $("#cont").load("xi.html li"，{name:"rain"，age"18"}，function（）{
3    //code....
4   });
5 })

1.4 回撥引數

對於必須在載入完成後才能繼續的操作，load（）方法提供了回撥函式（callback），該函式有3個引數，分別代表“請求返回的內容”，“請求狀態”，“XMLHttpRequest物件”，程式碼如下：

1 $("#cont").load("xi.html li"，function（responseText，textStates，XMLHttpRequest）{
2    //responseText：請求返回的內容
3    //textStates：請求狀態：success   error  notmodified  timeout4種
4    //XMLHttpRequest：XMLHttpRequest物件
5   });
6 ————————————————
7 版權宣告：本文為CSDN博主「孫玉凱」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
8 原文連結：https://blog.csdn.net/sunshao904/article/details/106440985