使用jQuery将表单序列化为json对象,其中serializeJson方法的名字任意,serializeArray()这个jQuery提供的方法。this指的就是谁调用了这个方法。

$.fn.serializeJson=function(){
var serializeObj={};
var array=this.serializeArray();
$(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;
};

使用演示:

this指的就是$("#searchForm")

<script type="text/javascript">
//指定一个工具方法,用于将指定的form表单中所有的输入项转为json数据{key:value,key:value,..}
$.fn.serializeJson=function(){
var serializeObj={};
var array=this.serializeArray();
$(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;
}; $("#btn").click(function(){
//将指定的form表单中所有的输入项转为json数据{key:value,key:value,..}
var p = $("#searchForm").serializeJson(); //调用数据表格的load方法,重新发送一次ajax请求,并且提交参数
$("#grid").datagrid("load",p); //关闭查询窗口
$("#searchWindow").window("close");
});
</script>

页面提供form表单

        <!-- 这个表单其实不是用来提交的,是用来转json用的 -->
<form id="searchForm">
<table class="table-edit" width="80%" align="center">
<tr class="title">
<td colspan="2">查询条件</td>
</tr>
<tr>
<td>省</td>
<td><input type="text" name="region.province"/></td>
</tr>
<tr>
<td>市</td>
<td><input type="text" name="region.city"/></td>
</tr>
<tr>
<td>区(县)</td>
<td><input type="text" name="region.district"/></td>
</tr>
<tr>
<td>关键字</td>
<td><input type="text" name="addresskey"/></td>
</tr>
<tr>
<td colspan="2"><a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a> </td>
</tr>
</table>
</form>

023-将表单序列化为json对象的更多相关文章

  1. jQuery表单验证以及将表单序列化为json对象小练习

    jquery表单验证(非实时验证),同时,将表单序列化为json对象提交表单. <!DOCTYPE html> <html lang="en"> <h ...

  2. 将表单序列化为JSON对象

    将表单序列化为JSON对象的工具方法: $(function() { //工具方法,可以将指定的表单中的输入项目序列化为JSON数据 $.fn.serializeJson = function() { ...

  3. Jquery 将表单序列化为Json对象

    大家知道Jquery中有serialize方法,可以将表单序列化为一个“&”连接的字符串,但却没有提供序列化为Json的方法.不过,我们可以写一个插件实现. 我在网上看到有人用替换的方法,先用 ...

  4. jQuery form表单序列化为JSON对象!

    /* 来源于博客园http://www.cnblogs.com/nixil/archive/2010/12/08/1900745.html */ function paramString2obj(se ...

  5. js 表单序列化为json对象

    $.fn.serializeJson = function () { var o = {}; var a = this.serializeArray(); $.each(a, function () ...

  6. From 表单序列化为json对象(代码片段)

    $.fn.serializeJson=function(){ var serializeObj={}; var array=this.serializeArray(); $(array).each(f ...

  7. jquery扩展方法(表单数据格式化为json对象)

    1.jquery扩展方法(表单数据格式化为json对象) <script type="text/javascript"> // 将表单数据序列化为一个json对象,例如 ...

  8. form表单序列化为json格式数据

    在web开发过程中,经常遇到将form序列化不能格式的字符串提交到后台,下面就介绍怎样将form表单序列化为json字符串. 首先,是扩展的jquery序列化插件,依赖jquery.经测试,这段代码可 ...

  9. 拓展jQuery的serialize(),将form表单转化为json对象

    jQuery 的 serialize() 方法经常会报 Uncaught TypeError: JSON.serializeObject is not a function 的错误, 原装的方法真的一 ...

随机推荐

  1. 微信 oauth2 两次回调

    场景: logger.Info("f: " + wx.From); logger.Info("c: " + wx.Code); logger.Info(&quo ...

  2. 使用memcache 存储session

    session.save_handler = memcache //设置session的储存方式为memcache memcache.hash_strategy = "consistent& ...

  3. 《javascript 高级程序设计》 笔记2 8~章

    chapter 8 BOM(浏览器对象模型) window对象 表示浏览器的一个实例. 直接在window对象上定义的属性可以通过delete操作符删除,而全局变量不可以. 窗口关系及框架 位置操作 ...

  4. 计算机基础知识和tcp详解

    计算机基础知识 作为应用软件开发程序员是写应用软件的,而应用软件必须应用在操作系统之上,调用操作系统接口,由操作系统控制硬件 比如客户端软件想要基于网络发送一条消息给服务端软件,流程是: 1.客户端软 ...

  5. 20165219 《Java程序设计》实验三(敏捷开发与XP实践)实验报告

    20165219 <Java程序设计>实验三(敏捷开发与XP实践)实验报告 一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:王彦博 学号:20165219 成绩: 指导教 ...

  6. 开发效率神器 uTools - 偏前端和 UI

    本文首发于:Bougie's Blog - 效率神器 uTools 前言 今天组内公众号推荐了 Mac 上的效率神器 Alfred. 详情链接:效率神器 Alfred workflow 插件推荐 早上 ...

  7. 如何删除/mnt/cdrom?|如何删除只读文件系统(Read-only files ystem)? failed !bh ? 挂载光盘?挂载usb?

    root权限下 : 首先用umount /mnt/文件夹 卸载文件系统,必要时可以用umount -f(可能丢失数据)然后rm -rf /mnt/cdrom mkdir /mnt/cdrom moun ...

  8. 洛谷 P1579 哥德巴赫猜想(升级版)

    嗯... 这或许也算一道数论题吧... 题目链接:https://www.luogu.org/problemnew/show/P1579 这道题的说明好像只会扰乱人的思路....然后就是这道题的细节比 ...

  9. Nginx+certbot 实现泛域名的https证书

    yum -y install git git clone  https://github.com/certbot/certbot cd certbot ./certbot-auto certonly ...

  10. ionic4 refresh组件位置变更:Ignored attempt to cancel a touchmove event with cancelable=false

    io3 中 refresh组件位置可不定: io4 中 须置顶,否则报错,此外complete方法的调用位置改为target属性 参考:https://github.com/ionic-team/io ...