Django-从0到1写出一个全面的网页（14）AJAX

时间：2023-05-24 08:51:01 | 来源：网站运营

时间：2023-05-24 08:51:01 来源：网站运营

Django-从0到1写出一个全面的网页（14）AJAX：

前期准备

1. 请看我的Django基础文章，用Django写出最简单的网页。可以带着大家从无到有，写出一个含有"Hello, world!"的基本网页。最基础的下载等基本操作都在这篇文章了，本系列文章属于更“高级”一点，所以不会再花时间在这方面了。

2. 本系列文章 - （1) Django-从0到1写出一个全面的网页（1）模板和静态图片

(2) Django-从0到1写出一个全面的网页（2）模型和数据库

(3) Django-从0到1写出一个全面的网页（3）模型，模板和视图

(4) Django-从0到1写出一个全面的网页（4）网页表单

(5) Django-从0到1写出一个全面的网页（5）用户身份验证

(6) Django-从0到1写出一个全面的网页（6）模板进阶

(7) Django-从0到1写出一个全面的网页（7）"饼干茶话会"

(8) Django-从0到1写出一个全面的网页（8）Redux注册

(9) Django-从0到1写出一个全面的网页（9）优化界面

(10) Django-从0到1写出一个全面的网页（10）模板标签

(11) Django-从0到1写出一个全面的网页（11）外部搜索

(12) Django-从0到1写一个全面的网页（12）跟踪，内部搜索

(13) Django-从0到1写出一个全面的网页（13）JQuery

3. How to tango with Django 1.7。这是一本英文写的手把手教你使用Django的好书，旧版本是online免费的，新版本都需要付费。本系列文章就是根据这本书提供的步骤所写，因为1.7版本很老旧，我也费了很大的功夫更新了一番。大家要是有时间，也推荐好好翻阅一下这本书。

4. django 官网。大家要是还有更多空闲时间想继续深入了解，官网必不可少。

本文目标

本文的目标是理解什么是Ajax，为什么要用Ajax，以及怎么在Django 中使用Ajax。

---

写在文前

AJAX本质上是一些技术的组合，这些技术集成在一起以减少页面的负载。Ajax 并不是让我们重新加载整个页面，而是只重新加载页面的一部分或页面中的一些数据。如果你还想了解更多关于Ajax 的介绍，可以看我的这篇文章，Django，HTML，CSS，JavaScript, jQuery, Ajax, Json - 召唤网页七葫芦娃。

注意，为了简化AJAX 请求，我们将使用JQuery库。如果你正在使用Twitter CSS引导工具包，那么JQuery 已经被添加进来了。如果没有的话，请下载最新版本的JQuery 并将其包含到你的应用程序中。

1. 基于Ajax 的功能

为了使用户与Eva 应用程序的交互更加无缝，让我们添加使用一些AJAX 的特性，例如:

• 添加一个“like”按钮，让注册用户可以“喜欢”某个特定类别
• 添加内联类别建议；这样当用户输入时，他们可以快速找到想要的类别

在我们的static/js 文件夹中，创建一个新文件，取名rango-ajax.js。

在我们的base 模板中加入

<script src="{% static "js/jquery-2.1.1.js" %}"></script><script src="{% static "js/rango-jquery.js" %}"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>应该前面就加过了，不过以防万一，就再次申明下。

2. 添加一个"like"按钮

如果我们能让已注册的用户可以表示他们“喜欢”某个特定类别，那就多了一项互动，更能博得读者欢喜了。在接下来的工作中，我们会让用户可以点击添加“喜欢”类别，但是我们不会跟踪他们“喜欢”的类别，因为我们相信他们不会多次点击“喜欢”按钮。（虽然现实中可能发生。。。）

2.1 大致流程

为了让用户有按钮点击添加喜欢的某个特定类别，我们需要如下流程：

在category.html 模板中:

• 添加一个id=" Like "的" Like "按钮。
• 添加一个模板标签{{% category。喜欢% } } 来显示喜欢的数量
• 将其放入一个id="like_count"的div 中，比如说，<divid="like_count">{{category.likes}}</div>，这将设置模板来捕获like 并显示各个类别的like。
• 注意，由于category() 视图传递了对category 对象的引用，因此我们可以使用它和模板中的{{category.likes}} 来访问like 的数量

创建一个名为like_category 的视图，它将检查请求并选择相应的category_id，然后为该类别增加like的数量。

• 添加url映射；举个栗子，将like_category 视图映射到eva/like_category/。这里的GET 请求将是eva/like_category/?category_id=XXX
• 这个视图不会返回HTML 页面，而是会返回该类别的更新后的“喜欢”总数。

在“rango-ajax.js" 中添加JQuery 代码来执行AJAX GET请求。

• 如果请求成功，则更新#like_count元素，并隐藏like按钮。

2.2 更新类别模板

为了更新模板，我们需要添加id="Like"按钮，并创建一个<div> 来显示Like 的数量 {{%category.likes%}}。为此，将以下<div> 添加到category.html 模板中:

<p><strong id="like_count">{{ category.likes }}</strong> people like this category{% if user.is_authenticated %} <button id="likes" data-catid="{{category.id}}" class="btn btn-primary" type="button"> <span class="glyphicon glyphicon-thumbs-up"></span> Like </button>{% endif %}</p>显示效果：

2.3 创建一个喜欢类别视图

在eva/views.py 中创建一个名为like_category 的视图。它将用来检查请求并选择正确的category_id，然后为该类别增加like的数量。

