jQuery Ajax

概述

Ajax，全称“Asynchronous JavaScript and XML”，即“异步的JavaScript和XML”。其核心是通过JavaScript的XMLHttpRequest对象，以一种异步的方式，向服务器发送数据请求，并且通过该对象接收请求返回的数据，从而实现客户端与服务器端的数据操作。

Ajax能够刷新指定的页面区域，而不是刷新整个页面，从而减少客户端和服务端之间传输的数据量，提高页面速度，使得用户体验更好。

注意：由于浏览器安全方面的限制，大多数Ajax请求遵守“同源策略”。也就说，Ajax请求无法从不同的域、子域或协议中获取数据。

load()

语法

$().load(url，data，fn)

说明

在jQuery中，可以使用load()方法来通过Ajax请求从服务器中获取数据，然后把获取的数据插入到指定的元素中。

load()方法可以用来加载某一个文件的内容，例如扩展名txt、html和php的文件等。

url参数：加载的页面url。

data参数：发送到服务器的数据。

fn：请求完后的回调。

简单使用

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
	</head>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script>
		$(function() {
			$("#wrapper").load("http://localhost/test/hello.txt");
		})
	</script>
	<body>
		<div id="wrapper"></div>
	</body>
</html>

加载部分内容

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
	</head>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script>
		$(function() {
			$("#wrapper").load("http://localhost/test/content.html .select");
		})
	</script>
	<body>
		<div id="wrapper"></div>
	</body>
</html>

说明：只加载.select类名的元素。

传递数据

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
	</head>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script>
		$(function() {
			$("#wrapper").load("http://localhost/test/test.php", {
				name: "小明",
				age: 18,
				address: "beijing"
			});
		})
	</script>
	<body>
		<div id="wrapper"></div>
	</body>
</html>

回调函数

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
	</head>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script>
		$(function() {
			$("#wrapper").load("http://localhost/test/test.php", {
				name: "小明",
				age: 18,
				address: "beijing"
			}, function(responseText, status, xhr) {
				console.log(responseText);
				console.log(status);
				console.log(xhr);
			});
		})
	</script>
	<body>
		<div id="wrapper"></div>
	</body>
</html>

在这里插入图片描述

$.get()

语法

$.get(url, data, fn, type)

说明

在jQuery中，可以使用$.get()方法通过Ajax向服务器请求获取数据。

url参数：加载的url。

data参数：发送到服务器的数据。

fn参数：请求成功后的回调。

type参数：服务器返回的数据格式。text、html、xml、json、script或default。

使用

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script>
		$(function() {
			$("#send").click(function() {
				$.get("http://localhost/test/test.php", {
					name: "小明",
					age: 18,
					address: "beijing"
				}, function(data, textStatus, jqXHR) {
					console.log(data);
					console.log(textStatus);
					console.log(jqXHR);
					$("#comment").html(data);
				});
			});
		})
	</script>
	<body>
		<form>
			<fieldset>
				<legend>用户信息</legend>
				<p><label>姓名：<input id="name" type="text"></label></p>
				<p><label>年龄：<input id="age" type="text"></label></p>
				<p><label>地址：<input id="address" type="text"></label></p>
				<p><input id="send" type="button" value="提交"></p>
			</fieldset>
		</form>
		<h3>评论列表</h3>
		<div id="comment"></div>
	</body>
</html>

$.post()

语法

$.post(url, data, fn, type)

说明

$. g e t () 方法和$ .post()方法在使用方式上差不多。

使用

$.post("http://localhost/test/test.php", {
    name: "小明",
    age: 18,
    address: "beijing"
}, function(data, textStatus, jqXHR) {
    $("#comment").html(data);
});

$.getJSON()

语法

$.getJSON(url ,data, function(data){
    …… 
})

说明

在jQuery中，可以使用$.getJSON()方法通过Ajax请求获取服务器中JSON格式的数据。

参数url：表示被加载的文件地址。

参数data：表示发送到服务器的数据，数据为“键值对”格式。

参数function(data){}：表示请求成功后的回调函数，请求失败是不会处理的。

使用

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script>
		$(function() {
			$("#btn").click(function() {
				$.getJSON("http://localhost/test/info.json", function(data) {
					var str = "";
					$.each(data, function(index, info) {
						str += "姓名：" + info["name"] + "<br>";
						str += "年龄：" + info["age"] + "<br>";
						str += "性别：" + info["sex"] + "<br>";
						str += "<hr>";
					});
					$("#comment").html(str);
				});
			});
		})
	</script>
	<body>
		<input id="btn" type="button" value="获取" />
		<div id="comment"></div>
	</body>
</html>