Node.js如何响应Ajax的POST请求并且保存为JSON文件详解


Posted in Javascript onMarch 10, 2017

实现目的

使用D3.js开发的前端应用,用户与图交互更改图的内容后,如何在下一次加载的显示上一次最后交互的内容?

本文提供通过后端的Node.js程序提供一种最小化方案,作为参考。

开发环境

  • 后端:Node.js
  • Node.js模块:Express、body-parser、fs
  • 前端:JQuery

后端

1、安装nodejs,装好后用显示版本号确认是否安装好

node --version

2、新建一工程目录(文件夹),安装模块。

npm install express
npm install body-parser

Express 是一种Node.js Web 应用程序框架:http://expressjs.com/

bodyParser是用来解析http请求体:https://github.com/expressjs/body-parser

3、新建一个createServer.js

var express = require('express');
var bodyParser = require('body-parser');
var fs = require('fs');

var app = express();

// bodyParser.urlencoded解析form表单提交的数据
app.use(bodyParser.urlencoded({extended: false}));

// bodyParser.json解析json数据格式的
app.use(bodyParser.json());

app.post('/saveJSON',function(req, res){

 // 对象转换为字符串
 var str_json = JSON.stringify(req.body); 

 fs.writeFile('graph.json', str_json, 'utf8', function(){
  // 保存完成后的回调函数
  console.log("保存完成");
 });

});

app.listen(3000);

4、运行createServer.js

Node createServer.js

它会监视 http://127.0.0.1:3000 发送来的请求。

如果请求来自:http://127.0.0.1:3000/saveJSON,它就会在服务器目录下保存一个graph.json文件,文件的内容是客户端发送的post数据。

前端

// 创建一个对象
var person = {
 name: "lucy",
 age: 25
}

// 通过JQuery 发送POST请求,内容是person
$.post("http://127.0.0.1:3000/saveJSON",person,function(data, status){
 alert("Data: " + data + "\nStatus: " + status);
});

在浏览器加载后,后端控制台显示“保存完成”,这是我们在writeFile里写的回调函数。服务器目录下会多一个graph.json,证明结果正确。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
对new functionName()定义一个函数的理解
May 22 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
jQuery插件开发汇总
May 15 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
CSS+jQuery实现简单的折叠菜单
Dec 20 Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 Javascript
JavaScript实现滑动导航栏效果
Aug 30 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
js使用Promise实现简单的Ajax缓存
Nov 14 Javascript
VUE实现移动端列表筛选功能
Aug 23 Javascript
Node.js API详解之 console模块用法详解
May 12 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 #Javascript
微信小程序 页面传值详解
Mar 10 #Javascript
详解Vue生命周期的示例
Mar 10 #Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 #Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 #Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 #Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 #Javascript
You might like
PHP仿微信发红包领红包效果
2016/10/30 PHP
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
python 简单的绘图工具turtle使用详解
2017/06/21 Python
Python 模拟登陆的两种实现方法
2017/08/10 Python
python使用正则表达式替换匹配成功的组
2017/11/17 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
python贪吃蛇游戏代码
2020/04/18 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
python 读取二进制 显示图片案例
2020/04/24 Python
python实现图像外边界跟踪操作
2020/07/13 Python
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
函授大专自我鉴定
2013/11/01 职场文书
市场营销专业毕业生自荐信
2013/11/02 职场文书
同事吵架检讨书
2014/02/05 职场文书
校庆接待方案
2014/03/18 职场文书
2014年度安全工作总结
2014/12/04 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
校本培训个人总结
2015/02/28 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
靠谱的活动总结
2019/04/16 职场文书
导游词之介休绵山
2019/12/31 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers