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 相关文章推荐
DOM Scripting中的图片切换[兼容Firefox]
Jun 12 Javascript
jquery获取table中的某行全部td的内容方法
Mar 08 Javascript
浅谈Javascript 执行顺序
Dec 18 Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
get  post jsonp三种数据交互形式实例详解
Aug 25 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 Javascript
浅谈react路由传参的几种方式
Mar 23 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的ob_start来生成静态页面的方法分析
2011/03/09 PHP
PHP获取url的函数代码
2011/08/02 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
js函数的延迟加载实现代码
2012/10/11 Javascript
Eval and new funciton not the same thing
2012/12/27 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
jquery常用操作小结
2014/07/21 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
详解redux异步操作实践
2018/08/15 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
Python装饰器decorator用法实例
2014/11/10 Python
Python新手入门最容易犯的错误总结
2017/04/24 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
Keras自定义IOU方式
2020/06/10 Python
施华洛世奇中国官网:SWAROVSKI中国
2020/06/16 全球购物
毕业生物理教师求职信
2013/10/17 职场文书
财务会计专业毕业生自荐信
2013/10/19 职场文书
船舶专业个人求职信范文
2014/01/02 职场文书
会计专业自荐信
2014/06/03 职场文书
授权收款委托书范本
2014/10/10 职场文书
单位委托书
2014/10/15 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
银行岗位培训心得体会
2016/01/09 职场文书
Python绘制分类图的方法
2021/04/20 Python