jQuery实现form表单序列化转换为json对象功能示例
<!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>
运行结果：
jQuery实现form表单序列化转换为json对象功能示例的更多相关文章
- jquery将form表单序列化常json
var formData = {};$.each(form.serializeArray(),function(i, item){ formData[item.name] = item.value;} ...
- 拓展jQuery的serialize()，将form表单转化为json对象
jQuery 的 serialize() 方法经常会报 Uncaught TypeError: JSON.serializeObject is not a function 的错误, 原装的方法真的一 ...
- jQuery form表单序列化为JSON对象！
/* 来源于博客园http://www.cnblogs.com/nixil/archive/2010/12/08/1900745.html */ function paramString2obj(se ...
- Jquery如何序列化form表单数据为JSON对象 C# ADO.NET中设置Like模糊查询的参数 从客户端出现小于等于公式符号引发检测到有潜在危险的Request.Form 值 jquery调用iframe里面的方法 Js根据Ip地址自动判断是哪个城市 【我们一起写框架】MVVM的WPF框架（三）—数据控件 设计模式之简单工厂模式（C#语言描述）
jquery提供的serialize方法能够实现. $("#searchForm").serialize();但是,观察输出的信息,发现serialize()方法做的是将表单中的数 ...
- Jquery如何序列化form表单数据为JSON对象
jquery提供的serialize方法能够实现. $("#searchForm").serialize();但是,观察输出的信息,发现serialize()方法做的是将表单中的数 ...
- 序列化form表单内容为json对象
SourceCode: ; (function ($) { $.fn.extend({ serializeJson: function () { var json = {}; $(this.seria ...
- 【jQuery】form表单元素序列化为json对象
序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head&g ...
- jQuery将form表单的数据封装成json对象
/** * 自动将form表单封装成json对象 */ $.fn.serializeObject = function() { var o = {}; var a = this.serializeAr ...
- Jquery表单序列化和json操作
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Activiti--Activity数据库
23张表 ACT_RE_资源库流程规划表 act_re_deployment 部署信息表 act_re_model 流程设计模型部署表 act_re_procdef 流程定义数据表 ACT_RU_运行 ...
- vue中把props中的值赋值给data
vue中把props中的值赋值给data 2018年12月26日 14:37:11 木豆mudou 阅读数 3497 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上 ...
- 异步时钟FIFO（一）
FIFO一般用于通过两个不同时钟域的数据传输.一个水池有进和出两个通道,由于进出口水流不一致所以需要水池加以缓冲.堆栈也是相当于水池的作用.如果输入端不是连续的数据流,可以通过堆栈来调节使数据以稳定的 ...
- House Lawn Kattis - houselawn
Problem You have just bought a new house, and it has a huge, beautiful lawn. A lawn that needs cutti ...
- C语言学习笔记3-运算符和表达式
本系列文章由jadeshu编写,转载请注明出处.http://blog.csdn.net/jadeshu/article/details/50752023 作者:jadeshu 邮箱: jades ...
- MySQL数据分析－（10）SQL基础操作之表操作
大家好,我是jacky,很高兴跟大家继续分享MySQL数据分析实战课程,前面我们学习了库层面增删改查的SQL语句,这次课jacky将给大家介绍表层面的增删改查, (一)本课时的学习逻辑 表层面的增删改 ...
- MongoDB-python操作mongodb
安装 pip install pymongo 连接mongodb from pymongo import MongoClient my_client = MongoClient("127.0 ...
- scrapy框架之items项目
Items 主要目标是从非结构化来源(通常是网页)提取结构化数据.Scrapy爬虫可以将提取的数据作为Python语句返回.虽然方便和熟悉,Python dicts缺乏结构:很容易在字段名称中输入错误 ...
- 浅谈 es6 箭头函数， reduce函数介绍
今天来谈一下箭头函数, es6的新特性 首先我们来看下箭头函数长什么样子, let result = (param1, param2) => param1+param2; 上述代码 按照以前书写 ...
- Win10 更新出现问题，建议完全重置系统
语言包引起问题. 文章来源:刘俊涛的博客 欢迎关注,有问题一起学习欢迎留言.评论