jQuery - AJAX 簡...LOGIN

jQuery - AJAX 簡介與方法

jQuery - AJAX 簡介

什麼是 AJAX?

AJAX = 非同步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

簡短地說,在不重載整個網頁的情況下,AJAX 透過後台載入數據,並在網頁上進行顯示。

關於 jQuery 與 AJAX

jQuery 提供多個與 AJAX 相關的方法。

透過 jQuery AJAX 方法,您能夠使用 HTTP Get 和 HTTP Post 從遠端伺服器上請求文字、HTML、XML 或 JSON - 同時您能夠將這些外部資料直接載入網頁的被選元素中。

如果沒有 jQuery,AJAX 程式設計還是有些難度的。

編寫常規的 AJAX 程式碼並不容易,因為不同的瀏覽器對 AJAX 的實作並不相同。這意味著您必須編寫額外的程式碼對瀏覽器進行測試。不過,jQuery 團隊為我們解決了這個難題,我們只需要一行簡單的程式碼,就可以實作 AJAX 功能。

AJAX load() 方法

#jquery load()方法是jquery ajax中無刷新中的一個方法了,他可以實現直接載入頁面中的內容放到指定ID中,也可以帶參數刷新頁面哦,下面我來跟大家介紹load()一些用法與常用見問題。

語法:

$(selector).load(URL,data,callback);

必需的 URL 參數規定您希望載入的 URL。

可選的 data 參數規定與請求一同傳送的查詢字串鍵/值對集合。

可選的 callback 參數是 load() 方法完成後所執行的函數名稱。

範例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src=" 
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("");});
});
</script>
</head>
<body>
<div id="div1">
<h2>使用 jQuery AJAX 修改文本内容</h2>
</div>
<button>获取外部内容</button>
</body>
</html>

也可以把 jQuery 選擇器加入到 URL 參數。

下面的範例把"demo_test.txt" 檔案中id="p1" 的元素的內容,載入到指定的<div> 元素中

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/try/ajax/demo_test.txt #p1");
  });
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改文本</h2></div>
<button>获取外部文本</button>
</body>
</html>

可選的callback 參數規定當load() 方法完成後所要允許的回呼函數。回呼函數可以設定不同的參數:

responseTxt - 包含呼叫成功時的結果內容

statusTXT - 包含呼叫的狀態xhr - 包含

 XMLHttpRequest 物件.

 AJAX get() 和post() 方法

jQuery get() 和post() 方法用於透過HTTP GET 或POST 請求從伺服器請求數據。

HTTP 請求:GET vs. POST

兩種在客戶端和伺服器端進行請求-回應的常用方法是:GET 和 POST。

GET - 從指定的資源請求資料POST - 向指定的資源提交要處理的資料

GET 基本上用於從伺服器取得(取回)資料。註:GET 方法可能會傳回快取資料。

POST 也可用於從伺服器取得資料。不過,POST 方法不會快取數據,而且常用於連同請求一起發送數據。

jQuery $.get() 方法

$.get() 方法透過 HTTP GET 請求從伺服器上請求資料。

語法:

$.get(URL,callback);

必要的 URL 參數規定您希望要求的 URL。

可選的 callback 參數是請求成功後執行的函數名稱。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("/try/ajax/demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
});
</script>
</head>
<body>
<button>发送一个 HTTP GET 请求并获取返回结果</button>
</body>
</html>

$.get() 的第一個參數是我們想要請求的 URL("demo_test.php")。

第二個參數是回呼函數。第一個回呼參數存有被請求頁面的內容,第二個回呼參數存有請求的狀態。

提示: 這個 PHP 檔案 ("demo_test.php") 類似這樣:

<?php
echo '這是從PHP檔案讀取的資料。 ';
?>

jQuery $.post() 方法

$.post() 方法透過HTTP POST 請求從伺服器請求數據。

語法:

$.post(URL,data,callback);

必要的 URL 參數規定您希望要求的 URL。

可選的 data 參數規定連同請求發送的資料。

可選的 callback 參數是請求成功後執行的函數名稱。

下面的範例使用$.post() 連同請求一起傳送資料:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",{
name:"php中文网",
url:"http://www.php.cn"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
});
</script>
</head>
<body>
<button>发送一个 HTTP POST 请求页面并获取返回内容</button>
</body>
</html>

$.post() 的第一個參數是我們希望請求的URL ("demo_test_post.php" )。

然後我們連同請求(name 和 city)一起發送資料。

"demo_test_post.php" 中的 PHP 腳本讀取這些參數,對它們進行處理,然後傳回結果。

第三個參數是回呼函數。第一個回呼參數存有被請求頁面的內容,而第二個參數存有請求的狀態。

提示: 這個 PHP 檔案 ("demo_test_post.php") 類似這樣:

<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$city = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo '网站名: ' . $name;
echo "\n";
echo 'URL 地址: ' .$city;
?>


下一節
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $.post("/try/ajax/demo_test_post.php",{ name:"php中文网", url:"http://www.php.cn" }, function(data,status){ alert("数据: \n" + data + "\n状态: " + status); }); }); }); </script> </head> <body> <button>发送一个 HTTP POST 请求页面并获取返回内容</button> </body> </html>
章節課件