利用 jsonp 实时获取搜索数据
2017-12-24 本文已影响56人
大白杏仁
我们经常在搜索框输入文字时，不需要点击搜索，下面就可以实时显示搜索到的相关信息。之前觉得这个功能提高了很大效率很炫酷，接触了前端发现原来实现也很简单。
jsonp的东西我自己是讲不清的毕竟是个了解。通常用 Ajax 在不刷新页面的情况下刷新局部页面，但是 Ajax 只能请求跟网页同一个服务器里的资源，所以要用到可以跨域请求的 jsonp，简而言之就是可以在某一网页中随意请求其他服务器里的资源，来局部更新当前页面。
1. 结果（非常简陋）：
示例
2. 简单步骤：
- 监听输入框输入文字
- 利用
jsonp调用 360搜索 并获得结果 -
jquery操作 DOM 显示搜索结果
3. 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
// keyup 监听输入框
$('.input').keyup(function() {
var input = $(this).val();
$.ajax({
url: 'https://sug.so.360.cn/suggest?encodein=utf-8&encodeout=utf-8',
type: 'GET', // 请求类型
dataType: 'jsonp',
data: { word: input}
})
.done(function(data) {
response = data.s; // 获取返回结果
$('.con').empty(); // 清空输入框
// 把所有结果添加到列表
for (var i = 0; i < response.length; i++) {
var $li = $('<li>' + response[i] + '</li>');
$('.con').append($li);
}
})
.fail(function() {
alert('error');
});
});
});
</script>
</head>
<body>
<input type="text" class="input">
<ul class="con"></ul>
</body>
</html>
4. 说明：
-
jquery把jsonp封装在ajax中，两者其实毫无关系，只是用起来更方便更舒服 - 传递的 url 可以自己在浏览器控制台获取，同理可以获取其他浏览器的
url 做个不同版本的搜索 -
data以键值对的形式传递数据：键word是抓取360搜索时得到的 url ,是固定的；比如360搜索 ‘1’ 时得到 url ：https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=1，word=1就是传递过去的数据，另外要加上encodein=utf-8&encodeout=utf-8，不然 jsonp 输入中文时返回结果会是乱码 -
.done方法在成功获得数据时执行，.fail方法在产生错误时执行 -
.done方法里获取data.s才可以得到想要的搜索结果，是因为服务器返回的完整数据是这样的 (比如搜索 ‘1’)
jQuery172023165242407540276_1514127784930({q:"1",p:true,s:["163",
"1688阿里巴巴批发网","1688",
"163邮箱登录","1688阿里巴巴","12306网上订票官网",
"12306","126","126邮箱登录","139邮箱登录"]});
总的来说还是灰常简单滴~
Nicelle Beauchene
New York, United States
