本文实例讲述了 jQuery 实现 form 表单序列化转换为 json 对象功能. 分享给大家供大家参考, 具体如下:
做 web 前端开发时, 需要 ajax 提交大量表单数据, 如果一个个 form 字段拼接很费劲也容易出错, 下面方法可解决这个问题
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>jquery form 序列化转换为 json 对象</title>
- <script src="//cdn.bootCSS.com/jquery/3.0.0/jquery.min.js"></script>
- </script>
- </head>
- <body>
- <form action=""name="post_form"id="post_form">
- 姓名:<input type="name" name="name" value="王">
- <br/>性别:<input type="radio" name="sex" value="男" checked > 男 < input type="radio" name="sex" value="女">女
- <br/>爱好:<input type="checkbox" name="loves" value="篮球">篮球 < input type="checkbox" name="loves" value="足球">足球
- <br/>籍贯:<select name="province">
- <option value="上海">上海</option>
- <option value="北京">北京</option>
- <option value="深圳">深圳</option>
- </select>
- </form>
- <div id="result" style="margin-top:20px;width:600px;height:100px;border:1px solid #f00;">
- </div>
- <div>
- <button id="send">发送</button>
- </div>
- <script>
- //jquery form 序列化转换为 json 对象
- (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);
- $(document).ready(function(){
- $("#send").click(function(){
- var post_data=$("#post_form").serializeJson();// 表单序列化
- $("#result").html(JSON.stringify(post_data));
- })
- })
- </script>
- </body>
- </html>
运行效果如下图所示:
PS: 关于 json 操作, 这里再为大家推荐几款比较实用的 json 在线工具供大家参考使用:
在线 JSON 代码检验, 检验, 美化, 格式化工具:
http://tools.jb51.net/code/json
JSON 在线格式化工具:
http://tools.jb51.net/code/jsonformat
在线 XML/JSON 互相转换工具:
http://tools.jb51.net/code/xmljson
json 代码在线格式化 / 美化 / 压缩 / 编辑 / 转换工具:
http://tools.jb51.net/code/jsoncodeformat
在线 json 压缩 / 转义工具:
http://tools.jb51.net/code/json_yasuo_trans
更多关于 jQuery 相关内容感兴趣的读者可查看本站专题:jQuery form 操作技巧汇总,jQuery 操作 json 数据技巧汇总,jQuery 常用插件及用法总结,jQuery 扩展技巧总结,jQuery 表格 (table) 操作技巧汇总及jquery 选择器用法总结
来源: http://www.jb51.net/article/140685.htm