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

Question

我正在使用 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部分代码出错了)

有我的代码，但它不起作用。

python

@app.route('/predict', methods=['GET', 'POST'])
def upload():
    if request.method == 'POST':
        # Get the file from post request
        f = request.files['file']

        # Save the file to ./uploads
        basepath = os.path.dirname(__file__)
        file_path = os.path.join(
            basepath, 'uploads', secure_filename(f.filename))
        f.save(file_path)

        # Make prediction
        top5_index, top5_prob = model_predict(file_path, model)

        wr_dict = {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]}

        return json.dumps(wr_dict)
    return None

JS

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

        // Make prediction by calling api /predict/
        $.ajax({
            type: 'POST',
            url: '/predict',
            data: JSON.parse(form_data),
            contentType: 'application/json;charset=utf-8',
            dataType: 'json',
            cache: false,
            processData: false,
            async: true,
            success: function (data) {
                // 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!');
            },
        });
    });

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

我们将不胜感激。

Answer 1

您应该使用 flask.jsonify 进行响应:

import flask

return flask.jsonify(**wr_dict)

根据文档，它的作用比转储多一点:

This function wraps dumps() to add a few enhancements that make life easier. It turns the JSON output into a Response object with the application/json mimetype.

在你的 JS 端，你应该stringify 数据而不是解析它(dict -> string)，然后解析响应(string -> dict):

// 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!');
    },
});