使用 javascript 生成请求名称时 Flask 中的错误请求错误答案

【问题标题】：Bad request error in Flask while request names generated with javascript使用 javascript 生成请求名称时 Flask 中的错误请求错误
【发布时间】：2019-10-11 14:16:36
【问题描述】：

我正在创建一个应用程序来计算给定年份和其他一些值的过境投影，首先我在 javascript 中创建了一个脚本，这取决于用户是否决定添加新类型的车辆 div是用唯一的 ID 和名称创建的，当然还有用户介绍的数据，为了显示我使用 ajax 的最终结果，当我尝试通过烧瓶访问数据时出现问题，我收到了来自名称的错误请求每辆车都喜欢如果它们不存在，但页面实际上正在显示它们（希望你理解我的英语和我的问题:)）

我尝试给出一个特定的名称 (a1)，然后尝试在烧瓶中取值，但我仍然无法使其工作。蟒蛇

@app.route("/pavimentos/calculoTransito" , methods=['POST'])
def calculoTransito():
    direc = float(request.form["direc"])
    zr = float(request.form["zr"])
    years  = float(request.form["years"])
    tc = float(request.form["direc"])
    vehicles = int(request.form["vehicles"])
    car1 = request.form.get("a1", None)
    if car1==None:
        print("No funciona")
    else:
        print("Funciona")

总是得到“没有功能”

Javascript

countClicks = 0
lista_vehiculos = []
function addVehicle(){
    countClicks += 1;

    //var automovil = document.getElementById("automovil").value
    var fd = document.getElementById("damage_factor").value
    var currentType = document.getElementById("vehicleType")

    if(currentType.value == 1){
        var icon = "<h2 class='pt-4'><i class='fas fa-car text-secondary'></i></h2>";
        var tipoVehiculo = "Automóvil";
    }

    ... More code for select the currentType ...    

    var vehicleStyle = "<div><input id=a" + countClicks + "name=a" + countClicks + "value=" + fd  + "></div>"

    lista_vehiculos.push(vehicleStyle)

    var vehicle = document.getElementById("vehiclesContainer").innerHTML += lista_vehiculos[countClicks-1]

    document.getElementById("vehicles").value = countClicks

}

AJAX 部分

$(document).ready(function(){
    $('form').on('submit', function(event){
        $.ajax({
            data:{
                direc: $('#direc').val(),
                zr: $('#zr').val(),
                years: $('#years').val(),
                tc: $('#growingRate').val(),
                vehicles: $('#vehicles').val(),
                car1: $('#a1').val()
            },
            type: 'POST',
            url: '/pavimentos/calculoTransito'
        })
        .done(function(data){
            if (data.resultado){
                $('#resultado').text(data.resultado).show()
            }
        })

        event.preventDefault();

    });
});

【问题讨论】：

除非我们从 JavaScript 方面看到一些东西，否则我们无能为力。此外，vehicles 未在您显示的代码中定义
我不明白。该 JS 不包含表单或任何与 Flask 通信的尝试。它应该澄清什么？
我回答了，然后意识到你对货物的崇拜太多了。 没有表格，那你为什么有$('form').on('submit', function(event){？
嗨！ @roganjosh，表单在另一个 html 文件中，并且有自己的烧瓶路线

标签： javascript python ajax flask

【解决方案1】：

您不是在提交表单，而是在发送 JSON。初始事件可能是提交表单，但您的 AJAX 使用 event.preventDefault() 并且最终不会提交传统的序列化表单。你不能在这里使用car1 = request.form.get("a1", None)。

首先，您应该更正您的 AJAX 以添加 contentType：

$(document).ready(function(){
    $('form').on('submit', function(event){
        $.ajax({
            data: JSON.stringify({
                direc: $('#direc').val(),
                zr: $('#zr').val(),
                years: $('#years').val(),
                tc: $('#growingRate').val(),
                vehicles: $('#vehicles').val(),
                car1: $('#a1').val()
            }),
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            url: '/pavimentos/calculoTransito'
        })
        .done(function(data){
            if (data.resultado){
                $('#resultado').text(data.resultado).show()
            }
        })

        event.preventDefault();

    });
});

然后您需要将 Flask 方法从 request.form 更改为 request.json。所以 Flask 端看起来像：

@app.route("/pavimentos/calculoTransito" , methods=['POST'])
def calculoTransito():
    req = request.json
    direc = float(req["direc"])
    zr = float(req["zr"])
    ...
    car1 = req.get("a1", None)
    if car1 is None: # None is a singleton, you shouldn't use == here
        print("No funciona")
    else:
        print("Funciona")

后期编辑

这是行不通的，因为 calculoTransito 实际上并没有 return 任何东西，所以 Flask 会单独抛出一个错误。您的视图函数实际上必须返回隐式 None 以外的其他内容。

【讨论】：