jQuery向后台传入json格式数据的方法


Posted in Javascript onFebruary 13, 2015

本文实例讲述了jQuery向后台传入json格式数据的方法。分享给大家供大家参考。具体分析如下:

前后台数据交互一般都用json格式,后台可以直接将json对应转化为实体对象。方便以后的操作。jQuery向后台传数据的时候,我们会发现他会自动转化成查询字符串,不能真正传入一个json。而且用jquery对表单序列化的时候,返回的格式是一个数组,还需要作进一步转换。其实只要我们在ajax方法中配置一些东西就可以完成。代码如下:

<form id="ff"> 
  <input type="text" name="test1"/> 
  <input type="text" name="test2"/> 
  <input type="text" name="test3"/> 
  <input type="text" name="test4"/> 
  <input type="button" id="save" value="save"/> 
</form> 

$("#save").on("click", function () { 
 var params = $("#ff").serializeArray(); 
 var j = {}; 
 for (var item in params) { 
   j[params[item].name] = params[item].value; 
 } 

 $.ajax({ 
   url:'index.html', 
   data:JSON.stringify(j), 
   type:'post', 
   dataType:'json', 
   headers:{ 
 Accept:"application/json", 
 "Content-Type":"application/json" 
   }, 
   processData:false, 
   cache:false 
 }).done(function (data) { 
 }); 

});

如果在chrome看到如图的显示格式,说明传入到后台的就是json格式

jQuery向后台传入json格式数据的方法

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JQuery 解析多维的Json数据格式
Nov 02 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
JavaScript中的类与实例实现方法
Jan 23 Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 #Javascript
js实现拖拽效果
Feb 12 #Javascript
jQuery多个input求和的实现方法
Feb 12 #Javascript
JQuery实现防止退格键返回的方法
Feb 12 #Javascript
JavaScript自定义数组排序方法
Feb 12 #Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 #Javascript
后台获取ZTREE选中节点的方法
Feb 12 #Javascript
You might like
简体中文转换为繁体中文的PHP函数
2006/10/09 PHP
php 用sock技术发送邮件的函数
2007/07/21 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
PHP实现多图片上传类实例
2014/07/26 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
2019/08/16 Javascript
python 对字典按照value进行排序的方法
2019/05/09 Python
Django Celery异步任务队列的实现
2019/07/24 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
Python实现区域填充的示例代码
2021/02/03 Python
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
在校生钳工实习自我鉴定
2013/09/19 职场文书
班级寄语大全
2014/04/10 职场文书
实习评语大全
2014/04/26 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
优秀团支部申报材料
2014/12/26 职场文书
2015年酒店工作总结
2015/04/28 职场文书
货款欠条范本
2015/07/03 职场文书
小学美术教学反思
2016/02/17 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python
Java基于字符界面的简易收银台
2021/06/26 Java/Android