jquery里把form表单数据转为json的两种方法及在线实例推荐 亲测 原创 收藏

文章标签: json
  • :
  • 03-21 15:20
  • :
  • 86次
  • :
  • 0条
  • 1赞

简介本文讲的是在jquery里,把form表单数据转换为JSON格式数据的两种方法,并且有完整的在线实例演示。

本文站长和大家分享两种可以把form表单的数据转换为JSON格式的数据的方法:

假设,我们有这样一个form表单:

<form id="aijquery" name="aijquery">
    <input type="text" name="text">
	
    <select type="select" name="select">
        <option value="select1">select1</option>
        <option value="select2">select2</option>
    </select>
    <input type="checkbox" name="checkbox" value="checkbox1">checkbox1
    <input type="checkbox" name="checkbox" value="checkbox2">checkbox2
    <input type="checkbox" name="checkbox" value="checkbox3">checkbox3
		
    <input type="radio" name="radio" value="radio1">radio1
    <input type="radio" name="radio" value="radion2">radion2
    <input type="radio" name="radion" value="radio3">radio3

    <button id="get" type="button">获取JSON</button>
</form>

下面来看,如何把上面的表单的数据转换成JSON:

方法一:jquery里自带的 serializeArray() :

var v_json=$("form").serializeArray();

用《js和jquery里把json转为字符串的三种方法》里的方法,我们把上面得到的JSON数据转为字符串,显示出来:

var v_json=$("form").serializeArray();
$("#result").html(JSON.stringify(v_json));
$("#result2").html($.param(v_json));

结果为下:

[{"name":"text","value":"dd"},{"name":"select","value":"select1"},{"name":"checkbox","value":"checkbox1"},{"name":"checkbox","value":"checkbox2"},{"name":"radio","value":"radio1"}]

text=dd&select=select1&checkbox=checkbox1&checkbox=checkbox2&radio=radio1

方法二:一个自定义的jquery函数(插件):

(function($) {
    $.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;
    };
})(jQuery);

使用起来也非常简单,把上面的这个jquery插件引入到我们的网页里后,就可以直接像下面这样来使用了:

var v_json=$("form").serializeJson();
$("#result").html(JSON.stringify(v_json));
$("#result2").html($.param(v_json,true));

输出的结果如下:

{"text":"dd","select":"select1","checkbox":"checkbox1","radio":"radio1"}

text=dd&select=select1&checkbox=checkbox1&radio=radio1

这里是完整的在线实例演示:jquery里form转为json的在线实例演示



您正在找的文章可能是: