$.ajax()方法总结

1.$.ajax()方法是jQuery最底层的Ajax实现。结构是：$.ajax(option),该方法只有一个参数对象，但在这个对象里包含了$.ajax()方法所需要的请求设置以及回掉函数等信息，参数以key/value的形式存在，所有参数都是可选的（具体参数自行查阅）。

2.$.load(),$.get(),$.post,$.getScript(),$.getJSON都是基于$.ajax()方法构建的。

3.序列化元素

(1)serialize()方法：

在项目的过程中，表单是必不可少的，经常用来提供数据，常规的方法是使表单提交到另一个页面，整个浏览器都会被刷新，而使用ajax技术则能够异步地提交表单，并将服务器返回的数据显示在当前页面中。

表单：

<form id="form1">
        <input name="username" id="username"/><br />
        <input name="content" id="content" /><br />
        <input type="button" id="submit" value="提交"/>
    </form>

异步提交数据：

$.get("getData.aspx",{
            username: $("#username").val(),content:$("#content").val(),},function (data,textStatus) {
            $("#res").html(data);
        });

以上这种方式在只有少量字段的表单中，勉强还可以使用，但如果表单元素越来越复杂，使用这种方法在增大工作量的同时也使表单缺乏弹性。jQuery为这一常用的操作提供了一个简化的方法——serialize(),与jQuery中其他方法一样。serialize()方法也是作用于一个jQuery对象，它能够将DOM元素内容序列化为字符串，用于Ajax请求。

$(function () {
            $("#submit").click(function () {
                $.get("getData.aspx",$("#form1").serialize(),textStatus) {
                    $("#res").html(data);
                });
            });
        })

需要注意的是：

$.get()方法中data参数不仅可以使用映射方式，如下：

{
            username: $("#username").val(),}

，也可以使用字符串方式，如下：

<span style="font-size:18px;">"username="+encodeURIComponent($("#username").val())+"&content="+encodeURIComponent($("#content").val())</span>

用字符串方式时，需要注意对字符编码（中文问题），如果不希望编码带来麻烦，可以使用serialize方法，它会自动编码。

(2)serializeArray()方法

在jQuery中还有一个与serialize()类似的方法——serializeArray()方法，该方法不是返回字符串，而是将DOM元素序列化后，返回JSON格式的数据。这个数据就可以使用$.each()函数对数据进行迭代输出。

$("#submit").click(function () {
                var data = $("#form1").serialize();
                //data="lisan&nihao"
                var data1 = $("#form1").serializeArray();
                //data1为一个JSON对象
                $.each(data1,function (i,field) {
                    alert(field.name);
                    alert(field.value);
                })
            });

(3)$.param()方法

它是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化。

$("#submit").click(function () {
                var obj = { a: 1,b: 2,c: 3 };
                alert($.param(obj));
            });
//结果为a=1&b=2&c=3

4.jQuery中的Ajax全局事件

jQuery简化Ajax操作不仅体现在调用Ajax方法和处理相应方面，还体现在对调用Ajax方法的过程中的HTTP请求的控制。通过jQuery提供了一些自定义全局函数，能够味各种与Ajax相关的时间注册回调函数。例如：当Ajax请求开始时，会触发ajaxStart()方法的回调函数，当请求结束时，会触发ajaxStop()方法的回调函数，这些方法都是全局的方法，因此无论创建它们的代码位于何处，只要有Ajax请求发生时，就会触发它们。可以使用这些方法给用户更好的体验。

原文链接：https://www.f2er.com/ajax/164057.html

猜你在找的Ajax相关文章