jQuery Ajax【上】

学习要点：

1.Ajax 概述

2.load()方法

3.

$.get()

和

$.post()

4.

$.getScript()

和

$.getJSON()

5.

$.ajax()

方法

6.表单序列化

一、Ajax概述

Ajax 全称为：“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML）

可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。

Ajax最大的特点在于异步请求

JQ对ajax进行了大量的封装，我们压根不用考虑浏览器的兼容

JQ对ajax进行了三层封装：

最底层：

$.ajax()

中间层：

$.post()、$.get()和$.load()

PS ：.load()适合做静态文件的异步获取,

$.post()

和

$.get()

适合向服务器传递参数

最顶层：

$.getScript()和$.getJSON()

二、

$.load()

用途 适合做静态文件的异步获取，接受4个参数

url String 请求页面的URL

data Object 发送数据, 当传值的时候为POST请求，不传值data时，默认为get请求

callback Function 回调函数

其中callback回调函数又包含4个参数

responseText （请求返回）

textStatus（请求状态）

XMLHttpRequest（XMLHttpRequest 对象）

当按钮点击时，我们发送ajax请求到ajax.php页面

请求类型为POST，请求参数为url

<input type="button" value="异步获取数据" />
<div id="box"></div>

<?php
if ($_POST['url'] == 'lamport') {
echo 'lamport';
} else {
echo 'lamp';
}
?>

$("input").click(function () {
$("#box").load("ajax.php", {
"url" : "lamport"
}, function (response, status, xhr) {
$(this).html("返回值：" + xhr.responseText + ", 状态码：" + xhr.status + ", 状态值：" + xhr.statusText);
});
});

三、

$.get()和$.post()

用途 适合向服务器发送参数

他们除了可以传递url、data和callback,还可以传递第四个参数

type，即服务器返回的内容格式：包括 xml、html、script、json、jsonp 和 text

除了url必选，其他可选

下面是一个案例

异步GET请求，返回XML

// ajax.xml
<root>
<name>张三</name>
<age>23</age>
</root>

$("input").click(function () {
$.get("ajax.xml", function (response, status, xhr) {
$("#box").html($(response).find("root").find("name").text());
});
});

四．

$.getScript()和$.getJSON()

$.getScript()

，用于加载特定的 JS 文件；

$.getJSON()

，用于专门加载 JSON 文件。

点击鼠标加载js文件

// ajax.js
alert("加载我");

$("input").click(function () {
$.getScript("ajax.js");
});

点击鼠标加载json文件

// ajax.json
{"name" : "zhang", "age" : 23}

$("input").click(function () {
$.getJSON("ajax.json", function (response, status, xhr) {
$("#box").html($(response)[0].name);
});
});

五、

$.ajax()

最底层的方法，只接受一个对象参数

$("input").click(function () {
$.ajax({
type : 'POST',
url : "ajax.php",
data : {
"url" : "lamport"
},
success : function (response, status, xhr) {
$("#box").html(response);
}
});
});

六．表单序列化

以下的js要用的HTML代码

<form>
姓名： <input type="text" name="username"/></br>
邮箱： <input type="text" name="email"/></br>
性别： <input type="radio" name="sex" value="男" checked="true"/>男<input type="radio" name="sex" value="女"/>女</br>
爱好： <input type="checkbox" name="hobby[]" value="篮球"/>篮球
<input type="checkbox" name="hobby[]" value="排球"/>排球
<input type="checkbox" name="hobby[]" value="足球"/>足球</br>
问题： <select name="ans">
<option value="what">你会什么？</option>
<option value="how">你想怎么样？</option>
<option value="why">你为什么这样？</option>
</select></br>
<input type="button" name="sub" value="提交"/>
</form>

先看看常规的表单提交

// ajax.php
<?php
echo $_POST['user'] . "-" . $_POST["email"];
?>

$("form input[type=button]").click(function () {
$.ajax({
type : "POST",
url : "ajax.php",
data : {
user : $("form input[name=username]").val(),
email : $("form input[name=email]").val()
},
success : function (response, status, xhr) {
alert(response);
}
});
});

而使用.serialize()序列化，就是自动的提交表单中填的数据

$("form input[type=button]").click(function () {
$.ajax({
type : "POST",
url : "ajax.php",
data : $("form").serialize(),
success : function (response, status, xhr) {
alert(response);
}
});
});

有时我们会多次提交表单，而且表单的某些字段是重复的，

为了避免这样，我们可以使用

$.setAjax()

方法来初始化重复的字段

$("form input[type=button]").click(function () {
$.setAjax({
type : "POST",
url : "ajax.php",
data : $("form").serialize()
});
$.ajax({
success : function (response, status, xhr) {
alert(response);
}
});
});

除了.serialize()序列化，还可以用.serializeArray()来返回一个JSON对象

$("form input[type=button]").click(function () {
var json = $("form").serializeArray();
for (var j in json) {
console.log(json[j].value);
}
});

同时我们也可以向data传递字符串，因为这样会更安全，起码比对象安全

我们可以使用.param()方法将对象转换为字符串，然后再传递

$("form input[type=button]").click(function () {
var json = $("form").serializeArray();
for (var j in json) {
console.log($.param(json[j]));
}
});