烧瓶,发布JSON数据并渲染模板

时间:2018-07-05 18:15:33

标签: javascript python html json flask

尝试在python上使用Flask渲染模板时遇到问题。

我的python文件如下:

main.py

@app.route('/')
def acc_prop():

    return render_template("layout.html")


@app.route('/sub_form2', methods=['POST'])
def submitted_form2():
    print "enter submitted_form2"

    dataset = request.get_json(force=True)
    data1 = dataset['c1']
    data2 = dataset['c2']

    print data1
    print data2

    return render_template(
        "submitted_form2.html",
        one=data1,
        two=data2
    )

我的模板如下:

layout.html

<head>
    ...
</head>
<body>
    <div>
         <button class="btn btn-warning btn-lg float-right" id="send-data">Next</button>
    </div>

    <script type="text/javascript" src="/static/js/send-data.js"></script>
</body>

submitted_form2.html

<head>
    ...
</head>
<body>
    <p>Data received:</p>
    <p>
        <strong>First data: </strong> {{ one }} <br>
        <strong>Second data: </strong> {{ two }} <br>
    </p>
</body>

第一个模板layout.html呈现良好,并且当按下按钮submitted_form2()时,该Java脚本文件可以向flask项目中的Next函数发送json数据,然后正确输入函数,但无法在submitted_form2.html内呈现模板。

Java脚本使用ajax使用JSON数据执行POST,如下所示:

send-data.js

$("#send-data").click(function(){
    alert('Enter the ajax code');

    $.ajax({
        type : "POST",
        url : "/sub_form2",
        contentType : "application/json",
        data : JSON.stringify({"c1": "one", "c2": "two"}),
        dataType: "json",
        async: false,
        success: function(data) {
            alert("success: " + data);
        }
    });
});

当我按下Next按钮时,消息Enter the ajax code如图所示,但是模板submitted_form2.html未呈现。

控制台打印

127.0.0.1 - - [05/Jul/2018 11:32:03] "POST /sub_form2 HTTP/1.1" 400 -
enter submitted_form2

但是data1data2未打印。

我正在与邮递员进行测试,试图将json发送到/sub_form2,并且可以正常工作,请参见图片。

json in postman

控制台显示:

127.0.0.1 - - [05/Jul/2018 11:32:03] "POST /sub_form2 HTTP/1.1" 200 -
enter submitted_form2
uno
[1, 2, 3]

为什么会这样?也许有些我不知道的东西,或者我做错了什么。我的第一个想法是我的Java脚本没有真正发送JSON数据,因此没有打印data1data2

很抱歉,代码块的数量很多,但是我现在不知道该怎么办,我尝试了一切,问题仍然存在。如果您有更好的解决方案,请帮助我!

注意:抱歉,英语不是我的母语。

1 个答案:

答案 0 :(得分:0)

我试图重现您的问题,但不能。

这是一个最小的示例,它确实完成了预期的工作。

from flask import Flask, render_template_string, request

app = Flask(__name__)

@app.route('/')
def index():
    return render_template_string('''
    <button id="send-data">test</button>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
    alert('working')
      $("#send-data").click(function(){
          alert('Enter the ajax code');

          $.ajax({
              type : "POST",
              url : "/process_form",
              contentType : "application/json",
              data : JSON.stringify({"c1": "one", "c2": "two"}),
              dataType: "json",
              async: false,
              success: function(data) {
                  alert("success: " + data);
              }
          });
      });

    </script>
    ''')

@app.route('/process_form', methods=['POST'])
def process_form():
    inputted_json = request.get_json(force=True)
    print(inputted_json['c1'])
    return 'yes'

但是,如果要在发送(AJAX)请求后呈现另一个模板,则完全不要使用AJAX,而只需以正常形式发送即可。