jQuery系列:Ajax

1. load(url, [data], [callback])

1.1 解析

  载入远程 HTML 文件代码并插入至 DOM 中。

  语法格式:

load(url, [data], [callback])

其中,参数

  url:请求被加载的页面URL地址。

  [data]:可选项参数,发送至服务器的数据,key/value格式。

  [callback]:可选项参数,加载成功后返回至加载页面的回调函数。

load()方法默认使用 GET 方式,如果有[data]参数,则会自动转换为POST方式。

1.2 示例

  示例1:load()方法加载全部请求页面HTML代码

  Index.cshtml:

@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-2.1.4.js")"></script>
<script type="text/javascript">
$(function () {
$("#container").load("@Url.Action("About", "Home")");
});
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>

  About.cshtml:

@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>About</title>
</head>
<body>
<div>
Index
</div>
<div id="about">
About
</div>
</body>
</html>

  load()方法之后,container中的HTML代码:

<div id="container">
<meta name="viewport" content="width=device-width">
<title>About</title>
<div>
Index
</div>
<div id="about">
About
</div>
</div>

  加载静态的HTML文件:

<script type="text/javascript">
$(function () {
$("#container").load("About.html");
});
</script>

  示例2:load()方法加载部分请求页面HTML代码

<script type="text/javascript">
$(function () {
$("#container").load("@Url.Action("About", "Home") div");
});
</script>
<div id="container">
<div>
Index
</div>
<div id="about">
About
</div>
</div>
<script type="text/javascript">
$(function () {
$("#container").load("@Url.Action("About", "Home") #about");
});
</script>
<div id="container">
<div id="about">
About
</div>
</div>

  加载静态的HTML文件部分代码:

<script type="text/javascript">
$(function () {
$("#container").load("About.html #about");
});
</script>

  示例3:data可选项参数

<script type="text/javascript">
$(function () {
$("#container").load("@Url.Action("About", "Home")", {
_t: new Date(), // 日期
_r: Math.random() // 随机数
});
});
</script>

  示例4: callback可选项参数

<script type="text/javascript">
$(function () {
$("#container").load("@Url.Action("About", "Home")", {
_t: new Date(), // 日期
_r: Math.random() // 随机数
}, function (data) {
alert(data); // data为url页面返回的结果
});
});
</script>

2. jQuery.get(url, [data], [callback], [type])

2.1 解析

  通过远程 HTTP GET 请求载入信息。

  语法格式:

jQuery.get(url, [data], [callback], [type])

其中,参数

  url:请求被加载的页面URL地址。

  [data]:可选项参数,发送至服务器的数据,key/value格式。

  [callback]:可选项参数,加载成功后返回至加载页面的回调函数。

  [type]:返回的内容格式,xml, html, script, json, text, _default,默认为html。

2.2 示例

<script type="text/javascript">
$(function () {
$.get("@Url.Action("About", "Home")");
});
</script>
<script type="text/javascript">
$(function () {
$.get("@Url.Action("About", "Home")", {
_t: new Date(), // 日期
_r: Math.random() // 随机数
});
});
</script>
<script type="text/javascript">
$(function () {
$.get("@Url.Action("About", "Home")", {
UserName: encodeURI($("#txtUserName").val())
});
});
</script>
<script type="text/javascript">
$(function () {
$.get("@Url.Action("About", "Home")", {
_t: new Date(), // 日期
_r: Math.random() // 随机数
}, function (data) {
alert(data); // data为url页面返回的结果
});
});
</script>
<script type="text/javascript">
$(function () {
$.get("@Url.Action("About", "Home")", {
_t: new Date(), // 日期
_r: Math.random() // 随机数
}, function (data) {
alert(data); // data为url页面返回的结果
}, "json");
});
</script>

  参数[data]可以使用另外一种方式传递:

<script type="text/javascript">
$(function () {
$.get("@Url.Action("About", "Home")",
"_r=" + Math.random()
, function (data) {
alert(data._r);
}, "json");
});
</script>
<script type="text/javascript">
$(function () {
$.get("@Url.Action("About", "Home")",
"_t=" + new Date() + "&_r=" + Math.random()
, function (data) {
alert(data._r);
}, "json");
});
</script>

  jQuery异步加载XML文档:

@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-2.1.4.js")"></script>
<script type="text/javascript">
$(function () {
$.get("@Url.Content("~/Content/Categories.xml")", {
_r: Math.random()
}, function (data) {
var categories = "";
$(data).find("Category").each(function () {
// 遍历获取的数据
var $category = $(this);
categories += "分类ID:" + $category.find("CategoryID").text() + "<br />";
categories += "分类名称:" + $category.find("CategoryName").text() + "<hr />";
});
// 显示数据
$("#container").html(categories);
}, "xml");
});
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>

  Categories.xml:

