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>