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

本文分享自微信公众号 - 程序员的碎碎念(gh_53e607dd4782)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-01-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python爬虫与数据挖掘

一篇文章教会你理解Scrapy网络爬虫框架的工作原理和数据采集过程

Scrapy是一个使用Python编程语言编写的爬虫框架,任何人都可以根据自己的需求进行修改,并且使用起来非常的方便。它可以应用在数据采集、数据挖掘、网络异常用...

10650
来自专栏Soul Joy Hub

《neural network and deep learning》题解——ch03 如何选择神经网络的超参数

http://blog.csdn.net/u011239443/article/details/77748116

13130
来自专栏Soul Joy Hub

《深度学习Ng》课程学习笔记01week2——神经网络基础

http://write.blog.csdn.net/mdeditor#!postId=77852727

12130
来自专栏Python爬虫与数据挖掘

Windows下安装Scrapy方法及常见安装问题总结——Scrapy安装教程

这几天,很多朋友在群里问Scrapy安装的问题,其实问题方面都差不多,今天小编给大家整理一下Scrapy的安装教程,希望日后其他的小伙伴在安装的时候不再六神无主...

10420
来自专栏null的专栏

PHP基础——字符串的常用操作

在PHP中使用trim()函数去除字符串左右的空格和特殊字符,使用rtrim()函数去除字符串右侧的空格和特殊字符,使用ltrim()函数去除字符串左侧的空格和...

14820
来自专栏null的专栏

python基础知识——控制语句

其中,raw_input()用于获取控制台的输入,由于raw_input()返回的是字符串,则在比较的时候必须使用int()转换,若是不想转换,可以直接使...

10860
来自专栏Python爬虫与数据挖掘

在windows下如何新建爬虫虚拟环境和进行scrapy安装

Scrapy是Python开发的一个快速、高层次的屏幕抓取和web抓取框架,用于抓取web站点并从页面中提取结构化的数据。Scrapy吸引人的地方在于它是一个框...

14350
来自专栏Python爬虫与数据挖掘

Windows下安装Scrapy方法及常见安装问题总结——Scrapy安装教程

这几天,很多朋友在群里问Scrapy安装的问题,其实问题方面都差不多,今天小编给大家整理一下Scrapy的安装教程,希望日后其他的小伙伴在安装的时候不再六神无主...

8930
来自专栏程序生活

Python中给函数添加元信息

我们写好一个自定义函数之后,要告诉其他人其他人怎么用这个函数,可以利用->为函数添加一些元信息,比如这个函数具体参数以及参数类型

13520
来自专栏Soul Joy Hub

《neural network and deep learning》题解——ch03 再看手写识别问题题解与源码分析

http://blog.csdn.net/u011239443/article/details/77649026

11020

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励