jQuery使用jsonp实现百度搜索的示例代码
编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要介绍了jQuery使用jsonp实现百度搜索，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
项目实现：还原百度搜索功能；
项目原理：利用json回调页面传参;
什么是jsonp：就是利用<script>标签的src地址，让目标页面回调本地页面，并且带入参数，也解决了跨域问题；
代码如下：
html（css代码不提供）
<div class="box">
<input type="text" />
<div class="ssk"></div>
<button>×</button>
</div>
js
var script,ids;
$(".box>input").on("input",inputHandler)
function inputHandler(e){
if (ids) return;
ids = setTimeout(function () {//节流
clearTimeout(ids);
ids=0;
if (script) { //删除上一次创建script标签
script.remove();
script = null;
}
script=$("<script><\/script>").attr("src",`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=
${$(".box>input").val()} &json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback`
).appendTo("body");
// 点击x按钮删除搜索框内容，并且隐藏button按钮
$("button").click(function () {
$("input").val("");
$("button").css("display", "none");
});
// 如果搜索框为空则把x按钮隐藏
if ($("input").val().length === 0) {
$("button").css("display", "none");
} else {
$("button").css("display", "block");
}
}, 500);
}
function callback(data) {
if (data) {
$(".box>.ssk").css("display", "block");
}
// 删除上一次的搜索列表
if ($(".ssk").children().length !== 0) {
$("a").remove();
}
// 遍历数组内容输出
$.each(data.s, function (index, item) {
$("<a>"+item+"</a>").appendTo(".box>.ssk");
$("a").attr('href','https://www.baidu.com/s?tn=02003390_43_hao_pg&isource=infinity&wd='+encodeURIComponent(item));
});
// 失去焦点隐藏搜索列表
$(".box>.ssk").on("mouseleave", function () {
$(".box>.ssk").css("display", "none");
});
}
- 这里目标页面是“https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=&json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback” 向百度服务器请求
- callback函数为目标服务器的回调函数，传回来的参数data是一个对象；
- callback回调函数中，传回来的data中s属性是搜索到的内容，遍历data.s数组，将每个元素的外层添加a标签，a标签的超链接为搜索到的内容，
- 改变a标签超链接的wd属性就可以搜索到对应的内容；wd传入的值需要进行编码(encodeURIComponent)处理,服务器才能给出对应内容的超链接
日常百度搜索都有wd属性，改变wd属性即可得到搜索
最终效果：
以上就是jQuery使用jsonp实现百度搜索的示例代码的详细内容，更多关于jQuery实现百度搜索的资料请关注狼蚁SEO其它相关文章！
上一篇：详解JavaScript之ES5的继承
下一篇：微信小程序拖拽排序列表的示例代码