JQuery扩展方法实现Form表单与Json互相转换；ajax提交表单

Posted on 2019-06-12 14:56 火冰·瓶阅读(1283) 评论(0) 编辑收藏举报

1.把表单转换出json对象

//把表单转换出json对象
   $.fn.toJson = function () {
       var self = this,
           json = {},
           push_counters = {},
           patterns = {
               "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
               "key": /[a-zA-Z0-9_]+|(?=\[\])/g,
               "push": /^$/,
               "fixed": /^\d+$/,
               "named": /^[a-zA-Z0-9_]+$/
           };
 
       this.build = function (base, key, value) {
           base[key] = value;
           return base;
       };
 
       this.push_counter = function (key) {
           if (push_counters[key] === undefined) {
               push_counters[key] = 0;
           }
           return push_counters[key]++;
       };
 
       $.each($(this).serializeArray(), function () {
           // skip invalid keys
           if (!patterns.validate.test(this.name)) {
               return;
           }
 
           var k,
               keys = this.name.match(patterns.key),
               merge = this.value,
               reverse_key = this.name;
 
           while ((k = keys.pop()) !== undefined) {
               // adjust reverse_key
               reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');
 
               // push
               if (k.match(patterns.push)) {
                   merge = self.build([], self.push_counter(reverse_key), merge);
               }
 
               // fixed
               else if (k.match(patterns.fixed)) {
                   merge = self.build([], k, merge);
               }
 
               // named
               else if (k.match(patterns.named)) {
                   merge = self.build({}, k, merge);
               }
           }
 
           json = $.extend(true, json, merge);
       });
 
       return json;
   };

2.将josn对象赋值给form

//将josn对象赋值给form
    $.fn.loadData = function (obj) {
        var key, value, tagName, type, arr;
 
        this.reset();
 
        for (var x in obj) {
            if (obj.hasOwnProperty(x)) {
                key = x;
                value = obj[x];
 
                this.find("[name='" + key + "'],[name='" + key + "[]']").each(function () {
                    tagName = $(this)[0].tagName.toUpperCase();
                    type = $(this).attr('type');
                    if (tagName == 'INPUT') {
                        if (type == 'radio') {
                            if ($(this).val() == value) {
                                    $(this).attr('checked', true);
                            }
                        } else if (type == 'checkbox') {
                            arr = value.split(',');
                            for (var i = 0; i < arr.length; i++) {
                                if ($(this).val() == arr[i]) {
                                        $(this).attr('checked', true);
                                    break;
                                }
                            }
                        } else {
                            $(this).val(value);
                        }
                    } else if (tagName == 'SELECT' || tagName == 'TEXTAREA') {
                        $(this).val(value);
                    }
                });
            }
        }
    }

2.通过Jquery ajax提交表单

$('#btn_submit').click(function (event) {
 
    if(!$('#form_node').valid())
    {
        return;
    }
 
 
    $(this).html('<i class="ace-icon fa fa-floppy-o  bigger-150"></i>正在提交');
    $(this).attr('disabled', true);//禁用表单提交按钮，避免重复提交
 
 
    // 获取表单数据
    var formData = $('#form_node').serialize();
 
    // 发送Ajax请求
    $.ajax({
        url: 'url',
        type: 'POST',
        data: formData,
        success: function (data) {
            // 处理服务器返回的数据
            console.log(data);
             
            $('#form_node')[0].reset();//清空表单数据
 
           //恢复表单提交按钮功能
            setTimeout(function () {
                $('#btn_submit').attr('disabled', false);
                $('#btn_submit').html('<i class="ace-icon fa fa-floppy-o  bigger-150"></i>保存');
            }, 2000);
 
        },
        error: function (jqXHR, textStatus, errorThrown) {
            // 处理请求失败的情况
            console.error(textStatus, errorThrown);
 
           //恢复表单提交按钮功能
            setTimeout(function () {
                $('#btn_submit').attr('disabled', false);
                $('#btn_submit').html('<i class="ace-icon fa fa-floppy-o  bigger-150"></i>保存');
            }, 2000);
        }
    });
});　

服务端代码：

[HttpPost]
public async Task<IActionResult> AddNode(AreaInfo areaInfo)
{
}
 
 
[HttpPost]
public async Task<IActionResult> AddNode(string name,int age,string address......)
{
}