赵走x博客 - 开发者的网上家园

15、使用 jQuery 处理 Ajax 请求

资源编号:76322 人工智能深入浅出Python机器学习热度：38

Ajax 是一项综合技术，旨在减少页面加载次数。使用 Ajax，重新加载的不是整个页面，而是页面中的部分内容或数据。如果你没用过 Ajax，或者想在使用之前进一步了解，请阅读 Mozilla 网站中的资料。

Ajax 是一项综合技术，旨在减少页面加载次数。使用 Ajax，重新加载的不是整个页面，而是页面 中的部分内容或数据。如果你没用过 Ajax，或者想在使用之前进一步了解，请阅读 [Mozilla 网站](https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX "Mozilla 网站") 中的资料。

为了简化处理 Ajax 请求的过程，我们将使用 jQuery 库。注意，如果你使用了 Twitter Bootstrap， 那就已经添加了 jQuery。我们使用的是 jQuery 3。如果不想引用在线版，可以把 jQuery 库下载到 本地，保存在项目的 static/js/ 目录中。

# 16.1 通过 Ajax 实现的功能

为了提升 Rango 应用的现代感，我们将使用 Ajax 实现一些功能，例如：

❏ 添加“Like”按钮，让注册用户为分类点赞。

❏ 添加行内分类建议，让用户在输入的过程中快速找到某个分类。

❏ 在搜索结果中添加“Add”按钮，方便注册用户把网页添加到分类中。

在 static/js/ 目录中新建一个文件，命名为 rango-ajax.js。在基模板中添加下述内容：
```
<script src="{% static "js/jquery.min.js" %}"></script> <script src="{% static "js/rango-ajax.js" %}"></script>
```
这里，我们假设你把 jQuery 库下载到本地了。此外还可以直接引用线上版本：
```
<script src="https://cdn.staticfile.org/jquery/3.0.0/jquery.min.js"> </script>
```
如果你使用 Bootstrap，滚动到模板文件的底部，你会看到引用 jQuery 库的代码。在 jQuery 库之后引入 rango-ajax.js 文件。

至此，我们引入了 jQuery，也有位置编写客户端 Ajax 代码了。下面开始修改 Rango 应用。

# 16.2 添加点赞按钮

允许注册用户表示他们“喜欢”某个分类是个不错的功能。我们将实现为分类“点赞”的功能，但不 记录用户为哪些分类点了赞。注册用户可以不断刷新页面，多次点击点赞按钮。如果想记录用户 点赞了哪些分类，要再定义一个模型，还需要其他辅助设置。这留作练习给你完成。

### 基本流程

让用户为分类点赞的基本过程如下：

❏ 打开 category.html 模板，添加“Like”按钮，把 ID 设为 like；添加一个模板标签，显示点赞 次数：{{% category.likes %}}；把点赞次数放在 ID 为 like_count 的 div 元素中：`<div id="like_count">{{ category.likes }}</div>`。category() 视图传入了分类对象，因此在 模板中可以通过 {{ category.likes }} 访问点赞次数。

❏ 编写一个视图，命名为 like_category()，从请求中获取 category_id 参数，增加对应分类 的点击次数。这个视图不返回 HTML 页面，而是返回对应分类的点赞次数。

❏ 把 like_category() 视图映射到一个 URL 上，例如 rango/like/。那么 GET 查询参数为 rango/like/?category_id=XXX。

❏ 在 rango-ajax.js 文件中编写 jQuery 代码，执行 Ajax GET 请求。如果请求成功，更新 #like_count 元素，并隐藏点赞按钮。

### 修改分类页面的模板

我们要在模板中添加“Like”按钮，并把按钮的 ID 设为 like。此外，还要添加一个 `<div>` 元素，显 示点赞次数。打开 category.html 模板文件，在 <h1>{{ category.name }}</h1> 下方添加下述代 码：
```
<div>
	<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 btn-sm" type="button">
				Like
		</button>
	{% endif %} 
</div>
```

### 编写视图

在 rango/views.py 模块中编写一个新视图，命名为 like_category()。这个视图从请求中获取 category_id 参数，然后增加对应分类的点赞次数。
```
from django.contrib.auth.decorators import login_required

@login_required 
def 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)
```
可以看到，我们只允许通过身份验证的用户访问这个视图，因为视图上面有 @login_required 装 饰器。

注意，这个视图假定 GET 请求参数中有 category_id 变量，以此标识要更新的分类。这里还可以 记录是哪个用户点的赞，不过为了集中精力讲解 Ajax，一切从简。

别忘了在 rango/urls.py 模块中添加 URL 映射。在 urlpatterns 列表中添加：
```
url(r'^like/$', views.like_category, name='like_category'),
```

### 发起 Ajax 请求

现在要在 rango-ajax.js 文件中添加一些 jQuery 代码，执行 Ajax GET 请求。
```
$('#likes').click(function(){

var catid; catid = $(this).attr("data-catid");
$.get('/rango/like/', {category_id: catid}, function(data){
	$('#like_count').html(data);
	$('#likes').hide(); });
});
```
这段 jQuery/JavaScript 代码为 #likes 元素添加一个事件句柄。点击这个按钮后，从按钮元素中提 取分类 ID，然后向 /rango/like/ 发起 Ajax GET 请求，并在请求中编码 category_id。如果请求成 功，使用返回的数据更新 #like_count 元素的内容，并把 #likes 元素隐藏起来。

