jquery自动将form表单封装成json的具体实现

Posted 2023-04-05

从网上看到了这样的代码
想请问一下 这个要怎么用怎么测试呢？
//提示到服务器
$(function ()
$("#butsubmit").click(function ()
var data = $("#tf").serializeArray(); //自动将form表单封装成json
这样的函数要怎去使用呢？

后端处理那部分要写在哪里呢？

这篇文章主要介绍了jquery自动将form表单封装成json的具体实现,需要的朋友可以参考下
前端页面：
代码如下:
<span style="font-size:14px;"> <form action="" method="post" id="tf">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<th>
姓名：
</th>
<td>
<input type="text" id="txtUserName" name="model.UserName" />
</td>
<th>
联系手机：
</th>
<td>
<input type="text" name="model.Mobile" id="txtMobile" maxlength="11" />
</td>
<th>
密码：
</th>
<td>
<input type="password" name="model.Pwd" id="txtPwd" maxlength="11" />
</td>
</tr>
<tr>
<td style="text-align: center;" colspan="2">
<input type="button" value=" 提 交 " style="padding-top: 3px;" name="butsubmit"
id="butsubmit" />
</td>
</tr>
</table>
</form>
//提示到服务器
$(function ()
$("#butsubmit").click(function ()
var data = $("#tf").serializeArray(); //自动将form表单封装成json

// $.ajax(
// type: "Post", //访问WebService使用Post方式请求
// contentType: "application/json", //WebService 会返回Json类型
// url: "/home/ratearticle", //调用WebService的地址和方法名称组合 ---- WsURL/方法名
// data: data, //这里是要传递的参数，格式为 data: "paraName:paraValue",下面将会看到
// dataType: 'json',
// success: function (result) //回调函数，result，返回值
// alert(result.UserName + result.Mobile + result.Pwd);
//
// );

$.post("/home/ratearticle", data, RateArticleSuccess, "json");
);
)

//结果显示

function RateArticleSuccess(result)
alert(result.UserName + result.Mobile + result.Pwd);
</span>

后端处理：
代码如下:
<span style="font-size:14px;">public JsonResult ratearticle(UserInfo model)

return Json(model);
</span>

参考技术A 若设定了dataType值json，那么返回数据格式必须为json格式正确的json数据格式如下，不能用单引号代替双引号正确："is_ok":true,"key":"value"错误：'is_ok':true,'key':'value'php中可用json_encode()函数编码追问

您好 我没有看懂您的回答。

jQuery插件：Ajax将Json数据自动绑定到Form表单

jQuery注册方法的两种常用方式：

//jQuery静态方法注册
//调用方法$.a1()
$.extend({
    a1: function () {
        console.log("a1");
    }
})
//jQuery插件方法注册
//调用方法$("#col").b1()
$.fn.extend({
    b1: function () {
        console.log("b1");
    }
})

将ajax返回的数据自动绑定到form表单中的插件，常用语修改等业务，源码如下：

/*
flagName:标识绑定字段元素的属性，如data-bind是寻找绑定字段的属性：<input data-bind=‘Time‘ type=‘text‘ />
jsonData:json数据对象，根据其中的属性名，绑定到对应属性名的字段上
*/
var JsonBind = function (ele, opt) {
    this.$element = $(ele),
    this.defaults = {
        flagName: ‘name‘
    },
    /*
    当给extend方法传递一个以上的参数时，它会将所有参数对象合并到第一个里。
    同时，如果对象中有同名属性时，合并的时候后面的会覆盖前面的。
    将一个新的空对象做为$.extend的第一个参数，defaults和用户传递的参数对象紧随其后，
    这样做的好处是所有值被合并到这个空对象上，保护了插件里面的默认值。
    */
    this.options = $.extend({}, this.defaults, opt)
};
JsonBind.prototype = {
    bind: function () {
        if (this.options.jsonData) {
            if (this.options.jsonData == ‘string‘) {
                this.options.jsonData = JSON.parse(this.options.jsonData);
            }
        }
        //获得触发事件的元素
        var dom = this.$element;
        var name = this.options.flagName;
        var data = this.options.jsonData;
        //遍历元素内所有含有name属性的元素
        //return使其只是链式调用，如：$("#col").get().set().trim()
        return dom.find("[" + name + "]").each(function () {
            //取出json中对应name属性的值
            var key = $(this).attr(name);
            var val = $.trim(data[key]);
            if (val != ‘‘) {
                //检查当前元素标签，并根据不同标签进行赋值操作
                if ($(this).is("input")) {
                    //检查当前元素类型，并根据不同类型进行赋值操作
                    switch ($(this).attr("type")) {
                        case "radio":
                            $(dom).find("input:radio[" + name + "=‘" + key + "‘][value=‘" + val + "‘]").prop("checked", true);
                            break;
                        case "checkbox":
                            $(dom).find("input:checkbox[" + name + "=‘" + key + "‘][value=‘" + val + "‘]").prop("checked", true);
                            //$(this).siblings("[value=‘" + val + "‘]").prop("checked", true);
                            break;
                        default:
                            $(this).val(val);
                            break;
                    }
                }
                else if ($(this).is("select")) {
                    $(this).val(val);
                }
            }
        });
    }
};
//将方法增加到jQuery扩展方法中
$.fn.extend({
    dataBind: function (options) {
        var jsBind = new JsonBind(this, options);
        return jsBind.bind();
    }
});

调用方式：

//flagName是可选参数，默认是元素的name属性
$("#menuForm").dataBind({
    jsonData:JSON.parse(data),
    flagName:‘name‘
});