jQuery扩展方法实现Form表单与Json互相转换的实例代码

下面我将详细讲解“jQuery扩展方法实现Form表单与Json互相转换的实例代码”的完整攻略。

1.什么是jQuery扩展方法

jQuery扩展方法指的是在jQuery中新增自定义的方法，以便我们能够更加便捷的、高效的使用jQuery来进行开发。使用jQuery扩展方法能够提高代码的可复用性和代码的简洁性。

在jQuery的扩展方法的基础上，我们可以自己实现一些非常有用的功能，比如：实现Form表单与Json互相转换。

2.实现Form表单与Json互相转换的示例

2.1 通过扩展方法实现Form表单转换成Json数据

以下是一个示例代码片段，这个扩展方法将form表单元素的值转换为json格式：

$.fn.serializeJson=function(){
    var serializeObj={};
    var array=this.serializeArray();
    var str=this.serialize();
    $(array).each(function(){
        if(serializeObj[this.name]){
            if($.isArray(serializeObj[this.name])){
                serializeObj[this.name].push(this.value);
            }else{
                serializeObj[this.name]=[serializeObj[this.name],this.value];
            }
        }else{
            serializeObj[this.name]=this.value;
        }
    });
    return serializeObj;
};

以上代码中，我们定义了一个名为serializeJson的扩展方法，该方法可以将form表单元素的值序列化成JSON格式的数据。

使用该扩展方法的示例如下：

<form id="form" action="#" method="post">
    <input type="text" name="name" value="张三">
    <input type="text" name="age" value="18">
    <input type="text" name="address" value="北京">
</form>
<button id="btn">提交</button>

//点击提交按钮时，将form表单的数据以json格式打印到控制台
$("#btn").click(function(){
    var jsonData=$("#form").serializeJson();
    console.log(jsonData);
});

2.2 通过扩展方法实现Json数据转换成Form表单

以下是一个示例代码片段，这个扩展方法将json格式数据中的值填充到form表单元素中：

$.fn.pureJson=function(){
    var serializeObj=this;
    var form=$(this[0]).parents("form");
    $(form).find("input").each(function(){
        var name=$(this).attr("name");
        if(serializeObj[name]!=undefined){
            if(this.type=="radio" || this.type=="checkbox"){
                if(this.value==serializeObj[name].toString()){
                    $(this).attr("checked",true);
                }
            }else{
                $(this).val(serializeObj[name]);
            }
        }
    });
};

以上代码中，我们定义了一个名为pureJson的扩展方法，该方法可以将JSON格式的数据填充到form表单元素中。

使用该扩展方法的示例如下：

<form id="form" action="#" method="post">
    <input type="text" name="name">
    <input type="text" name="age">
    <input type="text" name="address">
</form>
<button id="btn">提交</button>

//点击提交按钮时，将json数据填充到form表单中
$("#btn").click(function(){
    var person={
        name:"李四",
        age:20,
        address:"上海"
    };
    $("#form").pureJson(person);
});