Tag标签 | 收藏本站 | 设为首页 | 参考书籍 | web前端技术交流①群:WEB前端技术交流群 会员登录 | 会员注册

首页文字描述

会员投稿 RSS订阅 专注web前端: 要么读书、要么旅行,身体和精神必须要有一个在路上。【每天一小步,成功一大步】
搜索: 您的位置主页 > WEB前端 > Jquery/JS > jquery如何将表单序列化为json对象
隐藏/显示侧边栏

jquery如何将表单序列化为json对象

2014-05-11 17:52    来源:未知    责任编辑:admin    字号【
当我们需要像服务器端发送{key1:value1,key2:value2} 我们的jquery是没有现成的方法的。该如何做呢??

我们都知道jquery有序列化表单的方法,obj.serialize(),可是这种数据格式是key&=value的形式,往往不是很好用,那么我们怎样处理呢?

当然,jquery还有一种方法serializeArray()的方法,返回的数据格式为
[{key1:value1},{key2:value2}]
离我们所需要的又进了一步。我们可以在serializeArray()的基础上进行封装一个插件方法serializeJson()代码如下:

HTML结构如下:
<form id="myForm" action="#"> 
    <input name="name"/> 
    <input name="age"/> 
    <input type="submit"/> 
</form> 

jquery插件代码如下:
(function($){ 
        $.fn.serializeJson=function(){ 
            var serializeObj={}; 
            $(this.serializeArray()).each(function(){ 
                serializeObj[this.name]=this.value; 
            }); 
            return serializeObj; 
        }; 
    })(jQuery); 


测试代码如下:
$("#myForm").bind("submit",function(e){
    e.preventDefault(); 
    console.log($(this).serializeJson()); 
});  

要看console.log打印出来的数据,请F12查看console

是不是很容易就可以得到form表单的json格式,只需要调用那个serializeJson插件即可!!!

更多
Tags 标签:
责任编辑:admin
设为首页 | 加入收藏 | 关于我们| 版权声明 | 在线留言 | 网站地图 |