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

于由城南蝈蝈发布

上一篇文章中，介绍了Node.js构建一个非常简单的Web应用后台：

Node.js从0到1：如何构建一个Web服务器 – 每天进步一点点

本文在上文的基础上，实习如下功能：

（1）创建前台页面，使用Ajax访问后台接口

（2）后台返回json数据

本文源代码在文章末尾。

1.JSON格式数据

JSON（JavaScript 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"}]]';

（1）JSON.stringify()方法

Web应用中向服务器发送的数据一般是JSON字符串，我们可以使用JSON.stringify()方法将JavaScript对象转换为JSON字符串后进行发送，语法格式为：

JSON.stringify(value,[,replace[,space]])

返回：包含JSON文本的字符串

参数说明如下：

value：需要转换的JavaScript对象（通常为对象或数组），必选参数。

replace：用于转换结果的函数或数组。

space：文本添加的缩进，空格和换行符。

（2）JSON.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 jsObj = JSON.parse(jsonObjStr);
console.log('JSON.parse解析对象：', jsObj); // 输出可操作的JS对象
console.log('访问对象属性：', jsObj.name); // 输出：张三

// 2. 解析JSON数组字符串
const jsonArrStr = '[{"id":1},{"id":2}]';
const jsArr = JSON.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 jsonStr1 = JSON.stringify(userObj);
console.log('JSON.stringify序列化对象：', jsonStr1); // 输出：{"name":"李四","age":30}

// 2. 序列化JS数组
const listArr = [{ id: 1 }, { id: 2 }];
const jsonStr2 = JSON.stringify(listArr);
console.log('JSON.stringify序列化数组：', jsonStr2); // 输出：[{"id":1},{"id":2}]

运行结果：

JSON.parse解析对象： { name: '张三', age: 25 }
访问对象属性： 张三
JSON.parse解析数组： [ { id: 1 }, { id: 2 } ]
访问数组元素： 1
JSON.stringify序列化对象： {"name":"李四","age":30}
JSON.stringify序列化数组： [{"id":1},{"id":2}]
2.后台返回JSON格式

我们在上一个项目的基础上，新增一个文件

文件名称为product.json

json文件内容参考如下：

{
  "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数据

var http = require('http');
var fs = require('fs'); //引入文件系统模块
var server = http.createServer(); //创建服务器对象

server.on('request', function(request, response) { //事件驱动编程
    response.setHeader('Access-Control-Allow-Origin', '*'); //设置允许跨域访问
    response.writeHead(200, {'Content-Type': 'text/plain; charset=utf-8'}); //设置响应头，防止中文乱码
    fs.readFile('./product.json', 'utf8', function(err, data) { //读取文件内容  
        if (err) {
            response.writeHead(500, {'Content-Type': 'text/plain; charset=utf-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.html

index.html文件参考代码如下：

<section class="product">
    <h2>Product List</h2>
    <ul id="product-list"></ul>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        $(function() {
            $.ajax({
                url: 'http://localhost:4000', //请求本地服务器
                method: 'GET',
                dataType: 'json',
                success: function(data) {
                    console.log(data);
                    var productList = $('#product-list');
                    for (var i = 0; i < data.data.length; i++) {
                        var product = data.data[i];
                        var listItem = $('<li></li>').text(product.name + ' - $' + product.price);
                        productList.append(listItem);
                    }
                },
                error: function() {
                    alert('Failed to load product data.');
                }
            });
        });
    </script>

</section>
4.效果

在vscode中，按F5,运行index.html文件，也可以在文件管理器中双击运行index.html文件，可以看到运行的结果。

可以看到，前端页面正常返回了数据，并渲染到index.html页面中了。

本文源代码下载(访问密码: 7381)：

https://url47.ctfile.com/f/64055047-8671284230-a6c29c?p=7381

Post Views: 6

Related posts:

  1. Node.js从0到1：Windows如何下载Node.js
  2. Node.js从0到1：模块化编程—自定义模块的实现
  3. Node.js从0到1：自定义项目包、第三方模块引入
  4. Node.js从0到1：如何构建一个Web服务器
  5. angular中对json数据按照某一字段进行排序
  6. Ubuntu20.04如何安装Node.js
分类： 前端
标签：

相关文章

前端

Node.js从0到1：框架概述

Node.js 凭借异步非阻塞的特性，成为后端开发、中间层网关的热门选 阅读更多…

前端

Node.js从0到1：如何构建一个Web服务器

本文简单介绍一下如何使用node.js构建一个简单的web服务器。 构 阅读更多…

前端

Node.js从0到1：自定义项目包、第三方模块引入

上一篇文章中，简单介绍了如何自定义模块， 以及如何在其他模块中调用自定 阅读更多…