一、什么是组合搜索
我们在很多网站都可以找到组合搜索的功能，例如博客园、汽车之家等。
![[Python自学] day-24 (1) (组合搜索、JSONP)_第1张图片](http://img.e-com-net.com/image/info8/7f6b8f71f36540aeb3be76b55ccc26f3.png)
在汽车的组合搜索中，可以看到有 价格、级别、国别、品牌、结构等过滤条件。
这些条件我们可以认为都对应数据库的一张表（实际上静态的条件可以放内存）。
当我们选择条件时，页面所展示的内容要根据我们选择的条件进行过滤（对应数据库中过滤条件）。
![[Python自学] day-24 (1) (组合搜索、JSONP)_第2张图片](http://img.e-com-net.com/image/info8/09bc6fc354fe47bd8b782e3de0ce7a5b.jpg)
二、如何实现的
1.观察实例
我们在选择各种过滤条件的时候，观察浏览器的URL变化：
可以发现，当我们全部选择 "不限" 的时候，URL变为：
list后面的所有数字全部变为0。说明，各项条件中"不限"对应的状态数字就是0。在数据库中自增ID是从1开始的，所以0用于表示ALL（即不过滤）。
当我们选择一些条件时，例如选择国别为中国，级别为微型车，可以看到URL变为：
也就是说这些数字就代表了我们选择的条件。对应在数据库中，该条件对应的ID就是这个数字。
2.实现思路
1）页面上分别将所有的条件列举出来
2）当我们点击某个条件时，触发事件，获取所有条件对应的ID，然后串在一起。并请求页面，将串在一起的字符串作为请求URL的一部分。
3）路由系统通过正则表达式可以获取到每个条件的ID，然后通过参数传递给视图函数。
4）视图函数将获得的条件ID作为数据库查询条件，查询对应的内容。
三、实现一个简单的组合搜索
HTML代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Indextitle>
<style>
.condition{
padding: 5px;
}
/*a标签的默认样式*/
.condition a{
display: inline-block;
padding: 3px 5px;
text-decoration: none;
color: #3B5998;
}
style>
head>
<body>
<div style="width: 800px;margin:0 auto;border: 1px solid #dddddd">
<h2>过滤条件h2>
<div class="condition">
<a id="a_cate_0" href="/app01/index-0-{{ last_args.article_type_id }}/">不限a>
{% for row in category_list %}
<a id="a_cate_{{ row.id }}" href="/app01/index-{{ row.id }}-{{ last_args.article_type_id }}/">{{ row.caption }}a>
{% endfor %}
div>
<div class="condition">
<a id="a_art_0" href="/app01/index-{{ last_args.category_id }}-0/">不限a>
{% for row in article_type_list %}
<a id="a_art_{{ row.id }}" href="/app01/index-{{ last_args.category_id }}-{{ row.id }}/">{{ row.caption }}a>
{% endfor %}
div>
<h2>查询结果h2>
<ul>
{% for row in result %}
<li style="padding: 10px;">
<div style="font-weight: bold;">{{ row.title}}div>
<div>
{{ row.content }}
div>
li>
{% endfor %}
ul>
div>
<script src="/static/js/jquery-1.12.4.js">script>
<script>
$(function(){
// 每次请求的页面，一加载完，就将该页面对应的过滤条件标签染色
$("#a_cate_{{ last_args.category_id }}").css("background-color","#3B5998").css("color","white");
$("#a_art_{{ last_args.article_type_id }}").css("background-color","#3B5998").css("color","white");
})
script>
body>
html>
路由：
urlpatterns = [ re_path('^index-(?P\d+)-(?P ', views.index), ]\d+)/$
视图函数代码：
def index(request, **kwargs): # 获取参数，如果为0，为不限，则不加入过滤条件中 condition_dict = {} for k, v in kwargs.items(): if v != '0': condition_dict[k] = v # 获取所有的category、article_type_list和博客内容 category_list = models.Category.objects.all() article_type_list = models.ArticleType.objects.all() result = models.Article.objects.filter(**condition_dict) # 将过滤条件和内容，以及该次请求的id传回页面 return render(request, 'index.html', {'result': result, 'category_list': category_list, 'article_type_list': article_type_list, 'last_args': kwargs})
实现效果：
![[Python自学] day-24 (1) (组合搜索、JSONP)_第3张图片](http://img.e-com-net.com/image/info8/4a4a5b5be9f54c3e9820f7a95edb538d.jpg)
四、JSONP
JSON是一种数据格式，用于不同语言程序之间可以传递数据。
JSONP是一种操作方式（或者说是一种技巧）。
1.跨域请求数据
跨域请求数据，我们可以才用以下两种方式：
1）我们在视图函数中使用requests包，来请求其他网站提供的数据接口。（可行）
2）直接使用前端JS代码来请求其他网站的数据接口。（直接使用Ajax来请求不可行）
为什么第二种方式不可行：
因为AJAX直接请求跨域数据接口，浏览器会拒收其返回的响应数据。浏览器报错：
2.什么是JSONP
当我们想直接使用前端Ajax来请求跨域的API时（返回JSON数据，例如天气网站提供的接口），浏览器会拒收这种方式的响应，我们无法获取到数据。
在这种情况下，我们发现有个取巧的地方，虽然浏览器阻止直接使用Ajax请求，但使用