自行封装Jquery的ajax的form方法

傷城~ 2022-08-07 00:15 217阅读 0赞

## 文档说明： ##

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地址][CDN]  
> [W3C jQuery ajax - ajax() 方法][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的触发按钮

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

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

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

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

> [W3C jQuery ajax - serializeArray() 方法][W3C jQuery ajax - serializeArray_]

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

![使用序列化函数获取的json数据截图][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);
    }

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

![拼装后的数据格式][20150211145555592]

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、函数整体说明

[CDN]: http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs
[W3C jQuery ajax - ajax_]: http://www.w3school.com.cn/jquery/ajax_ajax.asp
[W3C jQuery ajax - serializeArray_]: http://www.w3school.com.cn/jquery/ajax_serializearray.asp
[json]: /images/20220805/e9b5b607726b42e9ba82375d063a3d7c.png
[20150211145555592]: /images/20220805/183553b0c49f447796e01e9461b49623.png