快捷導(dǎo)航

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

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

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

實(shí)現(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，裝好后用顯示版本號(hào)確認(rèn)是否安裝好

node --version

2、新建一工程目錄（文件夾），安裝模塊。

npm install express
npm install body-parser

Express 是一種Node.js Web 應(yīng)用程序框架：http://expressjs.com/

bodyParser是用來解析http請(qǐng)求體：https://github.com/expressjs/body-parser

3、新建一個(gè)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){

 // 對(duì)象轉(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、運(yùn)行createServer.js

Node createServer.js

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

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

前端

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

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

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

總結(jié)

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

您可能感興趣的文章: