jq使用jsonp实现百度搜索

zmosquito 2020-05-10

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

项目原理:利用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属性即可得到搜索

jq使用jsonp实现百度搜索

 

最终效果:

jq使用jsonp实现百度搜索

相关推荐