jq使用jsonp实现百度搜索

2021-03-09 06:30

阅读:726

标签:href   tps   回调函数   uri   跨域   inpu   添加   htm   回调   

项目实现:还原百度搜索功能;

项目原理:利用json回调页面传参;

什么是jsonp就是利用

代码如下:

html(css代码不提供)

1 div class="box">
2       input type="text" />
3       div class="ssk">div>
4       button>×button>
5 div>

js

 1 var script,ids;
 2       $(".box>input").on("input",inputHandler)
 3       function inputHandler(e){
 4         if (ids) return;
 5         ids = setTimeout(function () {//节流
 6           clearTimeout(ids);
 7           ids=0;
 8           if (script) { //删除上一次创建script标签
 9             script.remove();
10             script = null;
11           }
12           script=$("
  • 这里目标页面是“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属性即可得到搜索

技术图片

 

 

 

最终效果:

技术图片

 

jq使用jsonp实现百度搜索

标签:href   tps   回调函数   uri   跨域   inpu   添加   htm   回调   

原文地址:https://www.cnblogs.com/cpfblogs/p/12865456.html


评论


亲,登录后才可以留言!