如何向Flask服务端发送携带两个参数的Fetch请求

你当前Javascript代码的核心问题是路径参数拼接时缺少分隔斜杠，导致无法匹配Flask定义的路由规则，按以下方式修正即可：

1. 适配现有Flask路由的Javascript代码 #

var symbol = document.getElementById("stock-symbol").value.trim();
var quantity = document.getElementById("quantity").value.trim();

fetch(`/game/market-simulator/make-sell-request/${symbol}/${quantity}`)
  .then(response => {
    if (!response.ok) throw new Error('请求异常');
    return response.text();
  })
  .then(res => {
    // 此处添加请求成功后的业务逻辑
    console.log('返回结果：', res);
  })
  .catch(err => {
    // 此处添加请求失败后的处理逻辑
    console.error('请求错误：', err);
  });

注意事项 #

• 对输入值调用trim()去除首尾空格，避免空格带入路径导致路由匹配失败
• 若quantity为非合法数字，Flask端会返回sell-page.html，前端可根据返回内容做页面跳转处理
• 路径参数不可包含/等特殊字符，如有特殊字符需求建议改用POST请求传递参数

2. 推荐优化方案：改用POST请求 #

卖股票属于数据修改操作，使用POST请求更符合HTTP语义，同时避免路径参数的长度限制和特殊字符问题，对应实现如下：

调整后的Flask代码（可选，原有路由可保留兼容） #

@app.route("/game/market-simulator/make-sell-request", methods=["POST"])
def sell_stocks():
    try:
        symbol = str(request.form.get("symbol"))
        quantity = int(request.form.get("quantity"))
    except ValueError:
        return render_template("sell-page.html")
    return symbol, quantity

对应Javascript代码 #

var symbol = document.getElementById("stock-symbol").value.trim();
var quantity = document.getElementById("quantity").value.trim();

const submitData = new FormData();
submitData.append('symbol', symbol);
submitData.append('quantity', quantity);

fetch('/game/market-simulator/make-sell-request', {
  method: 'POST',
  body: submitData
})
.then(response => response.text())
.then(res => {
  console.log('提交成功：', res);
})
.catch(err => {
  console.error('提交失败：', err);
});

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