Question

我想使用AJAX调用在我的烧瓶应用程序中发送JSON格式的数据，当我发送它时，烧瓶中显示“无”。

这是jquery，

$('#form').on('click',function(){
  var text = $('#textField').val();
  var obj = {name:text};
  var myJSON = JSON.stringify(obj);
  $.ajax({
    data : myJSON,
    url: '/process',
    type : 'post',
    contentType: 'application/json',
    dataType : 'json'
  })
})

这是我的烧瓶路线，

@app.route('/process',methods=["POST"])
def process():
    data = request.json
    return render_template("form.html",data = data)

在数据中我没有显示。

Answer 1

return render_template无效，因为数据是通过Ajax发送的。它将返回模板内容。
您可以通过Ajax中的done方法接收Flask返回的数据。

我正在添加示例代码来演示如何处理JSON数据的Ajax提交。

app.py：

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

@app.route('/process',methods=["GET", "POST"])
def process():
    if request.method == 'POST':
        data = request.json
        return jsonify(data)
    return render_template("form.html")

app.run(debug=True)

form.html：

<html>
    <head>
        <title>Form</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="data"></div>

        <input type="text" id="textField" />
        <button id="demo_btn">Dummy button</button>
        <script>
            $(document).ready(function () {
                $("#demo_btn").on("click", function() {
                    var text = $('#textField').val();
                    var obj = {name:text};
                    var myJSON = JSON.stringify(obj);
                    $.ajax({                        
                        url: '/process',
                        type : 'post',
                        contentType: 'application/json',
                        dataType : 'json',
                        data : myJSON
                    }).done(function(result) {
                        $("#data").html(result["name"]);
                    }).fail(function(jqXHR, textStatus, errorThrown) {
                        console.log("fail: ",textStatus, errorThrown);
                    });
                });
            });
        </script>       
    </body>
</html>

输出：

参考：

http://api.jquery.com/jquery.ajax/

Answer 2

看起来JQuery没有设置正确的标头。

如果您使用request.get_json()方法而不是request.json属性，则无论标头如何，它将获取json。

解码Flask中的JSON

2 个答案: