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

项目原理:利用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".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".box>.ssk").on("mouseleave", function () {
     $(".box>.ssk").css("display", "none");
    });
   }
  • 这里目标页面是“https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su"text-align: center">jQuery使用jsonp实现百度搜索的示例代码

    最终效果:

    jQuery使用jsonp实现百度搜索的示例代码

    以上就是jQuery使用jsonp实现百度搜索的示例代码的详细内容,更多关于jQuery实现百度搜索的资料请关注其它相关文章!

标签:
jQuery,jsonp,jQuery,实现百度搜索,jQuery使用jsonp实现百度搜索

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
评论“jQuery使用jsonp实现百度搜索的示例代码”
暂无“jQuery使用jsonp实现百度搜索的示例代码”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。