Flask路由接收不到Ajax请求问题已解决

问题根因 #

• 核心错误为前后端参数名不匹配：
  AJAX请求中发送的参数名为share、quantity，但Flask后端通过request.form.get()获取参数时，使用的键名是symbol、shares，二者完全不对应，因此无法正常取到参数值。
• 次要隐患：下拉框默认选中的是空值禁用选项，若用户未手动选择股票，提交的股票参数也会为空。

修复方案 #

任选一种即可，推荐第一种，保持参数名和表单name属性对齐，后续维护更方便：

方案1：修改AJAX请求的参数名 #

将AJAX的data部分参数键修改为和表单name属性、后端取值键名一致：

$.ajax({
    data : {
        symbol : $('#stockInput').val(), // 将原share改为symbol
        shares : $('#sharesInput').val() // 将原quantity改为shares
    },
    type : 'POST',
    url : '/sell'
})

方案2：修改Flask后端的取值键名 #

将后端POST逻辑中的取值键修改为和AJAX传参键名一致：

if request.method == 'POST':
    # Lookup stock and save it's info
    share = lookup(request.form.get("share")) # 将原symbol改为share
    # Get # of shares
    quantity = int(request.form.get("quantity")) # 将原shares改为quantity

额外优化建议 #

可在提交前增加前端参数校验，避免空参数或非法值提交到后端：

$('form').on('submit', function(event) {
    const stockVal = $('#stockInput').val()
    const sharesVal = $('#sharesInput').val()
    if (!stockVal || !sharesVal || parseInt(sharesVal) < 1) {
        alert('请选择股票并填写合法的持股数量')
        event.preventDefault()
        return
    }
    // 原有AJAX逻辑
})

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