колба jquery, чтобы остановить обновление - PullRequest
Новая
       7

колба jquery, чтобы остановить обновление

0 голосов
/ 29 августа 2018

Я могу реализовать этот урок здесь: https://pythonprogramming.net/jquery-flask-tutorial/

Однако я хочу расширить его и использовать ввод из html в качестве переменной для создания другого кода с ним. Я не могу получить переменную, как я делал в прошлом: 

lang =request.form['proglang']

и ссылаться на него, чтобы отобразить в HTML-шаблоне: 

<h3>You responded with: {{ lang }} </h3>

Пожалуйста, дайте мне знать, как получить переменную из HTML-ввода в моем 

@app.route('/interactive', methods=['GET', 'POST'])

HTML шаблон с полным кодом: 

{% block body %}
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type=text/javascript>
        $(function() {
          $('a#process_input').bind('click', function() {
            $.getJSON('/background_process', {
              proglang: $('input[name="proglang"]').val(),
            }, function(data) {
              $("#result").text(data.result);

            });
            return false;
          });
        });

    </script>
</head>

<body>
    <div class='container'>
    <h3>Welcome! Which is the best programming language of them all?</h3>
        <form>
            <input type=text size=5 name=proglang>
            <a href=# id=process_input><button class='btn btn-default'>Submit</button></a>
        </form>
    <p id=result></p>
    </div>



</body>


    <body>
    <div class='container'>
    <h3>You responded with: {{ lang }} </h3>
    </div>
    </body>

{% endblock %}

Полный код колбы: 

from flask import Flask
from flask import render_template, url_for, request, redirect
from flask import jsonify

app = Flask(__name__)


@app.route('/interactive', methods=['GET', 'POST'])
def interactive():
    try:
        lang =request.form['proglang']
    except:
        lang = '1234'


return render_template('interactive_v2.html', lang=lang)

@app.route('/background_process')
def background_process():
    try:
        lang = request.args.get('proglang', 0, type=str)
        if lang.lower() == 'python':
            return jsonify(result=lang)
        else:
            return jsonify(result='Try again.')

    except Exception as e:
        return str(e)

if __name__ == '__main__':
    app.run(debug=True)

1 Ответ

0 голосов
/ 29 августа 2018

Вы не можете ссылаться на переменные из flask с помощью jinja, когда используете ajax ($ .getJSON в вашем случае). Когда вы делаете вызов ajax, вы отправляете запрос на background_process, и он возвращает ответ json. Этот ответ не может быть представлен с помощью Jinja (фигурные скобки) и может использоваться только с кодом JavaScript.

{{lang}} отображается только один раз при загрузке interactive. Когда вы получаете ответ от ajax, вы получаете его в формате json, и вам нужно использовать jquery для манипулирования данными или использовать их, а не фигурные скобки jinja

Наконец, вы не можете иметь более одного тега <body> в HTML-документе.

Вот как можно добиться того, чего вы хотите, и исправить формат вашего HTML 

<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type=text/javascript>
        $(function() {
          $('a#process_input').bind('click', function() {
            $.getJSON('/background_process', {
              proglang: $('input[name="proglang"]').val(),
            }, function(data) {
              $("#result").text(data.result);
              // ADD THE FOLLOWING LINE
              $("#lang").text(data.result);


            });
            return false;
          });
        });

    </script>
</head>

<body>
    <div class='container'>
        <h3>Welcome! Which is the best programming language of them all?</h3>
        <form>
            <input type=text size=5 name=proglang>
            <a href=# id=process_input><button class='btn btn-default'>Submit</button></a>
        </form>
        <p id=result></p>
    </div>

    <div class='container'>
        <h3>You responded with: <span id="lang">{{lang}}</span> </h3>
    </div>

</body>

</html>
...