Javascript Flask、post JSON数据和呈现模板_Javascript_Python_Html_Json_Flask

Javascript Flask、post JSON数据和呈现模板

javascript python html json flask

Javascript Flask、post JSON数据和呈现模板,javascript,python,html,json,flask,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

尝试在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>

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

当我按下

Next

按钮时，消息

Enter the ajax code

显示为spected，但模板

submitted\u form2.html

未呈现

控制台打印

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

但未打印

data1

和

data2

我和邮递员一起测试，试图向

/sub_form2

发送一个json，它可以正常工作，如图所示

控制台会打印：

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数据，因此没有打印

data1

和

data2

对不起，代码块太多了，但我不知道现在该怎么办，我尝试了所有方法，问题仍然存在。如果你有更好的解决方案，请帮助我

注意：对不起，英语不是我的母语。

我试图重现你的问题，但无法重现

这是一个最小的例子，它完全符合预期

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'

从烧瓶导入烧瓶，呈现模板字符串，请求
app=烧瓶（名称）
@应用程序路径（“/”）
def index（）：
返回渲染模板字符串（“”）
测试
警报（‘工作’）
$（“#发送数据”）。单击（函数（）{
警报（“输入ajax代码”）；
$.ajax({
类型：“POST”，
url:“/process\u form”，
contentType:“应用程序/json”，
数据：JSON.stringify（{“c1”：“one”，“c2”：“two”}），
数据类型：“json”，
async:false，
成功：功能（数据）{
警报（“成功：+数据”）；
}
});
});
''')
@app.route（'/process_form'，methods=['POST']）
def process_form（）：
输入的_json=request.get_json（force=True）
打印（输入的_json['c1']）
返回“是”

但是，如果您想在发送（AJAX）请求后呈现另一个模板，则根本不使用AJAX，只需正常发送表单即可。

可能无法将get_json（）与render_template（）混合使用，因为AJAX试图接收要在同一模板中使用的信息。真是个问题！

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'