Javascript 如何在Flask网页中正确显示Python字典数据？

我在训练KERAS的CNN模特。我想在Flask网页中显示模型的预测结果。问题是我想从本地python程序返回一个字典数据并在Flask网页中显示数据，但我无法正确解析JSON并按行显示项目。因为我对JS知之甚少：（

我希望网页显示像这样

笔迹最相似的5个书写人: 

top5_index[0] top5_prob[0]

top5_index[1] top5_prob[1]

top5_index[2] top5_prob[2]

top5_index[3]:top5_prob[3]

top5_index[4] top5_prob[4]

但是网页上什么也没有显示…（我猜JS部分代码出错了）

这是我的密码，但它不起作用

蟒蛇

@app.route（'/predict'，methods=['GET'，POST']）
def upload（）：
如果request.method==“POST”：
#从post请求获取文件
f=请求.files['file']
#将文件保存到./uploads
basepath=os.path.dirname（_文件__）
文件路径=os.path.join(
基本路径，“上载”，安全文件名（f.filename））
f、 保存（文件路径）
#预测
top5\u索引，top5\u prob=模型预测（文件路径，模型）
wr_dict={top5_index[0]：top5_prob[0]，top5_index[1]：top5_prob[1]，
top5_索引[2]：top5_prob[2]，top5_索引[3]：top5_prob[3]，
top5_索引[4]：top5_prob[4]}
返回json.dumps（wr_dict）
一无所获

JS

如何更改JS部件代码以正确的格式显示字典数据

---

任何帮助都将不胜感激。

您应该使用

flask.jsonify

进行回复：

导入烧瓶
返回烧瓶。jsonify（**wr_dict）

根据文档，它的功能比转储的功能稍多一些：

此函数包装dumps（），以添加一些增强功能，从而简化操作。它将JSON输出转换为带有application/JSON mimetype的响应对象

在JS端，您应该将数据字符串化，而不是解析它（dict->string），然后解析响应（string->dict）：

谢谢@AdamGold:）

我试过你的代码，但是网页上没有显示数据。我检查了浏览器的控制台，但它没有报告错误，代码成功：函数（数据）{}未执行

我猜它也无法解析数据（通过flask.jsonify返回）。今天，我找到了一种正确解析JSONstring数据并将其显示在web页面中的方法。尽管如此，我还是在python文件中使用了json.dumps，并且字典稍微修改了一下。在我的文件中，我更改代码如下：

        ...
        # Make prediction
        top5_index, top5_prob = model_predict(file_path, model)
        wr_dict = {"index1":top5_index[0], "prob1":top5_prob[0],
                   "index2":top5_index[1], "prob2":top5_prob[1],
                   "index3":top5_index[2], "prob3":top5_prob[2],
                   "index4":top5_index[3], "prob4":top5_prob[3],
                   "index5":top5_index[4], "prob5":top5_prob[4]}

        return json.dumps(wr_dict)
    return None

多谢各位。我会学到更多的JS知识

// Make prediction by calling api /predict/
$.ajax({
    type: 'POST',
    url: '/predict',
    data: JSON.stringify(form_data), // CHANGED HERE
    contentType: 'application/json;charset=utf-8',
    dataType: 'json',
    cache: false,
    processData: false,
    async: true,
    success: function(data) {
        data = JSON.parse(data); // CHANGED HERE
        // Get and display the result
        $('.loader').hide();
        $('#result').fadeIn(600);
        $('#result').text(' 笔迹最相似的5个书写人: ');
        $('#value1').text(data[0]);
        $('#value2').text(data[1]);
        $('#value3').text(data[2]);
        $('#value4').text(data[3]);
        $('#value5').text(data[4]);
        console.log('Success!');
    },
});

        ...
        # Make prediction
        top5_index, top5_prob = model_predict(file_path, model)
        wr_dict = {"index1":top5_index[0], "prob1":top5_prob[0],
                   "index2":top5_index[1], "prob2":top5_prob[1],
                   "index3":top5_index[2], "prob3":top5_prob[2],
                   "index4":top5_index[3], "prob4":top5_prob[3],
                   "index5":top5_index[4], "prob5":top5_prob[4]}

        return json.dumps(wr_dict)
    return None

    // Predict
    $('#btn-predict').click(function () {
        var form_data = new FormData($('#upload-file')[0]);
        // Show loading animation
        $(this).hide();
        $('.loader').show();

        // Make prediction by calling api /predict
        $.ajax({
            type: 'POST',
            url: '/predict',
            data: form_data,
            contentType: false,
            cache: false,
            processData: false,
            async: true,
            success: function (data) {
                var data_obj = $.parseJSON(data);
                $('.loader').hide();
                $('#result').fadeIn(600);
                $('#result').text('笔迹最相似的5个书写人:');
                $('#value1').text('编号及概率:'+data_obj["index1"]+'------'+data_obj["prob1"]);
                $('#value2').text('编号及概率:'+data_obj["index2"]+'------'+data_obj["prob2"]);
                $('#value3').text('编号及概率:'+data_obj["index3"]+'------'+data_obj["prob3"]);
                $('#value4').text('编号及概率:'+data_obj["index4"]+'------'+data_obj["prob4"]);
                $('#value5').text('编号及概率:'+data_obj["index5"]+'------'+data_obj["prob5"]);
                console.log('Success!');
            },
        });
    });