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 相关文章推荐
ie 调试javascript的工具
Apr 29 Javascript
浅谈javascript中的闭包
May 13 Javascript
js禁止页面刷新与后退的方法
Jun 08 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
老生常谈Bootstrap媒体对象
Jul 06 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
微信小程序 图片加载(本地,网路)实例详解
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统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
js下弹出窗口的变通
2007/04/18 Javascript
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
jQuery实现的简单在线计算器功能
2017/05/11 jQuery
详解vuejs之v-for列表渲染
2017/06/22 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
2017/12/11 Javascript
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
Python类的专用方法实例分析
2015/01/09 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
如何在python中执行另一个py文件
2020/04/30 Python
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
酒店个人培训自我鉴定
2013/12/11 职场文书
人事任命书怎么写
2014/06/05 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
遗嘱范文
2015/08/07 职场文书
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS