自行封装Jquery的ajax的form方法

文档说明：

    JQuery的ajax能够实现异步数据加载到页面。同样，ajax还可以用来提交form的表单数据，同时获取返回的信息来局部更新页面。便于页面无刷新时提交表单，解决刷新全页面时无法保存用户在此页面的局部操作问题，提高用户体验度。

用户故事：

    用户A需要查看时间a到时间b之间的数据信息，此时用户A在时间选择框（默认为当日时间c）中选择起始时间a和截止时间b。点击“查询”按钮后，页面通过ajax获取a到b之间的数据信息B并显示在页面。用户可能需要对B中的某个数据C进行诸如“确认、删除”之类的操作。如果此时提交的是html的form的话，操作完成后页面reload导致时间变为c到c，而用户需要重新选择a到b。但如果使用局部的ajax来提交表单的话，完全可以将数据C移除或重新加载整个数据B。从而解决了时间需要重新选择的用户体验问题。

前提调用：

    调用JQuery提供的$.ajax()函数来实现，所以需要下载JQuery代码库（具体下载方式不再赘述，百度提供一个CDN）。该函数的具体参数表详见W3C提供的方法说明。

百度CDN地址
W3C jQuery ajax - ajax() 方法

具体实现

    具体实现的步骤如下：      
     1. 构造html-form和触发按钮
     2. 获取表单数据并序列化
     3. 根据实际需要重组表单数据
     4. 使用$.ajax()方法提交数据
     5. 获取ajax返回数据，构造callback方法，进行提交后的操作
     6. 函数整体说明

    代码及说明如下：

1、构造html-form和触发按钮

    需要构造一个form或者div元素（div具体没测试，但是逻辑可行）来包裹全部需要提交的数据input，便于稍候提取所有需要提交的数据信息。
    此处使用form中嵌套input：

<form action="/example/action" method="get" id="example">
    <input name="time" value=""/>
</form>

    此外还需要一个提交form的触发按钮

<button type="button" id="exampleButton"></button>

    这个按钮可以放在任意位置，当然如果你把type改为submit或不设置type，那就不能放入form里面，否则form会通过浏览器自动提交。
    触发按钮的触发事件可参照如下：

$(document).delegate("#exampleButton","click",function(){
    ajax_form(……);//TODO 暂时不填充，在6中会详细说明参数
})

2、获取表单数据并序列化

    获取表单数据使用JQuery的serializeArray()方法，该函数的具体参数说明详见W3C提供的方法说明。

W3C jQuery ajax - serializeArray() 方法

    使用JQuery的serializeArray()方法获取到的序列化后的json数据如下图

3、根据实际需要重组表单数据

    使用JQuery的serializeArray()方法获取到的序列化后的json数据在一定程序上无法直接提交到后台，否则后台需要做进一步的处理。本文使用后台接受的数据结构为{"数据名称1":"数据值1","数据名称2":"数据值2"}。所以需要做进一步的处理。

/**
 * 将from数据序列化为json
 * @param ele
 * @param callback
 */
function ajax_form2Json(ele, callback) {
    var json = {};
    var form = ele.serializeArray();
    $.each(form, function () {
        if (json[this.name] != undefined) {
            if (!json[this.name].push) {
                json[this.name] = [json[this.name]];
            }
            json[this.name].push(this.value || '');
        } else {
            json[this.name] = this.value || '';
        }
    });
    callback(json);
}

    使用该函数拼装后的数据格式如下图所示

4、使用$.ajax()方法提交数据

    使用JQuery的ajax方法来提交数据

 //提交form数据
    $.ajax({
        url: url,
        type: method,
        data: dataPara,
        success: ……,
        error:……,
        complete: …… //无论成功还是失败都需要执行的操作
    });

5、获取ajax返回数据，构造callback方法，进行提交后的操作

    在4中方法中写入callback方法，根据ajax返回的参数来确定提交后的动作。

 //提交form数据
    $.ajax({
        url: url,
        type: method,
        data: dataPara,
        success: ……,
        error:……,
        complete: function (XMLHttpRequest, status) {
            callback(status, reJson, dataPara);
        }
    });

6、函数整体说明