javascript - 如何在查询外部 django View 时刷新部分 DOM HTML

Question

大家好!

StackOverflow 上的很多问题都是关于“如何通过 jquery 刷新 dom ( from the same view/url )” 这不是我要找的。

对于一个大部分都使用ajax运行的网站，我想知道如何在查询外部django View 时刷新HTML DOM的一部分。

让我通过一些例子来更清楚地说明:

我有发送 all_users 的 View 到模板

def usersList(request):
    all_users = User.objects.all()
    return render(request,'administration/users-list.html',{'all_users':all_users})

在模板中我循环遍历 all_users ...第二个<span>反射(reflect)了activation state用户的

{% for u in all_users %}
    <span>{{forloop.counter}}.- {{u.name}} <span>
    <span id='user_{{u.id}}_state'>
        <button data-id='{{u.id}}' type='button' class='css-btn btn-circle'>
        {% if u.is_activate %} Active{% else %}Inactive{% endif %}
        </button>
    <span>
{% endfor %}

使用 jquery，我将请求发送到仅负责 activate 的特定 View 。或deactivate用户的帐户。我们可以activate/deactivate用户在网站的许多部分，这就是为什么我在不同的 View 中这样做。

这是 View :

def deactivateUser(request):
    user = request.user

    if user.has_perm('is_admin') and request.is_ajax() and request.method == 'POST':
        id_user = request.POST.get('id')
        targeted_user = get_object_or_deny(User,id=id_user)
        # get_object_or_deny is my own function
        it will get the object or raise PermissionDenied otherwise

        if targeted_user.is_activate:
            targeted_user.is_activate = False
            state = 'deactivated'
        else:
            targeted_user.is_activate = True
            state = 'activated'
        targeted_user.date_update_activation = NOW() # own function
        targeted_user.save()

        return JsonResponse({'done':True,'msg':'User successfully %s' %s state})
        # Here we return a JsonResponse
    raise PermissionDenied

现在，我如何使用以下 jquery 内容刷新 Dom 来获取每个用户的当前状态

$(document).on('click','.btn-circle',function(){
    var id = $(this).data("id");
    $.ajax({
        url:'/u/de-activate/?ref={{ request.path }}',
        type:'post',
        data:{
            csrfmiddlewaretoken:"{{ csrf_token }}",
            id:id,
        },
        success:function(response){
            $("#user_"+id+"_state").replaceWith($("#user_"+id+"_state",response));
            if(response.created) alert(response.msg);
        },
        error:function(){
            alert("An error has occured, try again later");
        }
    });
});

Note that all_users is required to loop through. deactivateUser() return a Json response, even though it doesn't returned it, it will not matter.

Answer 1

您可以发送http响应，而不是json。

首先，只需移动要更改的 html 即可。在这种情况下，

    {% for u in all_users %}
    <div id="user-part">
        <span>{{forloop.counter}}.- {{u.name}} <span>
        <span id='user_{{u.id}}_state'>
            <button data-id='{{u.id}}' type='button' class='css-btn btn-circle'>
            {% if u.is_activate %} Active{% else %}Inactive{% endif %}
            </button>
        <span>
    </div>
    {% endfor %}

然后保存它，即user_part.html

其次，让您的 View 返回包含该 html 和上下文的 HttpResponse。您可以使用 HttpResponse 或 render_to_response。我推荐render_to_response。

context = {
    'all_users': all_users,
}
return render_to_response(
    'path_to/user_part.html',
    context=context,
)

第三，您只需更改脚本来替换您的 html。

success: function(response){
    $('#user-part').html(response);
    prevent();
}