<?xml version="1.0" encoding="utf-8" ?>
<Categories>
<Category>
<CategoryID>1</CategoryID>
<CategoryName>书籍</CategoryName>
</Category>
<Category>
<CategoryID>2</CategoryID>
<CategoryName>数码电子</CategoryName>
</Category>
<Category>
<CategoryID>3</CategoryID>
<CategoryName>服装服饰</CategoryName>
</Category>
</Categories>

3. jQuery.getJSON(url, [data], [callback])

3.1 解析

  通过 HTTP GET 请求载入 JSON 数据。

  语法格式:

jQuery.getJSON(url, [data], [callback])

其中,参数

  url:请求被加载的页面URL地址。

  [data]:可选项参数,发送至服务器的数据,key/value格式。

  [callback]:可选项参数,加载成功后返回至加载页面的回调函数。

3.2 示例

@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-2.1.4.js")"></script>
<script type="text/javascript">
$(function () {
$.getJSON("/Home/Categories", {
_r: Math.random()
}, function (data) {
//alert(data.length);
var categories = "";
$.each(data, function (i, item) {
categories += "分类ID:" + item.CategoryID + "<br />";
categories += "分类名称:" + item.CategoryName + "<hr />";
});
// 显示数据
$("#container").html(categories);
});
});
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
public JsonResult Categories()
{
List<Category> categories = new List<Category>() {
new Category() { CategoryID = , CategoryName = "书籍" },
new Category() { CategoryID = , CategoryName = "数码电子" },
new Category() { CategoryID = , CategoryName = "服装服饰" }
};
return Json(categories, JsonRequestBehavior.AllowGet);
}
[{"CategoryID":1,"CategoryName":"书籍"},{"CategoryID":2,"CategoryName":"数码电子"},{"CategoryID":3,"CategoryName":"服装服饰"}]

4. jQuery.post(url, [data], [callback], [type])

4.1 解析

  通过远程 HTTP POST 请求载入信息。

  语法格式:

jQuery.post(url, [data], [callback], [type])

其中,参数

  url:请求被加载的页面URL地址。

  [data]:可选项参数,发送至服务器的数据,key/value格式。

  [callback]:可选项参数,加载成功后返回至加载页面的回调函数。

  [type]:返回的内容格式,xml, html, script, json, text, _default,默认为html。

4.2 示例

  jQuery.post(url, [data], [callback], [type])的用法与jQuery.get(url, [data], [callback], [type])相同。

<script type="text/javascript">
$(function () {
$.post("@Url.Action("About", "Home")", {
_t: new Date(), // 日期
_r: Math.random() // 随机数
});
});
</script>

5. jQuery.ajax([options])

5.1 解析

  通过 HTTP 请求加载远程数据。

  $.ajax()是jQuery Ajax的最底层方法,也是功能最强的方法。$.get()、$.post()、$.getJSON()等都是在$.ajax()方法基础之上实现的。

  语法格式:

jQuery.ajax([options])

其中,参数

  [options]:$.ajax()方法中的请求设置,key/value格式。既包含发送请求的参数,也包含服务器响应后回调的数据。

  $.ajax()方法的参数列表:

参数名 类型 描述
url String 发送请求的地址(默认为当前页面)
type String 数据请求方式(get/post),默认为get。
data String或Object 发送到服务器端的数据。将自动转换为请求字符串格式。在GET 请求方式中将附加在 URL 后。
dataType String 服务器返回的数据类型。如果未指定,jQuery自动根据HTTP包MIME信息返回 responseXML 或 responseText,作为参数传递给回调函数,可用类型:
html:返回纯文本的HTML信息,包含的 <Script>会在插入页面时被执行
script:返回纯文本的JavaScript代码
text:返回纯文本字符串
xml:返回可被jQuery处理的XML文档
json:返回JSON格式的数据
beforeSend Function

用于发送请求前修改XMLHttpRequest对象,其中的参数就是XMLHttpRequest对象,由于该函数本身是jQuery事件,如果函数返回false,则表示取消本次事件。
XMLHttpRequest 对象是唯一的参数。

function (XMLHttpRequest) {
  this; // the options for this ajax request

}

complete Function

请求完成后调用的函数,该函数无论数据发送成功或失败都会调用,其中有两个参数:XMLHttpRequest对象和textStatus用于描述成功请求类型的字符串。

function (XMLHttpRequest, textStatus)  {

   this; // the options for this ajax request

}

success Function

请求成功后调用的回调函数,该函数有两个参数:根据参数dataType处理后服务器返回的数据data和textStatus描述状态的字符串。

function (data, textStatus) {

   this; // the options for this ajax request

}

error Function

请求失败后调用的回调函数,该函数有3个参数:XMLHttpRequest对象、出错信息和(可选)捕捉到的错误对象。

