Node.js Express配合Axios调用外部API 表单提交无刷新获取股票数据如何解决

问题根因 #

你遇到的问题核心有三个：

1. 原生表单默认提交行为会触发页面跳转，走的是浏览器原生POST请求，直接加载返回的JSON内容，没有走你写的AJAX逻辑
2. 你当前的AJAX逻辑是页面加载时自动触发，没有绑定到表单提交事件，也没有传递用户输入的股票代码参数
3. 如果Express主文件没有配置请求体解析中间件，后台会拿不到req.body.symbol参数

修复步骤 #

步骤1：修改表单代码，阻止默认提交行为

给你的表单加ID，无需保留原有的action和method属性，示例：

<form id="stockQueryForm">
  <input type="text" name="symbol" id="symbolInput" placeholder="输入股票代码">
  <button type="submit">查询</button>
</form>

步骤2：修改前端JS逻辑，绑定表单提交事件

调整chartChartPage.js代码，绑定表单提交事件，阻止默认跳转，传递股票代码参数：

$(function(){
    // 绑定表单提交事件
    $('#stockQueryForm').on('submit', async function(e) {
        // 阻止表单默认跳转行为
        e.preventDefault();
        // 获取用户输入的股票代码
        const symbol = $('#symbolInput').val().trim();
        if (!symbol) return alert('请输入股票代码');
        // 调用查询方法
        await chartChartPage(symbol);
    })
});

const chartChartPage = async (symbol) => {
    await $.ajax({
        url: '/chart',
        type: 'POST',
        dataType: 'json',
        // 传递股票代码参数
        data: { symbol: symbol },
        success: (response) => {   
            if (response != null) {
                console.log('查询到的股票数据：', response);
            }
        }, 
        error: (err) => {
            console.log('请求错误：', err);
        }
    });
}

步骤3：确认Express配置了请求体解析中间件

检查你的Express启动主文件（一般是app.js/index.js），确保有以下配置，否则后台无法解析POST请求的参数：

// 解析JSON格式的请求体
app.use(express.json());
// 解析表单格式的请求体
app.use(express.urlencoded({ extended: true }));

可选确认：路由配置

你写的router.post('/', chartChartPage)是正确的，无需修改。

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