AJAX调用后直接访问页面的正确方法答案

【问题标题】：Proper way for direct access to page after AJAX callAJAX调用后直接访问页面的正确方法
【发布时间】：2016-02-23 03:18:09
【问题描述】：

我正在使用 django 作为 REST 服务构建 Web 应用程序，并在前端使用 jquery 使用 AJAX 请求检索数据，然后使用自定义函数呈现这些数据。主要目标 - 应用程序不应该刷新页面，只有 ajax 调用。目前，django 只呈现一个静态页面，其他 url 使用 JSON 数据进行响应。

网址示例：

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

观看次数：

class IndexView(View):
    def get(self, request, pk):
        return render(request, 'index.html')   

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

在前端，我使用 html 历史 API 在 ajax 调用后设置 url。例如，对于 http://example.com/api/item/1 上的 ajax 调用，我会将浏览器 url 设置为 http://example.com/item/1。

我希望用户可以共享此类链接以直接访问所需的项目，但我不知道正确的方式、如何处理此类请求以及呈现所需的数据。

我认为有两种方法：首先是在前端解析 url，并进行 ajax 调用，这取决于它是什么 url。例如，如果url是http://example.com/item/1，我应该对http://example.com/api/item/1进行ajax调用，并渲染返回的数据。

二是在 django 视图中有单独的获取请求逻辑：

def ItemView(View):
    def get(self, request):
        if request.is_ajax():
            return HttpResponse(json.dumps({'status': 'success', 'message': '', 'data': item.serialize()}))
        else:
            return render(request, 'templates/item.html', {'data': item'})

我有点困惑。在我看来，第二种方法与 REST API 无关，因为我不应该在后端呈现带有数据的页面，只用 JSON 响应。此外，我将不得不创建更多模板。

在第一种方法中，我将不得不在前端编写大量的 if-else 逻辑，因为在 url 解析之后，我需要调用正确的渲染函数，这取决于那是什么 api 调用。请告知最佳方法

【问题讨论】：

如果你想在不重新加载页面的情况下更改 url 忘记服务器端，这只是你的前端如何响应特定 api 调用的问题。因为使用 jquery 是可能的，即使使用原始 javascript，大多数人都会使用 angularjs 或 reactjs
我正在使用 html 历史 API 更改前端的 url。但是当用户打开该 url 时，我必须使用特定数据呈现页面，这可以通过 API 调用获得。如果我正确理解您的评论，我必须使用一些前端路由？

标签： ajax django api rest

【解决方案1】：

如果您想在不重新加载页面的情况下更改 url，忘记服务器端，这只是您的前端如何响应特定 API 调用的问题。当您在浏览器中更改 url（准确地说是window.location）时，您基本上是在告诉它新内容正在进入，它正在执行为获取新页面内容（使用 Django render() 函数）并重新加载。

如果我理解正确，您只想获取 JSON 数据（就像您对 HttpResponse() 所做的那样），然后在页面上显示它而不重新加载。使用 jQuery，您可以通过发送请求然后以特定方式显示其响应内容来实现，例如更改页面上的元素内容：

$.ajax({
    url: your_url
}).done(function(data) {
  $.('#yourelementid').val(data.message);
});

【讨论】：