# 下面这一行我们先前已经加上了，不过以防万一，还是写在这了from django.contrib.auth.decorators import login_required@login_requireddef like_category(request): cat_id = None if request.method == 'GET': cat_id = request.GET['category_id'] likes = 0 if cat_id: cat = Category.objects.get(id=int(cat_id)) if cat: likes = cat.likes + 1 cat.likes = likes cat.save() return HttpResponse(likes)在检查代码时，我们将看到上面的代码只允许经过身份验证的用户表示他们喜欢某个类别。上面这个视图假设我们通过GET 传递了一个变量category_id，目的是让我们能够识别要更新的类别。在这个视图中，如果我们愿意，我们还可以跟踪并记录某个用户“喜欢”的这个类别——但在这儿，我们仍然希望保持简单，只关注AJAX 机制。

当然别忘了在eva/urls.py 中更新我们的URL 映射：

path('like_category/', views.like_category, name='like_category'),现在，当我们登录之后，效果如下图：

看着很赞，但是还没有加上我们的Ajax 机制，所以并没有实际的效果。

2.4 添加Ajax 请求机制

现在在rango-ajax.js 文件中，我们需要添加如下JQuery 代码来完成Ajax GET 请求：

$('#likes').click(function(){ var catid; catid = $(this).attr("data-catid"); $.get('/eva/like_category/', {category_id: catid}, function(data){ $('#like_count').html(data); $('#likes').hide(); });});上面这段JQuery 代码将向id 为#like 的元素添加一个事件处理程序，即按钮。单击它时，它将从按钮元素中提取类别id，然后发出AJAX GET 请求，该请求将调用/eva/like_category/ 对请求中的category_id 进行编码。如果请求成功，那么id 为like_count 的HTML 元素将会更新请求返回的数据，并隐藏id 为like 的HTML 元素。

现在如果登录后的用户点击了大拇指点赞按钮，按钮就会消失，并显示多少人已经喜欢这个类别：

3. 添加内联类别建议 Inline Category Suggestions

如果我们能够提供一种更快速的方式让用户找到一个类别，而不是浏览一长串的列表再选择想要浏览的类别，那对用户而言就更友善了。

要做到这一点，我们可以创建一个建议元素，这样当用户输入一个字母或单词的一部分，系统就会通过提供建议类别的列表进行响应，然后用户可以从中选择。具体点来说，就是当用户输入时，将向服务器发出一系列请求，以获取与用户输入内容相关的建议类别。

3.1 参数化Get 类别列表函数

在这个helper 函数中，我们将使用一个过滤器来查找所有以提供的字符串开头的类别。我们将使用的过滤器是istartwith，这同样可以保证我们使用大写字母或小写字母都不影响查找。同样地，在未来，如果考虑字母是否为大写字母对我们的网页很重要的话，我们也可以用startswith来代替。

在eva/views.py 文件中添加如下代码：

def get_category_list(max_results=0, starts_with=''): cat_list = [] if starts_with: cat_list = Category.objects.filter(name__istartswith=starts_with) if cat_list and max_results > 0: if cat_list.count() > max_results: cat_list = cat_list[:max_results] return cat_list3.2 创建建议类别视图

使用get_category_list 程序，这样我们就可以创建一个视图来返回前3位最相关的搜索答案：

def suggest_category(request): cat_list = [] starts_with = '' if request.method == 'GET': starts_with = request.GET['suggestion'] cat_list = get_category_list(3, starts_with) return render(request, 'rango/cats.html', {'cat_list': cat_list })rango/cats.html 是我们先前就创建好的文件，如果有忘记掉它存在的，可以打开看看。

3.3 URL 映射

将下面代码加入到eva/urls.py 文件中的urlpatterns 里：

path('suggest_category/', views.suggest_category, name='suggest_category'),3.4 更新基础模板

在base 模板中的sidebar div 里添加如下HTML 代码：

<div class="col-sm-3 col-md-2 sidebar"> {% block side_block %} </br> </br> {% get_category_list category %} {% endblock %} <ul class="nav nav-list"> <li class="nav-header">Find a Category</li> <form> <label></label> <li><input class="search-query span10" type="text" name="suggestion" value="" id="suggestion" /></li> </form> </ul> <div id="cats"> </div></div>在这里，我们添加了一个输入框，id="suggestion" 和id="cats" 的div，我们将在其中显示响应。我们不需要添加按钮，因为我们将在keyup 上添加一个事件处理程序到发送建议请求的输入框。

3.5 添加Ajax 到请求建议

添加如下JQuery 代码到js/rango-ajax.js 中：

$('#suggestion').keyup(function(){ var query; query = $(this).val(); $.get('/eva/suggest_category/', {suggestion: query}, function(data){ $('#cats').html(data); });});现在的效果展示如下：

但是就像图片上面显示的一样，每次我在框中输入目标名字，都会显示“There are no category present.”有知道的原因的小伙伴们欢迎在底下留言分享，谢谢！

后端显示如下：

[29/Aug/2018 22:02:32] "GET /eva/suggest_category/?suggestion=django HTTP/1.1" 200 77

---

现在你只需要温习一下本系列的第一篇，第二篇，第三篇，第四篇，第五篇，第六篇，第七篇，第八篇，第九篇，第十篇，第十一篇，第十二篇，第十三篇和本篇文章；并期待我们的下一篇 Django-从0到1写出一个全面的网页（15）自动测试。




如果你觉得我的文章有用，顺手点个赞，关注下我的专栏或则留下你的评论吧！