實現目的

創(chuàng)新互聯建站網站建設服務商，為中小企業(yè)提供成都網站設計、做網站、成都外貿網站建設公司服務，網站設計，綿陽服務器托管等一站式綜合服務型公司，專業(yè)打造企業(yè)形象網站，讓您在眾多競爭對手中脫穎而出創(chuàng)新互聯建站。

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

本文提供通過后端的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 應用程序框架：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

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

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

前端

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

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

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

總結

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

當前名稱：Node.js如何響應Ajax的POST請求并且保存為JSON文件詳解
當前URL：http://chinadenli.net/article8/jhggip.html

成都網站建設公司_創(chuàng)新互聯，為您提供網站設計、用戶體驗、網站導航、做網站、全網營銷推廣、面包屑導航

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