如何从没有重定向的JavaScript重新加载Django上下文？

问题描述

我正在开发一个词典应用程序和一个简单的书签页面，其中显示了书签定义。我正在使用JavaScript通过按钮在书签中添加定义或从书签中删除定义。

该按钮起作用。但是，当我在书签页面上并按它以从书签中删除定义时，该定义将保留在那里，直到我重新加载页面为止。我希望通过JavaScript按下按钮后，定义立即消失。

我试图删除我的按钮（定义的div）的parentNode，但它看起来很糟糕，这不是我想要的。

我现在正尝试向我的Django书签视图发送AJAX请求以重新加载上下文，但是到目前为止，我还无法做到这一点。有人可以帮忙吗？

这是我的Javascript代码（？是我被困住的地方）：

function toggleBookmark(event) {

    // Get definition id.
    let id = event.target.id.split("-")[1];

    // Send AJAX request to bookmark view.
    $.get("/bookmarks/bookmark/" + id,function (data) {
        if (data.added) {
            alert('Definition added to your bookmarks.')
            event.target.innerHTML = 'Remove definition from your Bookmark';
        } else if (data.removed) {
            alert('Definition removed from your bookmarks.')
            event.target.innerHTML = 'Add definition to your Bookmarks';
        }
    });

    // Send AJAX request to reload bookmarks.
    $.get("/bookmarks/",() => {
        ?
    });
}

$(window).on("load",() => {
    $(".bookmark-btn").each(function (index) {
        $(this).on("click",toggleBookmark);
    });
});

这是我的观点：

class BookmarksView(generic.ListView):
    """TODO"""
    model = Definition
    template_name = "bookmarks/bookmarks.html"

    def get_context_data(self,**kwargs):
        language = get_language()
        bookmarks = self.model.objects.filter(language=language,is_bookmarked=True)

        context = super().get_context_data(**kwargs)
        context["bookmarks"] = bookmarks.order_by("-publication_date")
        return context


def bookmark(request,definition_id):
    """Toggle bookmarks."""
    try:
        if request.method == "GET":
            definition = Definition.objects.get(pk=definition_id)
            user = request.user
            if definition.is_bookmarked:
                # Remove bookmark.
                bookmark = Bookmark.objects.get(definition=definition)
                bookmark.delete()
                definition.is_bookmarked = False
                definition.save()
                return JsonResponse({"removed": True})
            else:
                # add bookmark.
                bookmark = Bookmark.objects.create(user=user,definition=definition)
                bookmark.save()
                user.user_bookmarks.add(bookmark)
                definition.is_bookmarked = True
                definition.save()
                return JsonResponse({"added": True})
        else:
            return JsonResponse({"data": False})
    except:
        return JsonResponse({"data": False})

这是我的网址：

bookmarks_patterns = ([
    path("bookmarks/",bookmarks_views.BookmarksView.as_view(),name="bookmarks"),path("bookmarks/bookmark/<int:definition_id>",bookmarks_views.bookmark,name="bookmark"),])

书签页面的HTML：

{% block body %}
    <h1>{{ header }}</h1>
    {% for definition in definitions %}
        <div class="card mb-3 shadow-sm">
            <div class="card-body">
                <h5 class="card-title">
                    <a href="{% url 'dictionary:expression' definition.expression.slug %}">
                        {{ definition.expression }}
                    </a>
                </h5>
                <p class="card-text">{{ definition.definition }}</p>
                <p class="card-text"><small class="text-muted">{{ definition.example }}</small></p>
                {% if definition.tags.all %}
                    {% for tag in definition.tags.all %}
                        <a href="{% url 'tags:tag' tag.slug %}">#{{ tag.tag }}</a>
                    {% endfor %}
                {% endif %}
                <hr>
                <button id="button-{{ definition.id }}" type="button" class="btn-sm btn-dark bookmark-btn">
                    {% if not definition.is_bookmarked %}
                        {# Translators: Text for bookmark button. #}
                        {% translate "Add definition to your Bookmarks" %}
                    {% else %}
                        {# Translators: Text for remove bookmark button. #}
                        {% translate "Remove definition from your Bookmarks" %}
                    {% endif %}
                </button>
            </div>
        </div>
    {% empty %}
        {# Translators: Text for when there are no definitions to display. #}
        <div>{% translate "No definitions." %}</div>
    {% endfor %}
{% endblock %}

{% block js %}
    <script src="{% static 'bookmarks/js/bookmark.js' %}"></script>
{% endblock %}

谢谢大家。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）