翻译 | 如何将 Ajax 与 Django 应用整合在一起?

django

菜鸡提问:

我是一个 Django 和 Ajax 的菜鸟, 最近我在完成一个项目，需要去整合这两门技术。 我认为我清楚两门技术背后的原理了，但尚未找到两者整合的良好解释。

有大佬可以快速解释一下代码库是如何随着它们两者的集成而改变的吗？

打个比方，我是否可直接使用带有 Ajax 的 HttpResponse，还是说我的请求响应必须因为 Ajax 的使用做出改变？ 若是如此，请提供一个示例，说明请求的响应必须做出怎样的变化？ 我返回的数据是JSON, 如果这对结果有什么影响的话.

大佬回复:

虽然这并非完全符合SO的精神，但我很喜欢这个问题，因为我在入门的时候遇到过同样的问题，所以我会给你一个快速指南。 很显然你不并理解两门技术背后的原理（不要把它作为一种冒犯，但如果你非要这样想，估计你也不会问）。

注解: 原文中 SO Spirit 的 SO 根据问题来源猜测应该是 StackOverflow 的缩写, 但是译者查不到有关于这个网站的精神(或原则)是什么. 如清楚的同学可以留言告知.

Django 是服务器端。 这意味着，比如客户端要跳转到某个链接，那么你在视图中需要有一个函数可以渲染他将看到的内容并在 html 页面中返回一个响应。 举个栗子:

views.py:

# 视图
def hello(request):
    return HttpResponse('Hello World!')

def home(request):
    return render_to_response('index.html', {'variable': 'world'})

index.html:

{# 模板 #}
<h1>Hello {{ variable }}, welcome to my awesome site</h1>

urls.py

# 路由
url(r'^hello/', 'myapp.views.hello'),
url(r'^home/', 'myapp.views.home'),

这是用法的一个最简示例。 转到 127.0.0.1:8000/hello 意味着对 hello 函数发出请求，再转到 127.0.0.1:8000/home 会返回 index.html 并替换所有的变量（你目前应该已经知道这个原理).

现在来谈谈 AJAX . AJAX 的调用就是执行异步 (asynchronous) 请求的客户端代码. 听起来很高大上，说人话就是它在后台执行客户端的请求，然后处理响应. 因此, 当你对某个 URL 执行 AJAX 调用时, 你会拿到直接跳转到相应网址返回的相同数据.

打个比方, 对 127.0.0.1:8000/hello 的 AJAX 调用将返回与直接访问它时获得的相同内容. 但这次，你只有一个 js 函数，你可以随意改造它. 一起来看一个简单的用例:

$.ajax({
    url: '127.0.0.1:8000/hello',
    type: 'get', // 这是默认值，实际上并不需要特别写出来
    success: function(data) {
        alert(data);
    },
    failure: function(data) { 
        alert('Got an error dude');
    }
}); 

过程大概是这样的：

1. Ajax 调用会转到网址 127.0.0.1:8000/hello, 和你切换到新标签完成该请求一样.
2. 如果成功（状态码为 200），则执行成功对应的函数，该函数将弹出提醒显示收到的数据.
3. 如果失败，则执行另一个函数.

那么现在这里会发生什么？ 没错, 你会收到一个 “hello world” 的弹出提示. 如果你用 Ajax 调用 home 请求呢？ 同样地，你会收到一个弹出提示，写着

{# 你好呀, 欢迎来到我牛逼哄哄的网站 #}
<h1> Hello world，welcome to my awesome site</ h1>

换句话说 - AJAX 调用并不是什么新鲜玩意, 它们只是让你在不离开当前页面的情况下让用户获取数据和信息的一种方式, 可以让你的网站设计更流畅, 整洁. 这里有你应该注意的一些指导性意见:

1. 学习 jQuery. 这点我必须着重强调. 你必须要了解它才能知道如何处理你收到的数据. 你还需要了解一些基本的 javascript 语法 (和 python 差不多，你学起来不难). 这里我强烈推荐 Envato 的 jQuery 视频教程, 会帮你走上正道.

注解: 作者给出的教程地址:
https://code.tutsplus.com/courses/introduction-to-jquery

1. 什么时候使用JSON？你会找到很多用 Django 视图发送的 JSON 数据的示例. 我没有给出详细说明, 因为怎么用一点并不重要 (关于这个的介绍比比皆是)，更关键的是什么时候该用.
   答案就是 -- JSON数据是序列化数据 也就是你可以操纵的数据. 就像我提到的，AJAX 调用会获取响应，就像用户自己完成的一样. 假设你不想搞乱所有的 html，只是想发送数据 (也许是一个对象列表). 那么 JSON 对此这个需求就很有用处, 因为它将数据作为一个对象发送 (JSON数据看起来像一个 Python 字典), 然后你可以迭代它或做一些其他的东西, 无需筛选无用的 html.

2. 最后再添加 Ajax 当你准备构建一个 Web 应用程序并想要实现AJAX时 -- 拉自己一把, 首先, 构建一个完整的不包含 AJAX 的应用, 并且可以正常使用. 然后, 才开始编写AJAX调用. 这是一个很好的流程, 可以帮助你学到很多东西.