这里涉及很多知识，而且 Ajax 对页面结构有一定的要求，容易出错。简单而言，点击按钮后，我 们通过 Ajax 请求一个 URL，触发 like_category() 视图更新分类，返回点赞次数。Ajax 请求收 到响应后，更新页面中的部分内容，即点赞次数，并把 #likes 按钮隐藏起来。

# 16.3 添加行内分类建议

现在，用户要在一个长列表里寻找自己感兴趣的分类，如果能提供一种快速查找分类的方法就好 了。为此，我们可以在用户输入的过程中向服务器发送请求，获取一些分类建议，让用户选择。

### 基本流程

实现行内分类建议的基本步骤如下：

❏ 定义一个带参数的函数，命名为 get_category_list(max_results=0,starts_with='')，如 果 max_results=0，返回所有以 starts_with 开头的分类；否则，最多返回 max_results 个 分类。

❏ 编写一个视图，命名为 suggest_category()，通过查询字符串获取分类。

• 假设是 GET 请求，尝试访问 query 参数。

• 如果 query 参数不为空，从 Category 模型中获取以此开头的前 8 个分类。

• 通过模板显示分类列表。

• 不要新建模板了，可以继续使用 cats.html，毕竟显示的是同种数据（即分类）。

• 为了让客户端请求数据，要添加一个 URL 映射，姑且称之为 suggest 吧。

在此之后，要更新 base.html 模板，加上分类搜索框。然后编写一些 JavaScript/jQuery 代码，获取 分类列表，在用户输入的过程中显示。

打开 base.html 模板，修改侧边栏，添加一个 `<div>` 元素，ID 为 cats，用于显示建议的分类。这 个元素的内容由 jQuery/JavaScript 更新。在这个 `<div>` 元素前面添加一个搜索框，供用户输入想 搜索的分类。
```
<input class="input-medium search-query" type="text" name="suggestion" value="" id="suggestion" />
```
在模板中添加这些元素之后，编写 jQuery 代码，在用户输入的过程中更新分类列表。

为 #suggestion 输入框注册一个按键事件句柄：$('#suggestion').keyup(function(){ … })。在键 盘回升时通过 .get() 函数发起一个 Ajax 请求（$(this).get(…)），获取更新的分类列表。如果请 求成功，使用 .html() 函数，把 #cats 元素的内容替换掉（$('#cats').html(data)）。

### 定义辅助函数

我们可以定义一个辅助方法，使用过滤器查找以指定字符串开头的分类。我们要使用的过滤器是 istartwith，即不区分字母的大小写。如果想区分大小写，使用 startswith。
```
def get_category_list(max_results=0, starts_with=''):
		cat_list = [] 
		if starts_with:
				cat_list = Category.objects.filter(name__istartswith=starts_with)

if max_results > 0:
				if len(cat_list) > max_results:
						cat_list = cat_list[:max_results] 
		return cat_list
```

### 编写视图

编写一个视图，调用 get_category_list() 函数，获取匹配条件的前 8 个分类。
```
def suggest_category(request):
		cat_list = [] 
		starts_with = ''

if request.method == 'GET':
				starts_with = request.GET['suggestion'] 
		cat_list = get_category_list(8, starts_with)
		return render(request, 'rango/cats.html', {'cats': cat_list })
```
注意，这个视图重用了 rango/cats.html 模板。

### 映射 URL

打开 rango/urls.py 模块，把下述代码添加到 urlpatterns 列表中：
```
url(r'^suggest/$', views.suggest_category, name='suggest_category'),
```

### 更新基模板

在基模板的侧边栏中添加下述 HTML 标记：
```
<ul class="nav nav-list flex-column"> 
		<li class="nav-item">Type to find a category</li> 
		<form> 
				<li class="nav-item">
						<input class="search-query form-control" 
								type="text" name="suggestion" value="" id="suggestion" /> 
				</li> 
			</form> 
</ul> 
<hr>

<div id="cats"> </div>
```
我们添加了一个 ID 为 suggestion 的输入框，以及一个 ID 为 cats 的 `<div> `元素，用于显示分类 建议。这里无需添加按钮，因为我们将为输入框的按键事件注册一个事件句柄，通过 Ajax 获取分类建议。

把模板中的下面三行代码删除：
```
{% block sidebar_block %}
{% get_category_list category %}
{% endblock %}
```
### 通过 Ajax 请求获取分类建议

在 js/rango-ajax.js 文件中添加下述 jQuery 代码：
```
$('#suggestion').keyup(function(){ 
		var query; query = $(this).val();
		$.get('/rango/suggest/', {suggestion: query}, function(data){ 
		$('#cats').html(data); }); 
		});
```
我们为 ID 为 suggestion 的输入元素注册了一个句柄，在按键回升事件触发时执行。该事件触发 时，把输入框中的内容赋值给 query 变量，然后向 /rango/suggest/ 发起 Ajax GET 请求。如果请求 成功，更新 ID 为 cats 的元素，把里面的内容替换为得到的分类建议。

![bs64](https://img.handsomemark.com/2020/02/18/b52c195a-5262-11ea-915f-0242ac140002.png)
图 16-1：行内分类建议示例。注意建议的分类在输入的过程中是有变化的。