jquery通過AJAX中Load()負載檔案

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

用load方法的完整格式是：load( url, [data], [callback] ),

其中:

•url：是指要匯入檔案的地址。
•data：選擇性參數；因為Load不僅僅可以匯入靜態html檔案，還可以匯入動態指令碼，例如PHP檔案，所以要匯入的是動態檔案時，我們可以把要傳遞的參數放在這裡。
•callback：選擇性參數；是指調用load方法並得到伺服器響應後，再執行的另外一個函數。

直接上代碼：

代碼如下

複製代碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
   $('#but').click(function(){
       $('#test').load("111.txt");
   });
});
</script>
<button id="but">改變文本</button>
<div id="test"><h2>通過 AJAX 改變文本</h2></div>
</BODY>
</HTML>

自己在本地要有jquery.js和111.txt文字文件哦，這個文字文件要有內容！

篩選載入的HTML文檔

在load的url裡加上空格後面就可以跟選取器了。

例如：

代碼如下	複製代碼
$("body").load("test.html #a");

上個例子是將test.html頁面的內容都載入到id為“resText”的元素裡。如果只需要載入test.html頁面內的某些元素，那麼可以使用load()方法的URL參數來達到目的。通過為URL參數指定選擇符，可以很方便地從載入過來的HTML文檔裡篩選出所需要的內容。

load()方法的URL參數的文法結構為：“url selector”。注意，URL和選取器之間有一個空格。

例如只需要載入test.html頁面中class為“para”的內容，可以使用以下代碼來完成：

代碼如下	複製代碼
$("#resText").load("test.html .para");

傳遞方式

　　load()方法的傳遞方式根據參數data來自動指定。如果沒有參數傳遞，則採用GET方式傳遞；反之，則自動轉換為POST方式。

代碼如下	複製代碼
//無參數傳遞，則是GET方式 $("#resText").load("test.php",function(){ //...... }); //有參數傳遞，則是POST方式 $("#resText").load("test.php",{name:"xht555",age:"24"},function(){ //...... });

如何使用callback

比如我們要在load方法得到伺服器響應後，慢慢地顯示載入的內容，就可以使用callback函數。代碼如下：

代碼如下

複製代碼

$("#go").click(function(){

$("#myID").load("welcome.php", {"lname" : "Cai", "fname" : "Adam", function(){

$("#myID").fadeIn('slow');}

);

});

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More