Question

我试图在同一页面上显示搜索结果。当用户搜索输入内容并发布到路线仪表板并且该路线返回JSON对象时，如何在实现卡中显示这些结果？我正在尝试使用AJAX和jQuery。

@app.route('/dash',methods=['GET','POST'])
@login_required
def dashboard():
    form=searchDashBoard(request.form)
    if current_user.is_authenticated:
        if request.method == 'POST' and form.validate_on_submit():
            user_input = form.wineName.data
            similar=a.getClosestMatch(user_input)[:9]
            if not similar:
                flash(' Wine Not found ')
            else:
                newList=[]
                for id in similar:
                    print(id)
                    info= a.getWineInfo(id)
                    r=requests.get('https://www.vivino.com/api/wines/'+str(id)+'/wine_page_information').json()
                    pic_url = r['wine_page_information']['vintage']['image']['location']
                    info['url']="https:"+str(pic_url)
                    newList.append(info)
                return jsonify(newList)
    return render_template('dashboard.html',name=current_user.username,form=form)

ajax

单击searchBtn时，它会从路径/破折号获取数据，然后循环遍历并创建卡片。因此，基本上我想输出类似于searchCard.html的内容，但与我使用seachinput和button的页面相同

    $('#searchBtn').click,(function(){
  $.getJSON('/dash',function(obj){
    $.each(obj,function(key,value){
      $('ul').append('<li>'+value.id+'</li>')

    })

  })
}

searchcard.html

{% block content %}
<div class="container">
<div class="row">
{% for w in newList %}
  <ul class="collection">
      <li class="collection-item avatar">
        <img src={{ w['url'] }} style="max-height: 100px" alt="wine Image" class="circle">
        <span class="title">{{w['name']}}</span>
        <p><i class="material-icons">location_on</i> {{ w['region'] }}
        </p>
        <p> <i class="material-icons">attach_money</i> {{ w['price'] }}</p>
        <a href="#!" class="secondary-content"><i class="material-icons addBtn" wineID="{{ w['id'] }}" >add</i></a>
      </li>
</ul>
    {% endfor %}
  </div>
</div>

  {% endblock %}

Answer 1

有些时髦在这里用括号括起来：

 $.ajax("{{url_for('save') "}}.done(function(reply){

将其更改为：

 $.ajax("{{ url_for('save') }}").done(function(reply){

尽管要在浏览器控制台中查找提示，但我们无法在不知道到底发生了什么错误的情况下在此处进行过多操作。

在同一页烧瓶上显示结果

1 个答案: