如何使用 AJAX 从后端获取 HTML 代码并实时更新页面

Steak Overcooked
1

目的是点击搜索键传入后端进行筛选，然后在刷新表格，代码是这样的
> 

      <input type="text" placeholder="搜索..." name="search" autocomplete="off" required>
      <button class="ui basic blue button" id="sousuo" type="submit">搜索</button>
    </div>
    <div id ="jieguo">
        {% for qaitem in qadict %}
    <div class="ui  segment" >
      <div class="ui two column very relaxed stackable grid"  >
        <div class="column" style="height: 10px;">
            <p>{{ qaitem['问'] }} </p>
        </div>
        <div class="middle aligned column" >
            <p>{{ qaitem['答'] }} </p>
        </div>
      </div>
      <div class="ui vertical divider">Q&A</div>
    </div>
      {% endfor %}
    </div>

ajax应该怎么写，post完之后接受josn类型的数据么，怎么更新到表格?
> 

    $(function () {
        $("#sousuo").click(function (event) {
            event.preventDefault();
            var userInput = $('input[name="search"]');
            var txt = userInput.val();
            $.ajax({
                type: 'POST',
                url: '/search',
                data: {"txt": txt},
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                success:function(dates){
				//alert(dates);
				$("#jieguo").html(dates);//要刷新的div
			    }
            })
    });
    });
2

Ajax更新页面DOM，你需要掌握一些jQuery DOM API，比如 $().html()

比较偷懒的方法是后端返回渲染好的html，然后直接替换，就像你现在这样写的

$("#jieguo").html(dates);

其中dates是一个HTML字符串
如果是返回JSON，那你就需要自己用jQuery组装HTML element然后替换到原节点上

3

你好我可以直接返回一个HTML页面来替换div吗，如果可以py里边return的是什么，如果不可以我return jsonify(dict)，就需要在$("#jieguo").html()里边拼一个html界面是吧

4

是的，html直接包含在返回数据里面，比如

http://todoism.helloflask.com/

就是这样做的

5

感觉我已经实现了 目前没问题
py

> def search():
>     data =request.get_json().get("txt")
>     qa_s=qadf[qadf['答'].str.contains(data) | qadf['问'].str.contains(data)]
>     qadict3 = qa_s.to_dict('records')
>     html = render_template('search.html', qadict=qadict3 , count=data)
>     return jsonify(html)

ajax是

>  $(function () {
>         $("#sousuo").click(function (event) {
>             event.preventDefault();
>             var userInput = $('input[name="search"]');
>             var txt = userInput.val();
>             var data={"txt":txt}
>             $.ajax({
>                 type: 'POST',
>                 url: '/search',
>                 data: JSON.stringify(data),
>                 contentType: "application/json; charset=utf-8",
>                 dataType: 'json',
>                 success:function(data){
> 				//alert(dates);
> 				$("#jieguo").html(data);//要刷新的div
> 			    }
>             })
>     });
>     });

直接返回HTML简单点