Получить данные из HTML ии передать данные обратно во внешний интерфейс, используя ajax или js

Question

Я пытаюсь получить данные с веб-страницы в моем приложении фляги, и после нескольких операций над ним, список вывода, я пытаюсь отправить его обратно в интерфейс в виде раскрывающегося списка.

Что я сделалдо сих пор:

есть пользовательская форма, в которой пользователь вводит данные и нажимает кнопку Отправить, и он получает вывод json.

в этой форме, у меня есть кнопка поиска, которая, когда пользователь вводитстрока, эта строка отправляется в маршрут приложения фляги, и выполняется несколько операций поиска, и выводится список элементов (ДО этой части она работает!)

Что мне нужно, чтобы получить, так это список выводадолжен быть снова отправлен обратно на страницу формы, и у меня возникли проблемы с тем, чтобы заставить его работать.

Это то, что я сделал до сих пор:

    var successFunction = function(response) {
     /* do something here */
            $('#info').html(JSON.stringify(data, null, '   '));
    });
}
$(function(){
        $('#btnSignUp').click(function(){

                $.ajax({
                        url: '/signUp',
                        data: $('form').serialize(),
                        type: 'POST',
                        success: successfunction(response)
                        error: function(error){
                                console.log(error);
                        }
                });
        });
});

колбаВ приложении есть что-то вроде этого:

from flask import Flask, render_template, request,jsonify,url_for
import json,os,re
app = Flask(__name__)

@app.route('/',methods=['GET','POST'])
def form():
        if request.method == 'POST': #this block is only entered when the form is submitted
                result = { key: value[0] if len(value) == 1 else value
                      for key, value in request.form.iterlists()
                        }
                return json.dumps(result,indent=2)
        return render_template('form_backup1.html')


@app.route("/signUp", methods=["POST","GET"])
def signUp():
        jsdata = request.form['Nitro']
        <couple of find and search operations the output of which is in 
        this dropdown_list list>
        return jsonify(dropdown_list)

if __name__ == '__main__':
   app.run(host="0.0.0.0",port="5000",debug = True)

отрубленная html-страница просто для отображения поля поиска:

<code>      <div id='nitroo'>
      Nitro_search: <input type="text" placeholder="Apply Nitro" name="Nitro" id="Nitro">
      <button id="btnSignUp" class="btn btn-lg btn-primary btn-block" type="button">Search</button>
       <pre id="info">

Как я уже сказал, я могу получить текствводится пользователем в HTML-форму, когда он нажимает на поиск.В выходных списках Python я не могу добраться до внешнего интерфейса.

Любая помощь по этому вопросу будет принята с благодарностью.

Спасибо

Answer 1

Вы можете использовать ajax с Jquery.Вы можете просмотреть этот документ для получения более подробной информации.

Как продолжить:

1. Настройка сценариев js

В шаблоне вашего HTML-файла:

• Загрузить Jquery :

Загружать Jquery предпочтительно перед любыми другими файлами JavaScript.

Статически:

<script type=text/javascript src="{{url_for('static', filename='jquery.js') }}"> </script>

Или с помощью API библиотек AJAX от Google:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="{{url_for('static', filename='jquery.js') }}">\x3C/script>')</script>

• Добавление динамического пути к сайту:

  <script type=text/javascript>$SCRIPT_ROOT = {{ request.script_root|tojson|safe }}; </script>
  

  Этот скрипт-тег устанавливает глобальную переменную в качестве префикса к корню приложения.

• На стороне Flask

Напишите функцию, которая будет принимать в качестве аргумента значение, введенное пользователем в форму, выполнять операции поискаи вернуть объект JSON со списком, который вы хотите отобразить.

@app.route("/_signUp")
def signUp():
    myString = request.args.get('myString')

    """couple of find and search operations the output of which is in 
    this dropdown_list list"""

    dropdown_list = ['A', 'B', 'C'] #sample

    return jsonify(dropdown_list=dropdown_list)

Назад в HTML-код

Напишите скрипт, который будет извлекать введенные данные, отправлять их в Ajax на сервер и отображать информацию, возвращаемую сервером.

<code><script type=text/javascript>
    $(function(){
        $('#btnSignUp').bind('click', function(){
            $.getJSON($SCRIPT_ROOT + '/_signUp', {
                myString: $('input[name="Nitro"]').val(),
            },function(data){
                $('#info').append('<li>' + data.dropdown_list[0] + '</li>' );//A
                $('#info').append('<li>' + data.dropdown_list[1] + '</li>' );//B
                $('#info').append('<li>' + data.dropdown_list[2] + '</li>' );//C
            }
        });
    });
</script>
<div id='nitroo'>
    Nitro_search: <input type="text" placeholder="Apply Nitro" name="Nitro" id="Nitro">
    <button id="btnSignUp" class="btn btn-lg btn-primary btn-block" type="button">Search</button>
   <pre id="info">

См. эту ссылку для получения более подробной информации.