Node.js如何響應(yīng)Ajax的POST請求并且保存為JSON文件詳解

更新時間：2017年03月10日 10:38:22 作者：DecemberCafe

這篇文章主要介紹了關(guān)于Node.js是如何響應(yīng)Ajax的POST請求并且保存為JSON文件的相關(guān)資料，文中介紹的很詳細，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。

實現(xiàn)目的

使用D3.js開發(fā)的前端應(yīng)用，用戶與圖交互更改圖的內(nèi)容后，如何在下一次加載的顯示上一次最后交互的內(nèi)容？

本文提供通過后端的Node.js程序提供一種最小化方案，作為參考。

開發(fā)環(huán)境

后端：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 應(yīng)用程序框架：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表單提交的數(shù)據(jù)
app.use(bodyParser.urlencoded({extended: false}));

// bodyParser.json解析json數(shù)據(jù)格式的
app.use(bodyParser.json());

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

 // 對象轉(zhuǎn)換為字符串
 var str_json = JSON.stringify(req.body); 

 fs.writeFile('graph.json', str_json, 'utf8', function(){
  // 保存完成后的回調(diào)函數(shù)
  console.log("保存完成");
 });

});

app.listen(3000);

4、運行createServer.js

Node createServer.js

它會監(jiān)視 http://127.0.0.1:3000 發(fā)送來的請求。

如果請求來自：http://127.0.0.1:3000/saveJSON，它就會在服務(wù)器目錄下保存一個graph.json文件，文件的內(nèi)容是客戶端發(fā)送的post數(shù)據(jù)。

前端

// 創(chuàng)建一個對象
var person = {
 name: "lucy",
 age: 25
}

// 通過JQuery 發(fā)送POST請求，內(nèi)容是person
$.post("http://127.0.0.1:3000/saveJSON",person,function(data, status){
 alert("Data: " + data + "\nStatus: " + status);
});

在瀏覽器加載后，后端控制臺顯示“保存完成”，這是我們在writeFile里寫的回調(diào)函數(shù)。服務(wù)器目錄下會多一個graph.json，證明結(jié)果正確。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。謝謝大家對腳本之家的支持。

您可能感興趣的文章: