express后端和fetch前端的json数据传递
在使用express做后端,前端使用fetch API来请求后端时,一般都是用 JSON 数据进行通信的。 下面是一个简单的例子:
前端:
if (up) {
var passwordAgain = this.state.passwordAgain;
postObj.passwordAgain = passwordAgain;
console.log('注册', userName, password, passwordAgain)
fetch("/register", {
method: "POST",
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: `userName=${postObj.userName}&password=${postObj.password}&passwordAgain=${postObj.passwordAgain}`
}).then(function(res) {
return res.json();
}).then(function (data) {
console.log(data)
});
}
这里的前端使用的是react,前端使用fetch来请求,由于fetch支持promise方式,所以使用then进行链式调用。
发送json数据,这里使用的是es6的模板字符串进行拼接的。 这样发送的数据就符合表单的形式了。
第一步:接收到res并将其通过 return res.json() 转化为 json数据。
第二步:然后接着调用then就可以得到json数据了 。
后端:router.post('/register', function (req, res) {
console.log('注册传给后台的数据', req.body.userName, req.body.password, req.body.passwordAgain)
if (req.body.password == req.body.passwordAgain) {
var newUser = new User({
name: req.body.userName,
password: req.body.password
});
// 如果符合条件,就注册该用户,将数据保存在数据库。
newUser.save(function (err, user) {
if (err) {
console.log(err)
} else {
var response = {
code: 200,
message: "用户注册成功!"
}
res.json(response);
}
});
console.log('注册成功')
} else {
console.log('注册失败')
}
});
后端返回的很简单,就是直接在符合条件的情况下使用 res.json() 来传递json了,其中的值是一个对象,res.json() 会自动将至转化为json字符串并返回给前端。
参考文章: https://stackoverflow.com/questions/29775797/fetch-post-json-data
express后端和fetch前端的json数据传递的更多相关文章
- 前端传送JSON数据,报Required request body is missing
声明: 后端为Java,采用SSM框架 前端一个JSON.stringify()传来的json字符串,后端一般用@RequestBody标签来定义一个参数接收 但问题在于,当我使用get方式传JSON ...
- table显示json数据传递
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- SpringMVC之json数据传递
json是一种常见的传递格式,是一种键值对应的格式.并且数据大小会比较小,方便传递.所以在开发中经常会用到json. 首先看一下json的格式: {key1:value1,key2:value2} 每 ...
- Spring MVC Json数据传递
json是一种常见的传递格式,是一种键值对应的格式.并且数据大小会比较小,方便传递.所以在开发中经常会用到json. 首先看一下json的格式: {key1:value1,key2:value2} 每 ...
- Springboot第三篇:与前端fetch通信(关于前端传输json数据上传文件等等前后端的处理)
关于前端接口传递的方法,推荐按以下使用: 若要在服务器上创建资源,推荐使用POST方法 若要检索某个资源,推荐使用GET方法 若要更新资源,推荐使用PUT方法 若要删除某个资源,推荐使用DELETE方 ...
- 后端传给前端Long类型数据,导致精度丢失
1.前几天遇到了一个问题,后端向前端传递一个Long类型的数据,前端拿到的值不对. 2.当Long类型的数据大于17位时候,就会出现精度丢失的情况. 3.解决办法 我们采用的解决方案是将后端的Long ...
- web开发-服务器Controller到前端中的数据传递
一, ajax方式 (一)controller中 1. 定义AjaxResponse类 成员有: status , message, data. 其中 status是成功或失败状态, message ...
- jq之ajax以及json数据传递
<html> <head><meta http-equiv="Content-Type" content="text/html; chars ...
- JSON数据传递
Servlet端代码 try { while (rs.next()) { for(int i=0;i<60;i++){ Day[i]+=rs.getInt("Day"+(i+ ...
随机推荐
- [转]Newtonsoft.Json 序列化和反序列化 时间格式
本文转自:http://www.cnblogs.com/litian/p/3870975.html 1.JSON序列化 string JsonStr= JsonConvert.SerializeObj ...
- eclipse 高效快捷键大全
一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代码,使得整体的开发效率和质量得到提升. 1. ctrl+shift+r:打开资源 这可能 ...
- 1、ASP.NET Core2.0之Model、View、Controller
一.新建空项目 打开VS2017,新建→项目,选择如下: 点击,确定,弹出的界面选择如下: 选择空项目,因为选择其他的话会自动生成很多用不到的类,显得项目不够“清爽”,ASP.NET Core选择2. ...
- cesium编程入门(六)添加 3D Tiles,并调整位置,贴地
添加 3D Tiles,并调整位置 3D Tiles 是什么 3DTiles数据集是cesium小组AnalyticlGraphics与2016年3月定义的一种数据集,3DTiles数据集以分块.分级 ...
- swagger简单配置
第一步: 在nuget.org中查找Swashbuckle并下载 在nuget.org中查找Swagger.net.UI,并下载 第二步: 下载完之后,App_Start多了三个文件 Swagger. ...
- SHOI2013 扇形面积并
题目链接:戳我 补一张图 我们尝试把圆上的扇形转化成直线上的矩形--我们维护[1,2*m]的区间,那么每个能产生贡献的子区间的长度*第K大的半径的平方的总和就是answer了. 怎么转化呢?左端点为a ...
- Maven 项目中使用mybatis-generator生成代码
在使用Maven构建SSM项目时,使用mybatis-generator插件自动生成代码 一.目录结构 bean:用来存放生成的实体类 dao:用来存放生成的 *mapper.java文件 mappe ...
- 【OCP-12c】2019年CUUG OCP 071考试题库(80题)
80.View the exhibit and examine the structure in ORDERS and ORDER_ITEMS tables. You need to create a ...
- Wannafly挑战赛26题解
为啥混进了几道不是魔禁的题--出题人太不敬业了-- 传送门 \(A\) 御坂网络 为啥没有番外个体和整体意志呢 暴力模拟就好了,这个要是都打错我干脆滚回去学文化课算了 //minamoto #incl ...
- git 使用merge 对本地分支进行合并 并进行代码提交的流程
1.只有当将修改内容commit后 该修改才完全生效,进行merge前需要将两个分支修改的内容都进行commit 2.假设本地两个分支 用于开发的分支:dev 用于同步远程仓库的分支:mas ...