Question

我正在使用我的第一个Web应用程序，该应用程序在前端使用Google Places自动完成功能，在后端使用Flask。

当前情况：

无论何时从自动完成建议中选择一个地址，都会在后台填充一个名为“ address”的变量，该变量包含API响应作为JSON。使用窗口警报，我可以确认这部分工作正常。

待办事项/问题：

应该将address变量发送到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()将此文本传递到下一页，但这对于我的用例来说还不够好，因为我还希望至少发送邮政编码。

Answer 1

这不是我的问题的确切答案，但是我找到了一种方法，无需将JSON / AJAX引入就可以将数据发送到flask。

技巧是将“自动放置”响应中的数据作为隐藏输入形式发送：

<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

这基本上是对发布的here（YT视频）解决方案的略微修改。

从Places Autocomplete将JSON发送到Flask

1 个答案: