客户端发布响应中的 jQuery 错误 - POST HTTP/1.1" 400

Question

我不知道我的代码出了什么问题，而且我对 jQuery 也不是很擅长。 我正在尝试构建 HTML 表单来保存汽车数据。它基于这种形式：

HTML 源代码is here.

表单数据在按钮点击结束时发送回程序。

我使用基于this code 的级联制造商（代码中的proizvodjac） 和汽车模型 下拉列表升级了该表单。但它不起作用。

我不断收到 HTTP 400，这意味着我来自客户端的 POST 调用格式错误。

这是我的 jQuery 函数：

$(function () {

        var carsdata = {"alfaromeo":["mito","156","147","giulietta","159","166","146"],"audi":["a3","a4","a6","a5","80","a1","q3","a8","q5"],"bmw":["320","116","x3","316","318","118","530","x1","520","x5","525","330","120","323","serija 1"],"chevrolet":["spark","lacetti","captiva","aveo","cruze"],"citroen":["c4","c4 grand picasso","c3","c5","c4 picasso","xsara","berlingo","c2","xsara picasso","saxo","ds5","c1"],"fiat":["brava","bravo","panda","grande punto","stilo","punto","punto evo","doblo","500","tipo","uno","coupe"],"ford":["c-max","fiesta","focus","mondeo","fusion","ka","escort"],"honda":["civic","accord","cr-v"],"hyundai":["getz","i10","i20","atos","i30","coupe","elantra","accent","santa fe","ix35","tucson"],"kia":["rio","pro_cee'd","sportage","cee'd","pride","sorento"],"mazda":["3","2","323 f","626","6","cx-5","323","premacy","5"],"mercedes":["a-klasa","c-klasa","e-klasa","b-klasa","124"],"mercedes-benz":["e-klasa","clk-klasa","c-klasa","s-klasa","190","a-klasa","b-klasa","c t-model","ml-klasa","w 124","124"],"nissan":["qashqai","x-trail","note","primera","micra","juke","almera"],"opel":["corsa","astra","zafira","meriva","vectra","insignia","mokka","tigra","combo","astra gtc","kadett"],"peugeot":["308","207","206","306","106","307","208","406","508","407","partner","3008","405"],"renault":["thalia","clio","scenic","grand scenic","kangoo","captur","megane grandtour","megane","laguna","5","megane break","twingo","modus","kadjar","megane classic","espace","megane scenic","megane coupe","megane sedan"],"seat":["toledo","leon","ibiza","altea","cordoba"],"skoda":["fabia","octavia","120","superb","felicia","rapid"],"smart":["fortwo"],"toyota":["corolla","yaris","auris","avensis","rav 4","land cruiser"],"vw":["polo","golf v","golf iv","golf vii","passat","golf vi","jetta","passat variant","caddy","sharan","tiguan","golf variant","golf ii","vento","golfplus","golf iii","bora","touran","touareg","up!"]};

        var proizvodjac = $('<select id="proizvodjac"></select>');
        var model = $('<select id="model"> </select>');
        $.each(carsdata, function(item, key) {
            proizvodjac.append('<option >' + item + '</option>');
        });
        $("#containerProizModel").html(proizvodjac);
        $("#proizvodjac").on("change", function(e) {
            var item;
            var selected = $(this).val();
            if (selected === "alfaromeo") {
                item = carsdata[selected];
                } else {
                item = carsdata[selected];
            }
            $(model).html('');
            $.each(item, function(item, key) {
            model.append('<option >' + key + '</option>');
                });
            });

            $("#containerProizModel").append(model);

        $("button#predict").click(function(e){
            e.preventDefault();
            /*Get for variabes*/
            var kilometraza = $("#kilometraza").val(), godina_proizvodnje = $("#godina_proizvodnje").val();
            var snaga_motora = $("#snaga_motora").val(), vrsta_goriva = $("#vrsta_goriva").val();           

            /*create the JSON object*/
            var data = {"kilometraza":kilometraza, "godina_proizvodnje":godina_proizvodnje, "proizvodjac":proizvodjac, "model":model, "snaga_motora":snaga_motora, "vrsta_goriva":vrsta_goriva}
            /*send the ajax request*/
            $.ajax({
                method : "POST",
                url : window.location.href + 'api',
                data : $('form').serialize(),
                success : function(result){
                    var json_result = JSON.parse(result);
                    var price = json_result['price'];
                    swal('Predviđena cijena auta je '+price+' kn', '','success')
                },
                error : function(){
                    console.log("error")
                }
            })
        })
        })

注释和解释在代码中。

在服务器端：

服务器期待user_input 字典，它是根据 POST 请求返回的变量构建的。以下是 API 方法的外观：

@app.route('/api',methods=['POST'])
def get_delay():
    result=request.form
    proizvodjac = result['proizvodjac']
    model = result['model']
    godina_proizvodnje = result['godina_proizvodnje']
    snaga_motora = result['snaga_motora']
    vrsta_goriva = result['vrsta_goriva']
    kilometraza = result['kilometraza']


    user_input = {'proizvodjac':proizvodjac, 
                  'model':model,
                  'godina_proizvodnje':godina_proizvodnje,
                  'snaga_motora':snaga_motora, 
                  'vrsta_goriva':vrsta_goriva, 
                  'kilometraza':kilometraza
             }

    print(user_input)    
    a = input_to_one_hot(result)
    price_pred = gbr.predict([a])[0]
    price_pred = round(price_pred, 2)
    return json.dumps({'price':price_pred});

来自 Google Chrome 开发者控制台的错误：

指向：

编辑 1：

我不知道如何将 proizvodjac 和模型传递给 onClick 函数。看看断点会发生什么：

网络选项卡上的 XHR：

HTML 表单正在填充数据 OK 只有制造商和型号不传递给 onClick：

编辑 2： 越来越接近解决方案。我添加了：

var proizvodjac = $("#proizvodjac").val()
                var model = $("#model").val()

按照建议，现在所有变量都已成功传递！ 但是我仍然收到错误 400，因为最终的 ajax POST 调用被卡在某个地方..

编辑 3： 改变自

data : $('form').serialize()

到

data = data 

AJAX 方法接收一切正常：

还是不行。

Answer 1

这里有两个主要问题：

1) 您没有从两个字段中正确获取值。你需要添加

var proizvodjac = $("#proizvodjac").val()
var model = $("#model").val()

在$("button#predict").click(function(e){ 函数内部。

2) 您正在收集所有这些值并将它们放入您的 data 变量中......但是您没有对它做任何事情。关于要发送的数据，您的 AJAX 请求配置如下：

data : $('form').serialize()

serialize() 函数会自动从您的 <form> 标记内的字段中提取所有原始数据。在您的场景中，如果您想根据 data 对象发送一组自定义数据（而不仅仅是表单的原样内容），那么您只需将其更改为

data: data

所以它会在 POST 请求中发送来自该对象的信息。