ajax发送请求(关于搜索引擎)
django的后端models
from django.db import models
class Car_Home(models.Model):
#标题
title = models.CharField(max_length=64)
#简介
summary = models.CharField(max_length=512)
#网页地址
a_url = models.CharField(max_length=64)
#图片地址
img_url = models.CharField(max_length=64)
#类型
tags = models.CharField(max_length=32)
django的后端函数
from django.shortcuts import render,HttpResponse
from django.http.response import JsonResponse
from web import models
def search_list(request):
if request.method == 'POST':
# 拿到ajax发送过来的数据,第一个是查找的内容,第二个是什么类型的内容
content = request.POST.get('search_input')
tags = request.POST.get('tags')
#查找全部的信息
if tags == 'all':
cars_obj = models.Car_Home.objects.filter(title__contains=content)
lis = []
for i in cars_obj:
lis.append(i.title)
return JsonResponse({"msg": lis})
#查找特定的类型信息
else:
cars_obj = models.Car_Home.objects.filter(title__contains=content,tags=tags)
lis = []
for i in cars_obj:
lis.append(i.title)
return JsonResponse({"msg": lis})
return render(request, 'search_ajax.html')
django的前端(search_ajax.html)文件
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度搜索</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-2">
<h2 style="color: blue">百度搜索</h2>
</div>
<div class="col-md-4 col-md-offset-4" id="d2">
</div>
</div>
</div>
<div class="container" style="margin-top: 20px">
<div class="row">
{% csrf_token %}
<div class="col-md-6">
<input type="text" placeholder="请输入要查找的内容" class="form-control" id="search_input">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">全部</a></li>
<li role="presentation"><a href="#">新闻</a></li>
<li role="presentation"><a href="#">驾驶</a></li>
<li role="presentation"><a href="#">建议</a></li>
<li role="presentation"><a href="#">技术</a></li>
<li role="presentation"><a href="#">调整</a></li>
<li role="presentation"><a href="#">文化</a></li>
</ul>
</div>
<div class="col-md-2">
<button class="btn btn-primary" id="baidu">百度一下</button>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6" id="d1">
</div>
</div>
</div>
</body>
<script src="{% static 'js/jquery-3.3.1.min.js' %} "></script>
<script>
$('li').click(function () {
$('li').removeClass('active');
$('#d2').text('');
$(this).addClass('active');
func1()
});
$('#baidu').click(function () {
func1()
});
function func1(){
//获取要查询的内容
var search = $('#search_input').val();
//获取要查询的内容的类型
var dic = {'全部':'all','新闻':'news', '驾驶':'drive', '建议':'advice', '技术':'tech', '调整':'tuning', '文化':'culture'};
var tags = dic[$(".active").text()];
//请求头放入csrf_token,使post方法可以执行
var csrf_token = $('input[name=csrfmiddlewaretoken]').val();
console.log(search);
$.ajax({
url:"{% url 'search_list' %}",
type:'post',
data:{
'search_input':search,
'tags':tags,
'csrfmiddlewaretoken':csrf_token
},
success:function (res) {
if (res) {
sg = '';
l = res.msg.length;
for (var i = 0; i < l; i++) {
sg = sg + "<h3 style='color: red;margin-top:20px'>" + res.msg[i] + "</h3>";
}
sg2 = "<span style=\'color: gold\'>" + "您查询到了" + l + "条结果</span>";
$('#d1').html(sg);
$('#d2').html(sg2)
}
}
})
}
</script>
</html>
