express 解析 ajax post 数据 body 为空对象

2024-05-06 09:15:58

问题描述：

前端使用 jquery 的 ajax 向后端发送 post 数据并携带参数，但是 express 解析的 body 为空对象。

代码：

使用 express 框架解析前端 post 的数据时


var express = require("express");
var bodyParser = require("body-parser");
var app = express();app.use(bodyParser.urlencoded({ extended: false }));app.post("/userName", (req, res) => {console.log(req.body);res.send("接受到了数据");
});

前端使用 jquery 的 ajax 进行传输数据

loginButton.addEventListener("click", (e) => {console.log("这里发送请求");$.ajax({type: "post",url: "/userName",contentType: "application/json",data: JSON.stringify({ userName: "xiaoming" }),}).done((msg) => {console.log("这里是返回内容", msg);});});

但是 express 解析到的前端 request 中的 body 为空对象。

原因是：

前端使用 jquery 的 ajax 进行 post 请求时，默认的 contentType 为：application/x-www-form-urlencoded

但是我在前端设置成了 application/json，即 ajax 在请求时会将用户携带的参数进行 json 形式的格式化。而后端解析 body： bodyParser.urlencoded({ extended: false }) 是解析 application/x-www-form-urlencoded 形式的参数的，因此后端解析出来的 body 为空对象。

解决方法：

方法一：
express 使用 app.use(bodyParser.json()); 替代 app.use(bodyParser.urlencoded({ extended: false })); 来解析 body

方法二：

前端设置contentType: application/x-www-form-urlencoded 并且删除data中的 JSON.stringify ，后端不改动还是 app.use(bodyParser.urlencoded({ extended: false })); 即可解析出 body。

contentType 中常见的选项有： application/x-www-form-urlencoded 、 application/json、text/xml 、 multipart/form-data 这些选项用于表明发送数据流的类型，后端根据类型进行对应的数据解析。

application/json 数据格式可以支持复杂情况，比如传输数据中对象中包含数组。
而如果用 appliacation/x-www-form-urlencoded 进行解析的话：会出现这种情况。

express 解析 ajax post 数据 body 为空对象相关推荐

java解析ajax的数据_java ajax 请求后获取 json 数据以及使用解析，解惑
写这个内容是因为...框架一直在用ajax ,,传输 json 但是一直不太明白为什么要这样配置, 以及前端ajax 怎么使用后台传输过来的数据. 首先是 spirng mvc 的配置 c ...
struts通过Ajax返回数据时，例如对象类型，没有执行Ajax的回调函数
<result type="json" name="success"> <param name=" ...
判断ajax获取是否为空,使用paginate方法分页无法判断获取的数据是否为空
问题:使用paginate方法分页无法判断获取的数据是否为空,在模板里面无法判断数据是否为空,比如在商品列表当中,当没有商品时无法判断生成的对象为空,所有就什么都不显示了. 解决办法: $newsDa ...
解析ajax返回的json数据
问题描述最近在开发一个音乐小网站的时候,因为返回的数据是多重数组对象(即数组里面嵌套数组),所以不知道如何解析api返回的json数据.返回的json数据格式如下: json总体结构如下: json ...
JQ中使用FormData+Ajax发送请求及使用express接收处理FormData数据
JQ中使用FormData+Ajax发送请求及使用express接收处理FormData数据最近写大创项目的时候,要做登录功能,考虑到之后还需要上传头像图片,因此决定使用FormData发送表单请求 ...
简单爬取微博评论详细解析，学习爬取ajax异步数据交换动态网页
爬取微博评论详细解析,学习爬取ajax异步数据交换动态网页 1.什么是ajax异步数据交换网页 2.用到的工具模块和简单解释 3.网页内容解析 4.代码实现及解释 1.什么是ajax异步数据交换网页 ...
Ajax异步数据抓取
1.简介 1 有时候我们在用requests抓取页面的时候,得到的结果可能和在浏览器中看到的不一样,在浏览 2 器中可以看到正常显示的页面数据,但是使用requests得到的结果并没有.这是因为req ...
简单解析Ajax中onreadystatechange事件的readyState属性和status属性
简单解析Ajax中的onreadystatechange 事件 onreadystatechange 事件当请求被发送到服务器时,我们需要执行一些基于响应的任务.每当 readyState 改变时, ...
vue使用ajax提交数据,vue使用ajax请求后台数据的方法
vue使用ajax请求后台数据的方法发布时间:2020-10-15 16:54:41 来源:亿速云阅读:108 作者:栢白这篇文章主要介绍了vue使用ajax请求后台数据的方法,具有一定借鉴价值 ...

最新文章

热门文章