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 相关文章推荐
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
Vue声明式渲染详解
May 17 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
jQuery实现消息弹出框效果
Dec 10 jQuery
ES11屡试不爽的新特性,你用上了几个
Oct 21 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如何编写易读的代码
2007/07/10 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
js常用正则表达式集锦
2019/05/17 Javascript
使用原生JS实现滚轮翻页效果的示例代码
2020/05/31 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
python多线程操作实例
2014/11/21 Python
python实现telnet客户端的方法
2015/04/15 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
澳大利亚时尚前卫设计师珠宝在线:Amber Sceats
2017/10/04 全球购物
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
医大实习自我鉴定
2013/12/07 职场文书
高校教师岗位职责
2014/03/18 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS