Flask:用客户端数据更新模板

Flask: Updating template with client side data

本文关键字:更新 数据 客户端 Flask      更新时间:2023-09-26

我正在研究一个项目,其中用户在访问url时显示餐馆(rest objs)的默认列表。如果用户选择使用HTML5地理功能提交他们的位置,我希望更新结果列表,使其按照与用户位置的接近程度排序。

初始模板渲染成功,我可以将数据返回到服务器-我只是不能重新渲染模板。当我在开发控制台中预览对客户端帖子的响应时,数据已更新,但当我转到页面时,没有任何更改。

我知道我可能犯了一个愚蠢的明显的错误,我只是不知道这是什么。

这是我的观点:

def home():
    if request.method == 'POST':
        lat = request.form.get('lat','')
        lng = request.form.get('lng','')
        query = loc_query(lat,lng,10,0,20)
        rests = Rest.query.from_statement(query).all()
        return render_template('main.html',rests = rests)
    else:
        rests = getLatest(5)#Get 5 random rest objects 
        return render_template('main.html',rests = rests)

下面是我的客户端脚本:

<script type="text/javascript"> 
    function sendloco (loc) {
        $.post('/latest',{lat:loc.coords.latitude,lng:loc.coords.longitude}, 
            function(data){
                $('#restlist').html(data);
            });                 
    };
    navigator.geolocation.getCurrentPosition(sendloco);
</script>

下面是我的模板的相关部分:

<div class="col-lg-12" id="restlist">
        {% for rest in rests %}
            <h2><b><a href="{{ url_for('profile',id=rest.id)}}">{{ rest.name }}</a></b></h2>
            <h3>Date:{{ rest.latestDt() }}</h3>
            <h3>{{ rest.street }}</h3>
        {% endfor %}
    </div>

谢谢你的帮助!

看起来你正在调用$('.restlist').html(data),但在html中你的div有id="restlist"而不是类。可以试试$('#restlist').html(data)