Колба, публиковать данные в формате JSON и шаблон рендеринга - PullRequest
0 голосов
/ 05 июля 2018

У меня проблема при попытке отрисовки шаблона с помощью Flask на python.

Мой файл 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 хорошо рендерится, и файл java-сценария необходим для отправки данных json в функцию submitted_form2() в моем проекте колбы при нажатии кнопки Next, затем введите функцию правильно, но не сделать шаблон внутри submitted_form2.html.

java-скрипт использует ajax для предварительной обработки POST данными JSON следующим образом:

отправить-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

Но data1 и data2 не напечатаны.

Я тестировал с почтальоном, пытающимся отправить json на /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.

Извините за количество блоков кода, но я не знаю, что теперь делать, я все перепробовал, и проблема сохраняется. Если у вас есть лучшее решение, пожалуйста, помогите мне!

Примечание: извините, английский не мой родной язык.

1 Ответ

0 голосов
/ 06 июля 2018

Я пытался воспроизвести вашу проблему, но не смог.

Это минимальный пример, который сделал именно то, что ожидалось.

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, а просто отправьте в форме в обычном режиме.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...