jQuery的AJAX之load()應用執行個體

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

上載者：User

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

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

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

一：如何使用data

代碼如下

複製代碼

1.載入一個php檔案，該php檔案不含傳遞參數
$("#myID").load("test.php");

//在id為#myID的元素裡匯入test.php運行後的結果

2. 載入一個php檔案，該php檔案含有一個傳遞參數

$("#myID").load("test.php",{"name" : "Adam"});

//匯入的php檔案含有一個傳遞參數，類似於：test.php?name=Adam

3. 載入一個php檔案，該php檔案含有多個傳遞參數。註：參數間用逗號分隔

$("#myID").load("test.php",{"name" : "Adam" ，"site":"61dh.com"});

//匯入的php檔案含有一個傳遞參數，類似於：test.php?name=Adam&site=61dh.com

4. 載入一個php檔案，該php檔案以數組作為傳遞參數

$("#myID").load("test.php",{'myinfo[]', ["Adam", "61dh.com"]});

//匯入的php檔案含有一個數組傳遞參數。

注意：使用load，這些參數是以POST的方式傳遞的，因此在test.php裡，不能用GET來擷取參數。

二：如何使用callback

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

代碼如下

複製代碼

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

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

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

);

});

簡單扼要的說就是ajax類比了提交表單的行為，但是把重新整理頁面這件事交由js在後台偷偷完成了。

由此可見ajax其實是一個很容易理解的過程，下面用例子來說明。首先寫一個html頁面：

代碼如下

複製代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ajax test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(function($){
$('button').click(function(){
$name = $(this).attr('name');
$('#out').empty().load('test1.php',{ name : $name });
});
});
</script>
<style type="text/css"></style>
</head>
<body>
<button id="btn-1" name="1">1</button>
<button id="btn-2" name="2">2</button>
<button id="btn-3" name="3">3</button>
<div id="out"></div>
</body>
</html>

有一點html基礎的童鞋可以看出，這裡做了三個按鈕，一個id為out的div，三個按鈕是用來點擊的，#out的div用來接收資料，每次點擊button時先把#out清空，然後插入資訊。

然後來寫php：

代碼如下	複製代碼
<?php switch($_POST['name']){ case 1: echo '1 哈哈'; break; case 2: echo '2 呵呵'; break; case 3: echo '3 活活'; break; } ?>

這段代碼使用了php的switch語句，意思就說根據post中name的值來替換輸出的內容，這裡只是個簡單的例子，你也可以通過這個原理讓php進行更複雜的運算或輸出更複雜的內容。

js我直接寫在html裡面了，沒有單獨用一個檔案，用純js寫估計得寫不少，用jQuery就2句搞定，其實一句都行，只是我這兒還是寫成兩句比較好理解一點。
第一句是吧button按鈕中的name值存在一個變數裡面，第二句是使用了jQuery的load函數，告訴php需要哪些資訊，然後取回這些資訊插入到#out中。

這個ajax就這麼完成了，簡單嗎？

本文章原先以中文撰寫並發佈於 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