jQuery中ajax的基本使用（2）

之前我在博客中介绍了ajax的一些基本方法，在本篇博客中，我将介绍ajax的一些其他方法，以及ajax的表单序列化

1. 表单序列化

Ajax 用的最多的地方莫过于表单操作，而传统的表单操作是通过 submit 提交将数据传输到服务器端。如果使用 Ajax 异步处理的话，传统的做法是将每个表单元素逐个获取才方能提交。

<!--HTML代码-->
<form>
    用户名：<input type="text" name="user" />
    邮件：<input type="text" name="email" />
    <input type="radio" name="sex" value="male" />男
    <input type="radio" name="sex" value="female" />女
    <input id="btn" type="button" value="提交" />
</form>
<div id="box"></div>

//JS代码
$(function () {    
    $('#btn').click(function () {
        $.ajax({
            type : 'POST',
            url : 'user.php',
            data : {
                    user : $('form input[name=user]').val(),
                    email : $('form input[name=email]').val(),
                    sex : $('form input[name=sex]').val()
                    },
            success : function (response, status, xhr) {
                $("#box").text(response);
                },
            });
        }); 
    });

//服务端PHP代码
<?php
if ($_POST['sex']=='male') {
    $sex='先生'; 
}else{
    $sex='女士';
}
    echo $_POST['user'].$sex.",您好！".'  您的邮箱是： '.$_POST['email'];
?>

最后运行结果为：

这种传统做法在发送的data较少时，也是比较方便。但是当表单元素特别多的情况下，需要将表单数据一一列出的话就比较麻烦，而且容易出错。另外当有多个表单时，我们在复制提交的JS代码时，需要改动的data属性也会比较多。

使用表单序列化方法.serialize()，会智能的获取指定表单内的所有元素。这样，在面对大量表单元素时，会把表单元素内容序列化为字符串，然后再使用 Ajax 请求。.serialize()方法不但可以序列化表单内的元素，还可以直接获取单选框、复选框和下拉列表框等内容。因此上述的JS代码部分可以改写成如下：

    $(function () {    
    $('#btn').click(function () {
        $.ajax({
            type : 'POST',
            url : 'user.php',
            data : $('form').serialize(),
            success : function (response, status, xhr) {
                $("#box").text(response);
            },
        });
        }); 
    });

经过序列化之后，发送的是一个由键值对组成的字符串。除了.serialize()方法，还有一个可以返回 JSON 数据的方法：.serializeArray()。这个方法可以直接把数据整合成键值对的 JSON 对象。

$(function () {    
    $('#btn').click(function () {
        $.ajax({
            type : 'POST',
            url : 'user.php',
            data : $('form').serializeArray(),
            success : function (response, status, xhr) {
                $("#box").text(response);
            },
        });
        }); 
    });

如果我们是在同一个程序中要多次调用$.ajax()方法，而每个很多参数都相同。为了避免重复写相同的参数，这个时候我们可以使用 jQuery 提供的$.ajaxSetup()请求默认值来初始化参数。使用方法如下：

$(function () {    
    $('#btn').click(function () {
        $.ajaxSetup({
            url: 'user.php',
            type: 'POST',
            data : $('form').serialize(),
        });

        $.ajax({
            success : function (response, status, xhr) {
                $("#box").text(response);
            },
        });
        }); 
    });

2. ajax的一些其他全局请求事件

除了之前介绍的一些ajax的基本方法，这里，我将介绍一下 Ajax 的另外的一些全局请求事件。

2.1 .ajaxStart()和.ajaxStop()

在 Ajax 异步发送请求时间较长时，由于是异步请求，不会重新加载整个页面，因此客户并不知道是否请求发送成功，这样用户的体验将会降低。因此，如果在请求期间能给用户一些提示，比如：正在努力加载中…，那么相同的请求时间会让用户体验更加的好一些。
要实现上述功能，我们先定义一个<span>标签

<p class="loading" style="display: none; color: red; font-weight: bold">
    正在加载中...
</p>

然后通过.ajaxStart()和.ajaxStop()和控制其什么时候隐藏什么时候出现。

$(document).ajaxStart(function(){
            $('.loading').show();
        }).ajaxStop(function(){
            $('.loading').hide();
        });

只要用户触发了 Ajax，请求开始时（未完成其他请求）激活.ajaxStart()，请求结束时（所有请求都结束了）激活.ajaxStop()。但是，有些情况下的ajax我们并不希望它触发全局时间，这时可以用$.ajax()的global属性进行取消，如下：

$.ajax({
    global : false
    });

2.2 .ajaxError()

当Ajax进行异步请求出现错误时，我们需要把错误报告出来，提醒用户重新提交或提示开发者进行修补。如果是使用$.ajax()方法进行的异步请求，$.ajax()提供了一歌属性方法来显示错误error：function(){};

$.ajax({
            url: 'user3.php',
            type: 'POST',
            data : $('form').serialize(),
            success : function (response, status, xhr) {
                $("#box").text(response);
            },
            error : function(xhr, errorText, errorType){
                    alert(errorText+":"+errorType+"; "+xhr.status);
            }, 
        });

如果是使用在上层封装的方法比如$.get()、$.post()和.load()，是没有回调错误处理的。不过可以通过连缀处理使用局部.error()方法（可用.fail()方法替代）。

$.post('user4.php').error(function(xhr, errorText, errorType) {
            alert(errorText+":"+errorType+"; "+xhr.status);
        });

早期，通过全局.ajaxError()事件方法来返回错误信息

$(document).ajaxError(function(event,xhr,settings,info){
                alert(xhr.status+":"+xhr.statusText);
        });

2.3 .ajaxSuccess()

全局事件，请求成功完成时执行。对应上层封装方法比如$.get()、$.post()和.load()的一个局部方法：.success()（可用.done()替代）；对应$.ajax()方法的一个属性方法：success : function(){};

2.4 .ajaxComplete()

全局事件，请求完成后注册一个回调函数，不管失败或成功。对应上层封装方法比如$.get()、$.post()和.load()的一个局部方法：.complete()（可用.always()替代）；对应$.ajax()方法的一个属性方法：complete : function(){};

2.5 .ajaxSend()

全局事件，请求发送之前要绑定的函数。对应上层封装方法没有对应的局部方法；对应$.ajax()方法的一个属性方法：beforeSend : function(){};

注意这几个事件的先后顺序beforeSend->success/error->complete

        $.ajax({
            url: 'user.php',
            type: 'POST',
            data : $('form').serialize(),
            success : function () {
                alert('请求成功后！');
            },
            error : function(){
                    alert('请求失败后');
            }, 
            complete : function(){
                alert('请求完成后，不管是否失败成功');
            },
            beforeSend : function(){
                alert('发送请求之前执行');
            },
        });