Question

我遇到了这个问题：我有一个搜索结果页面，其中有几个结果。我希望用户能够根据某些条件对结果进行排序。我在AJAX中这样做。问题是如何将来自服务器的排序数据再次呈现给字段。

function sort(){
    var sortid = $('#sort').val();
    $.ajax({
        type: "POST",
        url: "/sort/",
        data: { sortid: sortid },
    }).done(function(data){
        // how to render this sorted 'data' back to <td>s?  
    });
}

这是我的绑定代码：

<select onchange="sort()" id="sort">   
    <option>price</option>
    <option>rate</option>
</select>

这是结果的地方：

<tr class="result">
    <td>
        <li>{{loc.locationname}}</li>
    </td>
    <td>    
        <li>{{loc.rating}}</li>
    </td>
    <td>
        <li>{{loc.price}}</li>
    </td>
</tr>

Answer 1

您的视图可以返回一个渲染的片段，您可以将其渲染到客户端的div中

你的ajax电话看起来像这样

function sort(){
    var sortid = $('#sort').val();
    $.ajax({
        type: "POST",
        url: "/sort/",
        data: { sortid: sortid },
    }).done(function(data){
         $('#results-div').html(data.html);
    });
}

示例视图

import json
from django.shortcuts import HttpResponse
from django.template import loader, RequestContext


def my_view(request, query=None):
    # trivialized example

    sortid = request.REQUEST.get('sortid')

    # you might want to store the results into cache 
    results = MyModel.objects.filter(name__icontains=query).order_by(sortid)

    if request.is_ajax():
       t = loader.get_template('search_results.html')
       html = t.render(RequestContext({'results': results))
       return HttpResponse(json.dumps({'html': html}))
    # handle the other cases here

在search_results.html内，你只需将结果呈现到你的表中

{% for loc in results %}
<tr class="result">
    <td>
        <li>{{loc.locationname}}</li>
    </td>
    <td>    
        <li>{{loc.rating}}</li>
    </td>
    <td>
        <li>{{loc.price}}</li>
    </td>
</tr>
{% endfor %}

Answer 2

 function(data){
   var tablehtml='<tbody>'
   $.each(data,function(i,res) {
       tablehtml+='<tr class="result">'+
                   '<td><li>'+res.locationname+'</li></td>'+
                   //...
       });
    $("table").html(tablehtml+'</tbody'>)
    }

nb：我添加了tbody标签，因为如果html包含在单个父级中，这种添加html的方式比它是一个（长）节点列表

更快

euh ...编辑但要使用它你需要在.ajax中告诉你正在期待json响应（datatype:'json'），而现在情况并非如此

你还需要从服务器发送一个特定的标题（“content-type：application / json”）

如果你坚持发送html然后解析服务器端的数据（换行）并在回调中立即附加

如果你想重新考虑你的排序功能概念，如果数据不是那么大＆amp;如果你能gzip;我立即加载所有数据和在js中进行排序（不再需要服务器调用该功能对于用户来说会更快：在页面加载时稍微等待，但在

之后立即进行排序

对搜索结果的查询集进行排序，并通过ajax进行回放

2 个答案: