Node.js如何响应Ajax的POST请求并且保存为JSON文件详解

发布时间 - 2026-01-11 00:06:22    点击率:

实现目的

使用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,证明结果正确。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。谢谢大家对的支持。


# nodejs  # post请求  # post  # json  # ajax  # nodejs处理http请求实例详解之get和post  # Node.js中的HTTP Server对象与GET、POST请求  # nodejs 使用http进行post或get请求的实例(携带cookie)  # nodejs使用http模块发送get与post请求的方法示例  # nodejs实现HTTPS发起POST请求  # node.js+postman实现模拟HTTP服务器与客户端交互  # 从零开始学习Node.js系列教程一:http get和post用法分析  # 轻松创建nodejs服务器(10):处理POST请求  # nodejs之get/post请求的几种方式小结  # NodeJS收发GET和POST请求的示例代码  # Node发出HTTP POST请求的方法实例小结  # 后端  # 回调  # 装好  # 这是  # 加载  # 是一种  # 目录下  # 会在  # 这篇文章  # 谢谢大家  # 它就  # 它会  # 表单  # 转换为  # 创建一个  # 新建一个  # 应用程序  # 客户端  # 数据格式  # 完成后 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 如何用低价快速搭建高质量网站?  iOS中将个别页面强制横屏其他页面竖屏  如何基于PHP生成高效IDC网络公司建站源码?  香港服务器网站卡顿?如何解决网络延迟与负载问题?  html5怎么画眼睛_HT5用Canvas或SVG画眼球瞳孔加JS控制动态【绘制】  JavaScript如何操作视频_媒体API怎么控制播放  Win11应用商店下载慢怎么办 Win11更改DNS提速下载【修复】  再谈Python中的字符串与字符编码(推荐)  小米17系列还有一款新机?主打6.9英寸大直屏和旗舰级影像  智能起名网站制作软件有哪些,制作logo的软件?  如何生成腾讯云建站专用兑换码?  潮流网站制作头像软件下载,适合母子的网名有哪些?  Python函数文档自动校验_规范解析【教程】  ChatGPT回答中断怎么办 引导AI继续输出完整内容的方法  如何实现建站之星域名转发设置?  如何在服务器上配置二级域名建站?  Microsoft Edge如何解决网页加载问题 Edge浏览器加载问题修复  ChatGPT怎么生成Excel公式_ChatGPT公式生成方法【指南】  Laravel如何处理JSON字段的查询和更新_Laravel JSON列操作与查询技巧  谷歌浏览器如何更改浏览器主题 Google Chrome主题设置教程  如何用免费手机建站系统零基础打造专业网站?  Win11搜索栏无法输入_解决Win11开始菜单搜索没反应问题【技巧】  昵图网官网入口 昵图网素材平台官方入口  Laravel如何实现模型的全局作用域?(Global Scope示例)  深圳防火门网站制作公司,深圳中天明防火门怎么编码?  如何在万网自助建站中设置域名及备案?  Swift开发中switch语句值绑定模式  Laravel怎么实现验证码功能_Laravel集成验证码库防止机器人注册  VIVO手机上del键无效OnKeyListener不响应的原因及解决方法  Laravel中Service Container是做什么的_Laravel服务容器与依赖注入核心概念解析  电商网站制作价格怎么算,网上拍卖流程以及规则?  网站制作报价单模板图片,小松挖机官方网站报价?  Laravel如何配置和使用缓存?(Redis代码示例)  如何在橙子建站中快速调整背景颜色?  JavaScript中如何操作剪贴板_ClipboardAPI怎么用  laravel怎么配置Redis作为缓存驱动_laravel Redis缓存配置教程  Laravel如何处理表单验证?(Requests代码示例)  电视网站制作tvbox接口,云海电视怎样自定义添加电视源?  香港代理服务器配置指南:高匿IP选择、跨境加速与SEO优化技巧  Windows10电脑怎么设置虚拟光驱_Win10右键装载ISO镜像文件  如何在腾讯云服务器快速搭建个人网站?  高配服务器限时抢购:企业级配置与回收服务一站式优惠方案  Android okhttputils现在进度显示实例代码  Laravel如何实现RSS订阅源功能_Laravel动态生成网站XML格式订阅内容【教程】  javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】  HTML5空格和nbsp有啥关系_nbsp的作用及使用场景【说明】  北京网站制作的公司有哪些,北京白云观官方网站?  Laravel怎么实现软删除SoftDeletes_Laravel模型回收站功能与数据恢复【步骤】  如何在香港免费服务器上快速搭建网站?  Edge浏览器提示“由你的组织管理”怎么解决_去除浏览器托管提示【修复】