function (XMLHttpRequest, textStatus, errorThrown) {
       this; // 通常情况下textStatus和errorThown只有其中一个有值
}

timeout Number 请求超时的时间(毫秒),可以在$.ajaxSetup()方法中设置。
global Boolean 是否响应全局事件,默认为true,表示为响应。如果设置为false,则不响应全局事件,全局事件$.ajaxStart()等将不响应。
async Boolean 是否异步请求,默认为true,表示是异步,如果设置为false,表示同步请求。
cache Boolean 是否进行页面缓存,true表示进行缓存,false表示不进行缓存。

5.2 示例

<script type="text/javascript">
$(function () {
$.ajax({
type: "GET",
url: "/Home/CheckUserName",
dataType: "html",
data: "UserName=" + decodeURI($("#txtUserName").val()),
beforeSend: function (XMLHttpRequest) {
// show loading
},
success: function (data, textStatus) { },
complete: function (XMLHttpRequest, textStatus) {
// hide loading
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
// XMLHttpRequest.status
// XMLHttpRequest.readyState
// textStatus
}
});
});
</script>

6. serialize()、serializeArray()及Param()

6.1 解析

  serialize()序列化表单,只能对<form>标记中的带有name属性的元素序列化

  serialize()语法格式:

serialize()

  该方法是将所选择的DOM元素转换成能随AJAX传递的字符串,即序列化所选择的DOM元素。

  serialize()后的数据格式:

UserName=Libing&Password=1

  serializeArray()序列化表格元素 (类似 serialize() 方法),返回 JSON 数据结构数据,注意:此方法返回的是 JSON 对象而非 JSON 字符串。serializeArray() 方法通过序列化表单值来创建对象数组(名称和值)。

  返回的 JSON 对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对 —— name 参数和 value 参数

[
{ name: "UserName", value: "用户名" },
{ name: "Password", value: "密码" },
{ name: "Email" } // 值为空
]

  serializeArray()语法格式:

serializeArray()

  param() 方法:序列化一个 key/value 对象。

  param() 方法创建数组或对象的序列化表示,该序列化值可在进行 AJAX 请求时在 URL 查询字符串中使用。

  param() 方法用于在内部将元素值转换为序列化的字符串表示。

  param()语法格式:

jQuery.param(object,traditional)

其中,参数

  object:要进行序列化的数组或对象。

  traditional:规定是否使用传统的方式浅层进行序列化(参数序列化)。

6.2 示例

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript" src="~/Scripts/jquery-2.1.4.js"></script>
<script type="text/javascript">
$(function () {
$.get("@Url.Action("About", "Home")",
$("#frm").serialize()
, function (data) {
alert(data.UserName);
}, "json");
});
</script>
</head>
<body>
<form id="frm">
<input name="UserName" type="text" value="用户名" />
<input name="Password" type="text" value="密码" />
</form>
<div id="container">
</div>
</body>
</html>
<script type="text/javascript">
$(function () {
$.get("@Url.Action("About", "Home")",
$("#frm").serializeArray()
, function (data) {
alert(data.UserName);
}, "json");
});
</script>
var fields = $("select, :radio").serializeArray();
$.each(fields, function (i, field) {
$("#results").append(field.value + " ");
});
var params = { width:1900, height:1200 };
var str = jQuery.param(params);
$("#results").text(str);

  结果:

width=1680&height=1050

7. $.ajaxSetup()设置全局Ajax

7.1 解析

  $.ajaxSetup()用于设置全局性的Ajax默认选项,一次设置,全局有效。

  语法格式:

$.ajaxSetup([options])

其中,参数

  [options]:可选项参数是一个对象,设置$.ajax()方法中的参数。

7.2 示例

<script type="text/javascript">
$(function () {
$.ajaxSetup({
type: "POST",
url: "/Home/Index",
dataType:"json"
}); $.ajax({
success: function (data) {
// show data
}
});
});
</script>

  Ajax的其他全局事件:

事件名称 参数 功能描述
ajaxComplete(callback) callback Ajax请求完成时执行函数
ajaxError(callback) callback Ajax请求发生错误时执行函数,其中捕捉到的错误可以作为最后一个参数进行传递
ajaxSend(callback) callback Ajax请求发送前执行函数
ajaxStart(callback) callback Ajax请求开始时执行函数
ajaxStop(callback) callback Ajax请求结束时执行函数
ajaxSuccess(callback) callback Ajax请求成功时执行函数

  ajaxStart()及ajaxStop全局事件示例:

<script type="text/javascript">
$(function () {
$("divLoading").ajaxStart(function () {
$(this).html("正在处理中...").show();
});
$("divLoading").ajaxStop(function () {
$(this).html("处理已完成").hide();
});
});
</script>
上一篇:知道吗?9个搜索引擎优化(SEO)最佳实践


下一篇:百度地图api定位和导航简写