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>

jQuery系列：Ajax的更多相关文章

  1. ajax系列之用jQuery的ajax方法向服务器发出get和post请求

    打算写个ajax系列的博文,主要是写给自己看,学习下ajax的相关知识和用法,以更好的在工作中使用ajax. 假设有个网站A,它有一个简单的输入用户名的页面,界面上有两个输入框,第一个输入框包含在一个 ...

  2. 基于jQuery的ajax系列之用FormData实现页面无刷新上传

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...

  3. js进阶 14-1 jquery的ajax系列中的load方法的作用是什么

    js进阶 14-1 jquery的ajax系列中的load方法的作用是什么 一.总结 一句话总结:jQuery load()方法作用是从服务器加载数据,是一个简单但强大的AJAX方法. 1.load函 ...

  4. JQuery系列（4） - AJAX方法

    jQuery对象上面还定义了Ajax方法($.ajax()),用来处理Ajax操作.调用该方法后,浏览器就会向服务器发出一个HTTP请求. $.ajax方法 $.ajax()的用法主要有两种. $.a ...

  5. jQuery系列 第八章 jQuery框架Ajax模块

    第八章 jQuery框架Ajax模块 8.1 jQuery框架中的Ajax简介 Ajax技术的核心是XMLHTTPRequest对象,该对象是Ajax实现的关键,发送异步请求.接收服务器端的响应以及执 ...

  6. jQuery系列（十四）：jQuery中的ajax

    1.什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 简言之,在不重载整个网页的情况下,AJAX通过后台加载数据,并在 ...

  7. 网页实时聊天之js和jQuery实现ajax长轮询

    众所周知,HTTP协议是无状态的,所以一次的请求都是一个单独的事件,和前后都没有联系.所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的长时间联系,从而源源不段地获取信息. 一直以来的方式 ...

  8. 第六章 jQuery和ajax应用

    ajax是异步JavaScript和xml的简称. 一. ajax补白 优势 不足(不一定是不足) 不需要任何插件(但需要浏览器支持js) XMLHttpRequest对象在不同浏览器下有差异 优秀的 ...

  9. 触碰jQuery：AJAX异步详解

    触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

  10. Jquery系列教程

    最近想重新温习下Jquery,发现园子里有个很棒的系列教材,所以Mark下来. 转载自:http://www.cnblogs.com/zhangziqiu/tag/jQuery%E6%95%99%E7 ...

随机推荐

  1. C# MVC 5 - 生命周期（应用程序生命周期&请求生命周期）

    本文是根据网上的文章总结的. 1.介绍 本文讨论ASP.Net MVC框架MVC的请求生命周期. MVC有两个生命周期,一为应用程序生命周期,二为请求生命周期. 2.应用程序生命周期 应用程序生命周期 ...

  2. PHP源码分析-变量

    1. 变量的三要素变量名称,变量类型,变量值 那么在PHP用户态下变量类型都有哪些,如下: // Zend/zend.h #define IS_NULL 0 #define IS_LONG 1 #de ...

  3. Partition：分区切换（Switch）

    在SQL Server中,对超级大表做数据归档,使用select和delete命令是十分耗费CPU时间和Disk空间的,SQL Server必须记录相应数量的事务日志,而使用switch操作归档分区表 ...

  4. HTML 获取屏幕、浏览器、页面的高度宽度

    本篇主要介绍Web环境中屏幕.浏览器及页面的高度.宽度信息. 目录 1. 介绍:介绍页面的容器(屏幕.浏览器及页面).物理尺寸与分辨率.展示等内容. 2. 屏幕信息:介绍屏幕尺寸信息:如:屏幕.软件可 ...

  5. scrapy爬虫docker部署

    spider_docker 接我上篇博客,为爬虫引用创建container,包括的模块:scrapy, mongo, celery, rabbitmq,连接https://github.com/Liu ...

  6. 多线程爬坑之路-Thread和Runable源码解析

    多线程:(百度百科借一波定义) 多线程(英语:multithreading),是指从软件或者硬件上实现多个线程并发执行的技术.具有多线程能力的计算机因有硬件支持而能够在同一时间执行多于一个线程,进而提 ...

  7. mysql进阶之存储过程

    往往看别人的代码会有这样的感慨: 看不懂 理还乱 是离愁 别是一番滋味在心头 为什么要使用存储过程? 在mysql开发中使用存储过程的理由: 当希望在不同的应用程序或平台上执行相同的函数,或者封装特定 ...

  8. C#~异步编程再续~await与async引起的w3wp.exe崩溃－问题友好的解决

    返回目录 关于死锁的原因 理解该死锁的原因在于理解await 处理contexts的方式,默认的,当一个未完成的Task 被await的时候,当前的上下文将在该Task完成的时候重新获得并继续执行剩余 ...

  9. 说一说python的牛比与不爽

    本人写了10年php了.今年开始改写python了.不是说php有什么不好,php在自己的势力范围内还是很牛比的.只是我已经不能满足于php那两亩地了. 习惯了脚本,所以很自然就过度到python了. ...

  10. 著名ERP厂商的SSO单点登录解决方案介绍一

          SSO英文全称Single Sign On,单点登录.SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.它包括可以将这次主要的登录映射到其他应用中用于同一个用户 ...