在使用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数据传递的更多相关文章

  1. 前端传送JSON数据,报Required request body is missing

    声明: 后端为Java,采用SSM框架 前端一个JSON.stringify()传来的json字符串,后端一般用@RequestBody标签来定义一个参数接收 但问题在于,当我使用get方式传JSON ...

  2. table显示json数据传递

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. SpringMVC之json数据传递

    json是一种常见的传递格式,是一种键值对应的格式.并且数据大小会比较小,方便传递.所以在开发中经常会用到json. 首先看一下json的格式: {key1:value1,key2:value2} 每 ...

  4. Spring MVC Json数据传递

    json是一种常见的传递格式,是一种键值对应的格式.并且数据大小会比较小,方便传递.所以在开发中经常会用到json. 首先看一下json的格式: {key1:value1,key2:value2} 每 ...

  5. Springboot第三篇:与前端fetch通信(关于前端传输json数据上传文件等等前后端的处理)

    关于前端接口传递的方法,推荐按以下使用: 若要在服务器上创建资源,推荐使用POST方法 若要检索某个资源,推荐使用GET方法 若要更新资源,推荐使用PUT方法 若要删除某个资源,推荐使用DELETE方 ...

  6. 后端传给前端Long类型数据,导致精度丢失

    1.前几天遇到了一个问题,后端向前端传递一个Long类型的数据,前端拿到的值不对. 2.当Long类型的数据大于17位时候,就会出现精度丢失的情况. 3.解决办法 我们采用的解决方案是将后端的Long ...

  7. web开发-服务器Controller到前端中的数据传递

    一, ajax方式 (一)controller中 1. 定义AjaxResponse类 成员有: status , message, data.  其中 status是成功或失败状态, message ...

  8. jq之ajax以及json数据传递

    <html> <head><meta http-equiv="Content-Type" content="text/html; chars ...

  9. JSON数据传递

    Servlet端代码 try { while (rs.next()) { for(int i=0;i<60;i++){ Day[i]+=rs.getInt("Day"+(i+ ...

随机推荐

  1. VC 调试技术与异常(错误)处理 VC 调试技术与异常(错误)处理

    调试技术与异常(错误)处理 (1)   转载自 52PK游戏论坛 跟踪与中间过程输出 也许一个开发人员一半以上的时间都是在面对错误,所以好的调试/查错方法(工具)会减轻我们工作的负担,也可以让枯燥的D ...

  2. 自我简介与Github的注册和使用

    我叫陈鑫,学号1413042059,来自网络工程142班.喜欢打乒乓球,玩策略类游戏,团队竞技.                                                     ...

  3. Web 协议 HTTP1.0 HTTP1.1 SPDY HTTP2.0

    Web 协议 HTTP1.0 HTTP1.1 SPDY HTTP2.0 HTTP1.0 VS HTTP1.1 长连接HTTP 1.0需要使用keep-alive参数来告知服务器端要建立一个长连接,而H ...

  4. vim出现“E212: Can't open file for writing”的处理办法

    在使用vim 对文件或配置进行编辑的时候,在保存时发现当前用户没有写权限.又不想放弃当前编辑的内容,怎么办呢? 来自stackoverflow “For some reason the file yo ...

  5. expect+scp传输文件发现文件丢失

    背景 使用expect+scp去跨机器传输文件,(别问我为什么,因为公司的测试机器都是通过堡垒机的,无法绕开堡垒机,只能暂时使用这个方法了),结果发现从A传递到B的tar.gz文件大小不一致了的,当时 ...

  6. 异步和等待(async和await)

    在.Net 4.5中,通过async和await两个关键字,引入了一种新的基于任务的异步编程模型(TAP).在这种方式下,可以通过类似同步方式编写异步代码,极大简化了异步编程模型.如下式一个简单的实例 ...

  7. leetcode 回文数

    判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 示例 1: 输入: 121 输出: true 示例 2: 输入: -121 输出: false 解释: 从左向 ...

  8. java线程池(一)

    自JDK5之后,Java推出了一个并发包,java.util.concurrent,在Java开发中,我们接触到了好多池的技术,String类的对象池.Integer的共享池.连接数据库的连接池.St ...

  9. console使用技巧

    http://heikezhi.com/yuanyi/10%E4%B8%AAchrome%20console%E5%AE%9E%E7%94%A8%E5%B0%8F%E6%8A%80%E5%B7%A7 ...

  10. IT项目中使用 json格式数据 保存项目配置信息, 在配置文件再读取json文件的内容进行赋值

    json格式小巧玲珑,适合做配置文件,特别是大型项目中, 可以将配置信息分类保存到不同的json文件中, 然后再在配置文件中读取配置文件的数据进行赋值, 这里以python为例进行说明: 假设在you ...