Отправить JSON из автозаполнения мест в Flask - PullRequest
Новая
       42

Отправить JSON из автозаполнения мест в Flask

0 голосов
/ 09 марта 2019

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

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

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

Задача / выпуск:

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

Использование AJAX для публикации данных, однако, кажется, что они никогда не достигают Flask Выход всегда Нет.

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

Имеет ли это смысл? Если да, как я могу все еще успешно отправить данные 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=key&libraries=places&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(), но этого недостаточно для моего случая использования, так как я также хочу, чтобы по крайней мере почтовый индекс был переслан.

1 Ответ

0 голосов
/ 15 марта 2019

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

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

<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).

...