Question

我在模板中有一个4列的产品表，表中的每个项目都有一个onclick的锚点，如下所示：

<div id="tablepro">
    <table>
        <tr>
        {% for product in cat.products.all %}
            {% if forloop.counter|divisibleby:4 %}
                </tr>
                <tr>
                    <td><center><a href="#" onclick="remove({{product.pk}});">delete</a></br><img style="width:200px;height:200px;" class="magnify" src="{{product.image.url}}" /></center></td>
            {% else %}
                    <td><center><a href="#" onclick="remove({{product.pk}});">delete</a></br><img style="width:200px;height:200px;" class="magnify" src="{{product.image.url}}" /></center></td>
            {% endif %}
        {% endfor %}
    </table>
</div>

在remove function我有：

function remove(id)
{
    var URL='{% url CompanyHub.views.catDetails company.webSite,cat.id %}';
    URL+='delpro/'+id+'/';
    $.ajax({
        url:URL,
        type:'POST',
        complete:function(){
            var str='<table><tr>';
            {% for product in cat.products.all %}
                {% if forloop.counter|divisibleby:4 %}
                    str+='</tr><tr>';
                    str+='<td><center><a href="#" onclick="remove({{product.pk}});">delete</a></br><img style="width:200px;height:200px;" class="magnify" src="{{product.image.url}}" /></center></td>';
                {% else %}
                    str+='<td><center><a href="#" onclick="remove({{product.pk}});">delete</a></br><img style="width:200px;height:200px;" class="magnify" src="{{product.image.url}}" /></center></td>';
                {% endif %}
            {% endfor %}
            str+='</table>';
            $('#tablepro').html(str);
        },
        error:function(){
            alert('Error');
        }
    });
}

views.py中的

：

def deleteProduct(request,key,cat_id,pro_id):
    try:
        company=Company.objects.get(webSite__iexact=key)
    except Company.DoesNotExist:
        Http404
    cat=Category.objects.get(pk=cat_id)
    if pro_id:
        try:
            product=Product.objects.get(pk=pro_id)
            product.delete()
        except Product.DoesNotExist:
            Http404
    return render_to_response('CompanyHub/Company/%s/cat_details.html'%(company.theme),{'company':company,'cat':cat}, context_instance=RequestContext(request))

正如你看到我已经返回cat object现在product object已从其列表中删除，但我无法在模板中更新我的Div！听起来像cat object尚未在模板标签中更新。

任何建议表示赞赏

Answer 1

请记住，模板是在服务器端编译的，然后生成的HTML将传递给客户端。这意味着您在complete函数（在ajax调用中）中的模板代码将始终相同 - 换句话说，每次删除元素（并调用remove）时，您再次重新显示所有原始类别，因为在for循环中生成的HTML在服务器端创建一次 - 而不是异步

Answer 2

模板在服务器端编译，浏览器呈现HTML。

要在ajax调用后更新div，您需要使用complete方法中的javascript代码更新它。您的服务器端视图可以返回JSON，XML，HTML或任何其他数据类型，并且您的complete方法必须呈现该数据。下面是一个示例，说明如果您的服务器端返回部分html（即只是表格），您的complete方法应如何显示：

complete:function(data) {
        $('#tablepro').html(data);
},

在$ .ajaxt的完整功能中重建Div标签的内容

2 个答案: