jQuery系列:Ajax
发布日期:2021-09-02 14:28:50 浏览次数:2 分类:技术文章

本文共 6133 字,大约阅读时间需要 20 分钟。

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;}    
Index

  About.cshtml:

@{    Layout = null;}    
About
Index
About
View Code

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

About
Index
About

  加载静态的HTML文件:

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

Index
About
About

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

  示例3:data可选项参数

  示例4: callback可选项参数

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 示例

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

  jQuery异步加载XML文档:

@{    Layout = null;}    
Index

  Categories.xml:

1
书籍
2
数码电子
3
服装服饰
View Code

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;}    
Index
public JsonResult Categories(){    List
categories = new List
() { new Category() { CategoryID = 1, CategoryName = "书籍" }, new Category() { CategoryID = 2, CategoryName = "数码电子" }, new Category() { CategoryID = 3, 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])相同。

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 示例

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 示例

    
Index
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 示例

  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全局事件示例:

 

转载于:https://www.cnblogs.com/libingql/p/4518322.html

转载地址:https://blog.csdn.net/weixin_34151004/article/details/93104597 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:内核编译报错ncurses
下一篇:第十一讲 if分支语句

发表评论

最新留言

留言是一种美德,欢迎回访!
[***.207.175.100]2024年04月08日 03时42分58秒