Блог

Я работаю над своим самым первым веб-приложением, использующим функциональность автозаполнения Google Places во внешнем интерфейсе и Flask во внутреннем интерфейсе.

Текущая ситуация:

Всякий раз, когда адрес выбирается из предложений автозаполнения, в фоновом режиме заполняется переменная с именем ‘address’, содержащая ответ API в формате JSON. Используя оконное оповещение, я могу подтвердить, что эта часть работает нормально.

Задачи:

Переменная address должна быть отправлена в Flask, чтобы я мог использовать ее в дальнейшем.

Использование AJAX для отправки данных, однако, похоже, что они никогда не доходят до Flask. Результат всегда равен None.

Мое лучшее предположение заключается в том, что кнопка отправки, реализованная после автозаполнения, каким-то образом переопределяет данные POST JSON, чтобы сохранить только фактический текст, который находится в форме при отправке *.

Имеет ли это смысл? Если да, то как я все еще могу успешно отправить данные JSON? Или проблема в чем-то другом?

Я был бы признателен за любую помощь.

Вот мой код:

home.html

 {% extends "base.html" %}
{% import 'bootstrap/wtf.html' as wtf %}

{% block app_content %}
{% from "_formhelpers.html" import render_field %}


<div class="container">
    <form class="form form-horizontal" action="" method="post" role="form" novalidate>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=keyamp;libraries=placesamp;language=en"></script>
        <script type="text/javascript"> 

            google.maps.event.addDomListener(window, 'load', function () {
                var autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'),{
                    types: ['geocode']
                });

                // autocomplete.setFields('address_components');

                google.maps.event.addListener(autocomplete, 'place_changed', function () {
                    var place = autocomplete.getPlace();                                
                    var address = place.address_components;


                    window.alert(JSON.stringify(address));
                    }
                    )})

                    $.ajax({
                        type: "POST",
                        url: "/",
                        data: address,
                        success: function(){},
                        dataType: "json",
                        contentType : "application/json"
                        });        


        </script>

        <input type="text" id="autocomplete" size=50 style="width: 250px" placeholder="Enter your location" name=inputkiez>
        <a href=# id=autocomplete><button class='btn btn-default'>Submit</button></a>          
    </form>

    <div class="row">
        or check out <a href='/result'> the latest reviews from others </a>
    <div>
</div>

{% endblock %}
  

routes.py

 @app.route('/', methods=['GET','POST'])
def search():
    if request.method == 'POST':
        jsdata = request.get_json()
        flash('Data is: {}'.format(jsdata))     
        return redirect('/review')      
    return render_template('home.html')


@app.route('/review', methods=['GET', 'POST'])
def review():
    reviewform = ReviewForm()
    if reviewform.validate_on_submit():
        userreview = Reviews(               
            reviewcriteria1= reviewform.reviewcriteria1.data,
            reviewcriteria2= reviewform.reviewcriteria2.data,
            reviewcriteria3= reviewform.reviewcriteria3.data,           
            )
        db.session.add(userreview)
        db.session.commit()         
        return redirect('/result')
    return render_template('review.html', form=reviewform)
  

* Текст в форме будет включать адрес, выбранный из автозаполнения, но, очевидно, без каких-либо дополнительных данных. Мне даже удалось передать этот текст на следующую страницу с помощью request.form.to_dict() , но для моего варианта использования этого недостаточно, поскольку я также хочу, чтобы по крайней мере почтовый индекс был отправлен повторно.

Это не точный ответ на мой вопрос, но я нашел способ отправлять данные в flask без необходимости вводить JSON / AJAX вообще.

Хитрость заключается в том, чтобы отправить данные из ответа автозаполнения в виде скрытого ввода формы:

 <form method="post" action="">                   
            <input id="userinput" placeholder="Enter a location" type="text" name="name" class="form-control"><br>
            <div id="map" style="height: 300px;width: 300px; float: none; margin: 0 auto;"></div><br>    
            <input type="hidden" name="address" id="address">            
            <input type="submit" name="submit" value="Submit" class="form-control btn btn-primary">
            <div>or check out <a href='/result'> the latest reviews from others </a></div>    
        </form>
  

Затем в routes.py вы можете легко получить данные следующим образом:

 @app.route('/', methods=['GET','POST'])
def search():
    if request.method == 'POST':
        address = request.form['address']
        # do something
  

По сути, это слегка измененная версия решения, опубликованного здесь (YT video).