首页 > 代码库 > django的前后的结合，search搜索功能案例
django的前后的结合，search搜索功能案例
利用django的Q（）功能可以很好的展开搜索功能
假设我要做个这样的搜索功能
那么思路是怎么样的？
前端获取 --》输入 --》ajax后台获取 --》进行搜索 --》将值返回后台 ---》ajax在进行处理传到页面
那我们就来看看代码
前端的代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .left{ float: left; } .clearfix:after{ content: ‘.‘; clear: both; display: block; visibility: hidden; height: 0; } </style></head><body> <div class="condition"> <div class="item clearfix"> <div class="icon left" onclick="AddCondition(this);">+</div> <div class="left"> <select onchange="ChangeName(this);"> <option value=http://www.mamicode.com/"name">书名</option> <option value=http://www.mamicode.com/"book_type__caption">图书类型</option> <option value=http://www.mamicode.com/"price">价格</option> <option value=http://www.mamicode.com/"pages">页数</option> </select> </div> <div class="left"><input type="text" name="name" /></div> </div> </div> <div> <input type="button" onclick="Search();" value=http://www.mamicode.com/"搜索" /> </div> <div class="container"></div> <script src=http://www.mamicode.com/"/static/js/jquery-1.12.4.js"></script> <script> function AddCondition(ths) { var new_tag = $(ths).parent().clone();//克隆 new_tag.find(‘.icon‘).text(‘-‘); //更改+ 为- new_tag.find(‘.icon‘).attr(‘onclick‘, ‘RemoveCondition(this);‘); //属性什么等于什么 $(ths).parent().parent().append(new_tag);//添加 } function RemoveCondition(ths) {//删除 $(ths).parent().remove(); } function ChangeName(ths) {//改变名称就触发 var v = $(ths).val();//得到值 $(ths).parent().next().find(‘input‘).attr(‘name‘,v);//改变属性name的值为v } function Search() { var post_data_dict = {};//定义一个{} // 获取所有input的内容，提交数据 $(‘.condition input‘).each(function () {//循环 // console.log($(this)[0]) var n = $(this).attr(‘name‘);//得到属性值 var v = $(this).val();//得到val值 var v_list = v.split(‘，‘);//，分割 post_data_dict[n] = v_list;//定义一个列表 }); console.log(post_data_dict); var post_data_str = JSON.stringify(post_data_dict); $.ajax({ url: ‘/app03/index/‘, type: ‘POST‘, data: { ‘post_data‘: post_data_str}, dataType: ‘json‘,
success: function (arg) { // 字符串 "<table>" + if(arg.status){ var table = document.createElement(‘table‘); table.setAttribute(‘border‘,1); // [{,name,pubdate,price,caption},] $.each(arg.data, function(k,v){ var tr = document.createElement(‘tr‘); var td1 = document.createElement(‘td‘); td1.innerText = v[‘name‘]; var td2 = document.createElement(‘td‘); td2.innerText = v[‘price‘]; var td3 = document.createElement(‘td‘); td3.innerText = v[‘book_type__caption‘]; var td4 = document.createElement(‘td‘); td4.innerText = v[‘pubdate‘]; tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tr.appendChild(td4); table.appendChild(tr); }); $(‘.container‘).empty(); $(‘.container‘).append(table); }else{ alert(arg.message); } } }) } </script></body></html>
后端的代码：
import jsonfrom datetime import datefrom datetime import datetimefrom decimal import Decimalclass JsonCustomEncoder(json.JSONEncoder): def default(self, field): if isinstance(field, datetime): return field.strftime(‘%Y-%m-%d %H:%M:%S‘) elif isinstance(field, date): return field.strftime(‘%Y-%m-%d‘) elif isinstance(field, Decimal): return str(field) else: return json.JSONEncoder.default(self, field)def index(request): if request.method == ‘POST‘: ret = {‘status‘: False, ‘message‘: ‘‘, ‘data‘:None} try: post_data = request.POST.get(‘post_data‘,None) post_data_dict = json.loads(post_data) print(post_data_dict) # {‘name‘: [‘11‘, ‘sdf‘]，‘price‘: [‘11‘, ‘sdf‘]} # 构造搜索条件 from django.db.models import Q con = Q() for k,v in post_data_dict.items(): q = Q() q.connector = ‘OR‘ for item in v: q.children.append((k, item)) con.add(q, ‘AND‘) """ ret = models.Book.objects.filter(con) print(ret) # queryset,[对象] #就是上面是列表 from django.core import serializers #这种方法是django的自己的序列化方法，但是有个缺点，下面这句的ret只能是对象，所以只能用第二种方式 data = http://www.mamicode.com/serializers.serialize("json", ret) print(type(data),data) # 字符串 """ """ #ret = models.Book.objects.filter(con).values(‘name‘,‘book_type__caption‘) ret = models.Book.objects.filter(con).values_list(‘name‘, ‘book_typ__ecaption‘) print(ret,type(ret)) li = list(ret) #这种方式也有一个缺点，就是date和小数的时候不能序列化，所以需要自定义类并继承 data = http://www.mamicode.com/json.dumps(li)>""" print(type(con)) result = models.Book.objects.filter(con).values(‘name‘,‘price‘,‘pubdate‘,‘book_type__caption‘) # ret = models.Book.objects.filter(con).values_list(‘name‘, ‘book_type__caption‘) li = list(result) ret[‘status‘] = True ret[‘data‘] = li except Exception as e: ret[‘message‘] = str(e) ret_str = json.dumps(ret, cls=JsonCustomEncoder) return HttpResponse(ret_str) return render(request, ‘input.html‘)
django的前后的结合，search搜索功能案例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。