先写个简易的demo了解下jsonp的原理
接下来看看百度是如何实现搜索的
将链接打开获得以下内容:
这里和前面的原理是一样的,能获取json对象
sp0.baidu.com是百度的二级域名
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su是百度搜索的接口
这里我们只需要传递关键词,修改下cb换成自己的getvalue方法:
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=csdn&cb=getvalue
//实现智能提示
$("input.wd").on("input",function(){
//清空https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=为开头的script
$("script[src^='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=']").detach();
//跨域百度搜索
$("<script src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+$(".wd").val()+"&cb=getvalue'>").appendTo("head");
});
结果就出来了,开心(*^▽^*)
接下来就是将结果附在搜索栏下方
function getvalue(json){
//先清空前面的搜索结果
$(".search-result").html("");
//再将当前的搜索结果附上去
json.s.forEach(function(s){
$(".search-result").append($("<li>"+s+"</li>"));
});
}
哈哈哈!完成!!☟☟☟
使用jsonp就更简单了
$(".wd").on("input",function () {
var text = $(this).val();
//借助script标签漏洞,实现跨域请求
$.ajax({
url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+text+"&cb=getvalue",
dataType:"jsonp",
type:"post",
jsonp:"cb",
success:function (data) {
console.log(data);
},
error:function (err) {
}
});
});