Node.js服务端如何向Pug客户端回传AJAX请求的过滤后数据？

现有代码问题梳理 #

• AJAX请求参数格式错误：data: {form.serialize()} 写法不符合要求，form.serialize()本身已经是符合x-www-form-urlencoded格式的字符串，不需要额外包裹对象
• 未配置AJAX响应回调：服务端返回数据后，客户端没有对应的接收逻辑处理过滤后的数据，无法完成页面局部更新
• 服务端接口逻辑不匹配：当前接口直接返回渲染后的完整HTML页面，不符合AJAX请求需要JSON格式数据的要求，且未使用前端提交的选中值做数据过滤
• 未配置POST参数解析：如果项目未开启express的body解析，服务端无法正常获取前端提交的表单参数

分步修改代码 #

1. 修复Pug中的AJAX代码 #

script.
        $(function() {
            $('#form1').submit(function(event) {
                event.preventDefault();
                var form = $(this);
                $.ajax({
                    type: form.attr('method'),
                    url: form.attr('action'),
                    data: form.serialize(), // 修正参数格式
                    dataType: 'json', // 声明预期返回格式为JSON
                    success: function(filteredData) {
                        // 替换为实际的页面更新逻辑，以下为渲染下拉框的示例代码
                        const selectEl = $('#替换为你的下拉框实际ID');
                        selectEl.empty();
                        filteredData.forEach(item => {
                            // 替换value和展示文本为你实际的字段名
                            selectEl.append(`<option value="${item.value}">${item.label}</option>`)
                        })
                    },
                    error: function(err) {
                        console.log('请求异常', err)
                    }
                });
            });
        });

2. 确认express开启POST参数解析 #

在项目入口app.js中确保存在以下配置：

const express = require('express');
const app = express();
// 解析POST表单参数
app.use(express.urlencoded({ extended: true }));
// 如果需要接收JSON格式参数可额外添加以下配置
app.use(express.json());

3. 调整路由和Controller逻辑 #

如果原路由需要同时负责首次页面渲染和AJAX数据返回，可拆分请求类型：

路由文件修改

const express = require("express");
const main_controller = require("../../controllers/main-controller");
const data_model = require('../../models/data-model');

const router = express.Router();

// GET请求负责首次渲染页面，加载全量数据
router.get('/form', (req, res) => {
    data_model.find((err, data) => {
        res.render("./customer/form1", {
            pageTitle: "Form1",
            data: data
        });
    });
})
// POST请求负责处理AJAX提交，返回过滤后的JSON数据
router.post('/form', main_controller.Send);

module.exports = router;

Controller文件修改

const data_model = require('../../models/data-model');

exports.Send = (req, res, next) => {
    // 替换为你下拉框实际的name属性值，获取用户选中的参数
    const selectedVal = req.body.替换为下拉框实际name属性;
    // 替换为你实际的数据库过滤规则
    const filter = { 过滤字段名: selectedVal };
    data_model.find(filter, (err, filteredData) => {
        if (err) return res.status(500).json({msg: '数据查询失败'});
        // 直接返回JSON格式的过滤后数据，不渲染页面
        res.json(filteredData);
    });
};

内容的提问来源于stack exchange，提问作者user16802669