Question

我在前端使用jquery构建应用程序，django作为数据库请求和龙卷风webosckets的休息服务，以通知用户，是否有其他用户更改了模型。

我简化了所有列出的代码。假设，我有下一个django模型：

class Item(models.Model):
    name = models.CharField(max_length=200)
    description = models.TextField()
    price = models.FloatField()

    def serialize(self):
        return {'pk': self.pk,
                'name': self.name,
                'description': self.description,
                'price': self.price}

视图，使用json数据进行响应。

class ItemView(View):
    def get(self, request, pk):
        try:
            item = Item.objects.get(pk=pk)
            return HttpResponse(json.dumps({'status': 'success', 'message': None, 'data': item.serialize()}))
        except Item.DoesNotExist:
            return HttpResponse(json.dumps({'status': 'error', 'message': 'invalid item id', 'data': None}))

class ItemsView(View):
    def get(self, request):
        items = Item.objects.all()
        return HttpResponse(json.dumps({'status': 'success', 'message': '', 'data': [x.serialize() for x in items]}))

网址：

urlpatterns = [
    url(r'^item/(?P<pk>\d+)/$', ItemView.as_view(), name='item'),
    url(r'^items/$', ItemsView.as_view(), name='items')
]

让html页面包含一个空元素：

<div id="main"></div>

在第一页加载时，我使用ajax请求加载并呈现所有项目：

$.ajax({
        url: '/items/',
        method: 'get',
        success: function(response){
            var parsedResponse = JSON.parse(response),
                status = parsedResponse.status,
                message = parsedResponse.message,
                data = parsedResponse.data;
            if (status == "success") {
                $("#main").html(""); // clear page data
                for (i=0; i<data.length; i++) {
                    $("#main").append(data[i].name);
                    $("#main").append("<a href=/item/'"+data[i].pk+" class='item-details'>Details</a>");
            } else if (status == "error"){
                $("#error").append(message);
            }
        }
    });

对于每个呈现的项目，我有下一个处理程序来显示项目详细信息。在这种情况下，所有以前渲染的项目必须从页面中消失：

$("#main").on("click", ".item-details", function(event){
    event.preventDefault();
    $.ajax({
        url: $(this).attr("href"),
        method: "get",
        success: function(response){
            var parsedResponse = JSON.parse(response),
                status = parsedResponse.status,
                message = parsedResponse.message,
                data = parsedResponse.data;
            if (status == "success") {
                $("#main").html(""); // clear page data
                $("#main").append(data.name);
                $("#main").append(data.description);
                $("#main").append(data.price);
            }
        }
    })
});

在这里我遇到了问题，在渲染项目细节后，我不知道，如何回到＆＃34;之前＆＃34;包含所有项目的页面。这个应用程序不应该重新加载页面。你能否告诉我我的问题，如何实施＆＃34;返回＆＃34;功能

Answer 1

当您向用户发送大量数据时，如果您有能力保留这些数据，则执行此操作。它将减少HTTP请求的数量，数据库请求的数量，并通过更快的导航改善用户体验。而不是每次更换#main html内容。将html保存在#main内的div中的所有项目中，当用户点击某个项目时，将其隐藏在#main中的另一个div中。当用户关闭该项目时，您将显示所有项目：

<div id="main-div">
    <div class="items"></div>
    <div class="item-detail"></div>
</div>

您还可以使用模态窗口显示商品的详细信息，并让＃＃;＃main＆＃39; div可见，您只需在用户请求项目时添加新div，并在关闭模型窗口时将其删除。

你也可以复制#main div的html内容，然后用项目的新数据替换它，当他关闭项目时，用以前的数据替换#main div的html内容但是我认为解决方案1更好（性能）更清洁。

在AJAX请求之后显示以前的数据，使用＆＃34;返回＆＃34;浏览器中的按钮

1 个答案: