ajax django json数据传输模仿百度搜索

最新推荐文章于 2022-06-07 17:01:00 发布

nicolefeng

最新推荐文章于 2022-06-07 17:01:00 发布

阅读量336

点赞数

分类专栏： django

本文链接：https://blog.csdn.net/nicolefeng/article/details/79918713

版权

django 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

---------------------------------------------------------------View

#coding=utf-8

import json
from django.core import serializers

from django.http import HttpResponse
from django.shortcuts import render, render_to_response

# Create your views here.
from django.views.decorators.csrf import csrf_exempt
from baidu.models import baidusearch

@csrf_exempt
def index(request):
return render(request,"aa.html")
@csrf_exempt
def find(request):
func=request.GET.get('keywords')
userinfo = baidusearch.objects.all()
result = list()
for i in userinfo:
result.append(i.title) ;

data={"s":result}
temp = '%s(%s)' % (func, result)
print(data)

return HttpResponse(json.dumps(data),content_type="application/json")

---------------------------------------------------------------html

{% load staticfiles %}
<!DOCTYPE html>
<meta charset="utf8">
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>

<style type="text/css">
#word{
position: absolute;
z-index: 99;
width: 145px;
height: auto;
background-color: white;
border: black solid 1px;
display: none;
}
.click_work{
padding-bottom: 8px;
font-weight:lighter;
font-size: 13px;
cursor:pointer;/*鼠标放上变成小手*/
}
.click_work:hover{
color: orange;
background-color: gray;
}
.error{
color: gray;
cursor:pointer;/*鼠标放上变成小手*/
}
</style>

<body>

<center>
<h1>百度</h1>
</center>
<table align="center" cellspacing="0" cellpadding="10" border="0" >
<tr>
<td style="position: relative;">
<input id="text" type="text" placeholder="搜索">
<input type="button" value="Go">
<div id="word"></div>
</td>
</tr>
</table>

<script type="text/javascript" src="{% static 'js/jquery-3.0.0.js' %}"></script>


</body>
<script>
$(function(){
//当键盘键被松开时发送Ajax获取数据
$('#text').keyup(function(){
var keywords = $(this).val();
if (keywords=='') { $('#word').hide(); return };
$.ajax({

url: 'http://suggestion.baidu.com/su?wd=' + keywords,
dataType: 'jsonp',
jsonp: 'cb', //回调函数的参数名(键值)key
// jsonpCallback: 'fun', //回调函数名(值) value
beforeSend:function(){
$('#word').append('<div>正在加载。。。</div>');
},
success:function(data){
$('#word').empty().show();
if (data.s=='')
{
$('#word').append('<div class="error">Not find "' + keywords + '"</div>');
}
$.each(data.s, function(){
$('#word').append('<div class="click_work">'+ this +'</div>');
})
},
error:function(){
$('#word').empty().show();
$('#word').append('<div class="click_work">Fail "' + keywords + '"</div>');
}
})
})
//点击搜索数据复制给搜索框
$(document).on('click','.click_work',function(){
var word = $(this).text();
$('#text').val(word);
$('#word').hide();
// $('#texe').trigger('click');触发搜索事件
})

})

</script>
</html>

nicolefeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax django json数据传输模仿百度搜索

---------------------------------------------------------------View#coding=utf-8import jsonfrom django.core import serializersfrom django.http import HttpResponsefrom django.shortcuts import render, r...
复制链接

扫一扫

专栏目录