jQuery AJAX 方法

時間 2020-01-09

標籤 jquery ajax 方法欄目 JQuery 简体版

原文原文鏈接

AJAX 是一種與服務器交換數據的技術，能夠在不從新載入整個頁面的狀況下更新網頁的一部分。javascript

1. $.ajax()方法: 執行異步AJAX（異步 HTTP）請求,全部的 jQuery AJAX 方法都使用 ajax() 方法。該方法一般用於其餘方法不能完成的請求。php

語法：$.ajax( { name: value, name:value,... } ) 該參數規定 AJAX 請求的一個或多個名稱/值對。html

如何使用異步設置來規定異步請求:java

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
</head>
<body>
	<div><h2>AJAX能夠修改文本內容</h2></div>
	<button>修改內容</button>
</body>
<script type="text/javascript">
	$(document).ready(function() {
		$("button").click(function(){
			$.ajax({url:"test.txt",async:true,success:function(result){
				$("div").html(result);
			}});
		});
	});
</script>
</html>

//url 規定發送請求的 URL。默認是當前頁面。
//success(result,status,xhr)	當請求成功時運行的函數。success方法是一個回調函數，獲取從後臺傳來的數據
//async 	布爾值，表示請求是否異步處理。默認是 true。

如何使用 dataType 設置來規定請求的數據類型:jquery

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
</head>
<body>
	<button>使用Ajax獲取數據並執行/button>
</body>
<script type="text/javascript">
	$(document).ready(function() {
		$("button").click(function(){
			$.ajax({url:"ajax_script.js",dataType:"script"});
		});
	});
//dataType 預期的服務器響應的數據類型。
</script>
</html>

ajax_script.js文件內容：ajax

alert("該 JavaScript 腳本經過 AJAX 加載後執行");

如何使用錯誤設置來處理 AJAX 請求中的錯誤 :json

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
</head>
<body>
	
	<p>藝術家</p>
	<div></div>
	<button>獲取 CD 信息</button>
</body>
<script type="text/javascript">
	$(document).ready(function() {
		$("button").click(function(){
			$.ajax({url:"wrongfile.txt",error:function(xhr) {
				alert("錯誤提示：" + xhr.status + xhr.statusText);
			}});
		});
	});
	//error(xhr->XMLHttpRequest,status,error) 若是請求失敗要運行的函數。xhr.status和error函數中的status是不同的，error函數中的status主要包括："success"、"notmodified"、"error"、"timeout"、"parsererror"，而xhr.status以下所講:404 NotFound
</script>
</html>

2. jQuery get() 方法: $.get() 方法使用 HTTP GET 請求從服務器加載數據。服務器

語法：$.get(URL,data,function(data,status,xhr),dataType)異步

參數	描述
URL	必需。規定您須要請求的 URL。
data	可選。規定連同請求發送到服務器的數據。
function(data,status,xhr)	可選。規定當請求成功時運行的函數。額外的參數： data - 包含來自請求的結果數據 status - 包含請求的狀態（"success"、"notmodified"、"error"、"timeout"、"parsererror"） xhr - 包含 XMLHttpRequest 對象
dataType	可選。規定預期的服務器響應的數據類型。默認地，jQuery 會智能判斷。可能的類型： "xml" - 一個 XML 文檔 "html" - HTML 做爲純文本 "text" - 純文本字符串 "script" - 以 JavaScript 運行響應，並以純文本返回 "json" - 以 JSON 運行響應，並以 JavaScript 對象返回 "jsonp" - 使用 JSONP 加載一個 JSON 塊，將添加一個 "?callback=?" 到 URL 來規定回調

發送一個 HTTP GET 請求到頁面並取回結果：async

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
</head>
<body>
	<button>發送一個 HTTP GET 請求並獲取返回的結果</button>
</body>
<script type="text/javascript">
	$(document).ready(function() {
		$("button").click(function(){
			$.get("file.php",function(data,status) {
				alert("數據：" + data + "\n狀態:" + status);
			});
		});
	});
	 
</script>
</html>

file.php

<?php
echo "這是從PHP文件中讀取的數據。"
?>

3. jQuery post() 方法: $.post() 方法使用 HTTP POST 請求從服務器加載數據。

語法：$(selector).post(URL,data,function(data,status,xhr),dataType)

參數	描述
URL	必需。規定將請求發送到哪一個 URL。
data	可選。規定連同請求發送到服務器的數據。
function(data,status,xhr)	可選。規定當請求成功時運行的函數。額外的參數： data - 包含來自請求的結果數據 status - 包含請求的狀態（"success"、"notmodified"、"error"、"timeout"、"parsererror"） xhr - 包含 XMLHttpRequest 對象
dataType	可選。規定預期的服務器響應的數據類型。默認地，jQuery 會智能判斷。可能的類型： "xml" - 一個 XML 文檔 "html" - HTML 做爲純文本 "text" - 純文本字符串 "script" - 以 JavaScript 運行響應，並以純文本返回 "json" - 以 JSON 運行響應，並以 JavaScript 對象返回 "jsonp" - 使用 JSONP 加載一個 JSON 塊，將添加一個 "?callback=?" 到 URL 來規定回調

使用 HTTP POST 請求從服務器加載數據：

.jQuery load() 方法: 從服務器加載數據，並把返回的數據放置到指定的元素中。

注意：還存在一個名爲 load 的 jQuery 事件方法。調用哪一個，取決於參數。語法:$(selector).load(url,data,function(response,status,xhr))\

參數	描述
url	必需。規定您須要加載的 URL。
data	可選。規定連同請求發送到服務器的數據。
function(response,status,xhr)	可選。規定 load() 方法完成時運行的回調函數。額外的參數： response - 包含來自請求的結果數據 status - 包含請求的狀態（"success"、"notmodified"、"error"、"timeout"、"parsererror"） xhr - 包含 XMLHttpRequest 對象

實例：把文件 "test.txt" 的內容加載到指定的 <div> 元素：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
</head>
<body>
	 <div id="div1"><h2>使用jQuery AJAX修改文本內容</h2></div>
	 <button>獲取外部內容</button>
</body>
<script type="text/javascript">
	$(document).ready(function(){
		$("button").click(function(){
			$("#div1").load('test.txt')
		});
	});
</script>
</html>