Node.js从0到1：实现前后台交互

上一篇文章中介绍了Node.js构建一个非常简单的Web应用后台Node.js从0到1如何构建一个Web服务器 – 每天进步一点点本文在上文的基础上实习如下功能1创建前台页面使用Ajax访问后台接口2后台返回json数据本文源代码web.zip链接:https://pan.baidu.com/s/1e2CtwVZRAIUFxQLgp9wlLw?pwd1idc1.JSON格式数据JSONJavaScript Object Notation是一种轻量级数据交换格式并非 Node.js 特有但 Node.js 内置了完善的 JSON 处理能力常用来存储配置、传输接口数据JSON 是字符串格式不是对象有严格语法规则和 JS 对象的关键区别特性JSON格式JS对象键名必须用双引号包裹可省略引号、单引号、双引号值类型仅支持字符串、数字、布尔、数组、对象、null支持所有 JS 类型函数、undefined、Symbol 等末尾逗号不允许有多余逗号部分环境允许本质字符串文本内存中的对象示例// 合法的 JSON 字符串注意双引号、无末尾逗号 const jsonStr{name:张三,age:25,isActive:true,hobbies:[跑步,看书],address:null};// JS 对象语法更灵活 const jsObj{name:张三, age:25, isActive: true, hobbies:[跑步,看书], address: null};JSON 数组是 JSON 格式中用于存储有序、同类型 或不同类型数据集合的结构语法和 JS 数组相似但有严格约束是接口返回列表数据、配置文件存储多个项的常用形式。JSON 数组必须满足以下规则区别于 JS 数组的关键特性JSON 数组要求JS 数组特点包裹符号必须用 [] 包裹同 JSON 数组元素分隔元素间用逗号分隔末尾不能有多余逗号部分环境允许末尾逗号元素类型仅支持 JSON 合法类型字符串双引号、数字、布尔、数组、对象、null支持所有 JS 类型函数、undefined、Symbol 等字符串元素必须用双引号包裹可单引号、双引号、反引号合法 JSON 数组示例字符串形式//1. 基础类型数组 const jsonArr1[10, 20, 30, 40];// 数字数组 const jsonArr2[张三, 李四, 王五];// 字符串数组双引号 const jsonArr3[true, false, null];// 布尔/null 数组 //2. 复杂类型数组对象数组接口返回列表的常见格式 const jsonArr4[{id:1,name:张三},{id:2,name:李四}];//3. 嵌套数组 const jsonArr5[[1,2],[3,4],[{key:value}]];1JSON.stringify()方法Web应用中向服务器发送的数据一般是JSON字符串我们可以使用JSON.stringify()方法将JavaScript对象转换为JSON字符串后进行发送语法格式为JSON.stringify(value,[,replace[,space]])返回包含JSON文本的字符串参数说明如下value需要转换的JavaScript对象通常为对象或数组必选参数。replace用于转换结果的函数或数组。space文本添加的缩进空格和换行符。2JSON.parse()方法Web应用中从服务器接收的数据一般也是JSON字符串可以使用JSON.parse()方法将JSON字符串转换为JavaScript对象进行逻辑处理语法为JSON.parse(text[,reviver])返回JSON字符串转换后的对象参数说明text需要转换的JSON字符串必选参数reviver一个用于转换结果的函数将对对象的每个成员调用此函数一个转换的例子//JSON.parse()JSON字符串 → JS对象/数组//1. 解析JSON对象字符串 const jsonObjStr{name:张三,age:25};const jsObjJSON.parse(jsonObjStr);console.log(JSON.parse解析对象, jsObj);// 输出可操作的JS对象 console.log(访问对象属性, jsObj.name);// 输出张三 //2. 解析JSON数组字符串 const jsonArrStr[{id:1},{id:2}];const jsArrJSON.parse(jsonArrStr);console.log(JSON.parse解析数组, jsArr);// 输出可操作的JS数组 console.log(访问数组元素, jsArr[0].id);// 输出1 //JSON.stringify()JS对象/数组 → JSON字符串//1. 序列化JS对象 const userObj{name:李四, age:30};const jsonStr1JSON.stringify(userObj);console.log(JSON.stringify序列化对象, jsonStr1);// 输出{name:李四,age:30}//2. 序列化JS数组 const listArr[{id:1},{id:2}];const jsonStr2JSON.stringify(listArr);console.log(JSON.stringify序列化数组, jsonStr2);// 输出[{id:1},{id:2}]运行结果JSON.parse解析对象{name:张三, age:25}访问对象属性 张三 JSON.parse解析数组[{id:1},{id:2}]访问数组元素1JSON.stringify序列化对象{name:李四,age:30}JSON.stringify序列化数组[{id:1},{id:2}]2.后台返回JSON格式我们在上一个项目的基础上新增一个文件文件名称为product.jsonjson文件内容参考如下{data:[{id:1001,name:纯棉短袖T恤,size:XL,price:89.9,time:2026-02-06 10:15:30},{id:1002,name:休闲牛仔裤,size:32码,price:159.99,time:2026-02-06 11:20:15},{id:1003,name:透气运动鞋,size:42码,price:299.0,time:2026-02-06 14:05:45}]}修改index.js文件让服务器返回json数据varhttprequire(http);varfsrequire(fs);//引入文件系统模块varserverhttp.createServer();//创建服务器对象server.on(request,function(request,response){//事件驱动编程response.setHeader(Access-Control-Allow-Origin,*);//设置允许跨域访问response.writeHead(200,{Content-Type:text/plain; charsetutf-8});//设置响应头防止中文乱码fs.readFile(./product.json,utf8,function(err,data){//读取文件内容if(err){response.writeHead(500,{Content-Type:text/plain; charsetutf-8});response.end(服务器错误);return;}response.end(data);});});//启动服务器监听3000端口server.listen(4000,function(){console.log(Server is listening on port 4000);});在控制台中输入node index.js运行node项目然后打开浏览器输入localhost:4000查看项目返回数据这样后台就返回一个json数据了。3.前台请求后台接口在项目中增加一个前台的html文件用来访问后台接口文件名index.htmlindex.html文件参考代码如下sectionclassproducth2Product List/h2ulidproduct-list/ulscriptsrchttps://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js/scriptscript$(function(){$.ajax({url:http://localhost:4000,//请求本地服务器method:GET,dataType:json,success:function(data){console.log(data);varproductList$(#product-list);for(vari0;idata.data.length;i){varproductdata.data[i];varlistItem$(li/li).text(product.name - $product.price);productList.append(listItem);}},error:function(){alert(Failed to load product data.);}});});/script/section4.效果在vscode中按F5,运行index.html文件也可以在文件管理器中双击运行index.html文件可以看到运行的结果。可以看到前端页面正常返回了数据并渲染到index.html页面中了。