jQuery使用ajax向node后台发送对象、数组参数
引言
- 最近在使用
jq
,做一些小demo,但是突然发现jq
使用ajax像后台(node)传递一个对象参数,但是后台却接收不了。
原因
- 后面了解到。
jq
会将一个对象解析成obj[key]: value
这样的形式传递给后台,数组解析成arr[]: []
,当传入更复杂的对象和数组对象或者数据再嵌套着对象或者数组
,jq
也会解析更深层的对象或者数组,使它们都成为一个个独立的键值对的关系,再传入后台,下面我们演示了几种情况。
简单的对象、数组
$.ajax({
type: 'POST',
url: 'http://localhost:3003/blogsz',
dataType: 'json',
data:{
arr: [1, 2, 3],
obj:{
name: '车神-黄杰',
age: 23
}
}
})
终端输出结果
复杂的对象、数组
$.ajax({
type: 'POST',
url: 'http://localhost:3003/blogsz',
dataType: 'json',
data:{
arr: [{gender: '男'}, ['敲代码', '打篮球'], 2, 3],
obj:{
name: '车神-黄杰',
age: 23,
love:['打豆豆', '爬山'],
class: {
item1: '16电子1',
item: '16电子2'
}
}
}
})
终端输出结果
解决
- 很明显,不管是对象还是数组
jq
都会把它解析成键值对的关系传递给后台,那么只要把对象或者数组变成键值对的关系,就可以不用解析了,这里用到了JSON.stringify()
方法把对象和数组解析成一个json字符串,在传递给后台。
使用
JSON.stringify()
方法把arr、obj
的值解析成json字符串,在后台在使用JSON.parse()
解析成js
对象和数组
$.ajax({
type: 'POST',
url: 'http://localhost:3003/blogsz',
dataType: 'json',
data:{
arr: JSON.stringify([{gender: '男'}, ['敲代码', '打篮球'], 2, 3]),
obj:JSON.stringify({
name: '车神-黄杰',
age: 23,
love:['打豆豆', '爬山'],
class: {
item1: '16电子1',
item: '16电子2'
}
})
}
})
后台解析代码
router.post('/blogsz', (req, res) =>{
const {arr, obj} = req.body
console.log('复杂的对象、数组')
console.log(req.body)
//使用 JSON.parse()解析json字符串
const newObj = JSON.parse(obj)
console.log('-----------------------------')
console.log("获取name值---->"+ newObj.name)
}
终端输出结果
jQuery使用ajax向node后台发送对象、数组参数的更多相关文章
- jQuery的ajax 方法提交多个对象数组问题 C# traditional $.param
当用$.ajax()向后台提交参数时,如果参数中数组的话一般在后台会用List<T>接收;但老是不成功如下面代码 "}]; "}]; function addUser( ...
- jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接 par:ID sel:下拉列表选择器 function BuildS ...
- ajax使用json数组------前端往后台发送json数组及后台往前端发送json数组
1.引子 Json是跨语言数据交流的中间语言,它以键/值对的方式表示数据,这种简单明了的数据类型能被大部分编程语言理解.它也因此是前后端数据交流的主要方式和基础. 2.前端往后台传输json数据 第一 ...
- SpringMVC接收对象数组参数进行封装
前台代码:注意.contentType : "application/json; charset=utf-8",必须要设置,只有这样SpringMVC才认识这个json数组参数 f ...
- springmvc 传递对象数组参数 property path is neither an array nor a List nor a Map
Spring MVC 3: Property referenced in indexed property path is neither an array nor a List nor a Map ...
- jquery用ajax方式从后台获取json数据,将内容填充到下拉列表。
从后台获取json数据,将内容填充到下拉列表. url:链接 par:ID sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { ...
- jquery 使用ajax调用c#后台方法
$.ajax({ type: "get", cache: false, ...
- jquery 如何动态绑定传递到后台上传组件参数
$("#upload_photo").uploadify({ 'auto' : false, 'method' : "post", 'height' : 20, ...
- ajax传数组到后台,后台springmvc接收数组参数
var ids= new Array(); $("input[class='detailCheck']:checked").each(function(i,k){ var ...
随机推荐
- 学习python库:elasticsearch-py
一.介绍 elasticsearch-py是一个官方提供的low-level的elasticsearch python客户端库.为什么说它是一个low-level的客户端库呢?因为它只是对elasti ...
- 分布式事务框架-seata初识
一.事务与分布式事务 事务,在数据库中指的是操作数据库的最小单位,往大了看,事务是应用程序中一系列严密的操作,所有操作必须成功完成,否则在每个操作中所作的所有更改都会被撤消. 那为什么会有分布式事务呢 ...
- rapidxml遍历子节点例子
<?xml version="1.0" encoding="utf-8"?> <luaword> <btn> <inf ...
- 电信NBIOT平台的CA证书上传-消息订阅回调地址检测503错误
在NBIOT北向开发过程中,遇到消息订阅回调地址检测503错误,经过论坛查询与文档查阅一直都没有解决问题,大多人都说是RESTful地址格式问题,但其实不是.最终发现是我们在电信平台创建应用时,上传C ...
- Linux学习之路--简介
1 Linux简介 UNIX与Linux发展史 Unix在1969年,美国贝尔实验室的肯汤普森在DEC PDP-7机器上开发出了UNIX系统.Linux出现于1991年,是由芬兰赫尔辛基大学学生李纳斯 ...
- # "可插拔式"组件设计,领略组件开发的奥秘
从一个 Confirm 组件开始,一步步写一个可插拔式的组件. 处理一个正常的支付流程(比如支付宝购买基金) 点击购买按钮 如果风险等级不匹配则:弹确认框(Confirm) 用户确认风险后:弹出支付方 ...
- Django 博客实现简单的全文搜索
作者:HelloGitHub-追梦人物 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 搜索是一个复杂的功能,但对于一些简单的搜索任务,我们可以使用 Django Mode ...
- JS单元测试及原理
单元测试 单元测试是指对软件中的最小可测试单元进行检查和验证,通过单元测试可以检测出潜在的bug,还可以快速反馈功能输出,验证代码是否达到预期,也可以保证代码重构的安全性. 有这样一个方法: let ...
- IDEA 2019.2及以下版本永久激活教程(亲测可用)
写在前面 由于最近jetbrains公司开始严厉打击盗版激活码,所以导致一大批激活码失效,我身边的小伙伴对于如此苦恼,但是由于考虑到正版费用还是比较高昂的前提下,所以鉴于此,遂将之前整理的jar包激活 ...
- 手动滑稽之golang-vmware-driver广告篇
本来在Windows 7 + Tiny Linux 4.19 + XFS + Vmware Workstation 15 (PRO) 下篇dockerの奥义之后的UEFI补完延迟了... 虽然用efi ...