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


Posted in jQuery onJuly 08, 2020

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

项目原理:利用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使用jsonp实现百度搜索的示例代码

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

jQuery 相关文章推荐
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
jQuery实现手风琴特效
Jan 11 jQuery
jquery实现广告上下滚动效果
Mar 04 jQuery
jQuery 实现扁平式小清新导航
Jul 07 #jQuery
jQuery 动态粒子效果示例代码
Jul 07 #jQuery
jQuery实现简单飞机大战
Jul 05 #jQuery
jQuery实现简单日历效果
Jul 05 #jQuery
jQuery实现飞机大战小游戏
Jul 05 #jQuery
jquery实现上传图片功能
Jun 29 #jQuery
jQuery实时统计输入框字数及限制
Jun 24 #jQuery
You might like
PHP 设置MySQL连接字符集的方法
2011/01/02 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
thinkphp分页集成实例
2017/07/24 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
2015/07/18 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
js轮播图代码分享
2016/07/14 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
基于Python快速处理PDF表格数据
2020/06/03 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
集团公司总经理岗位职责
2013/12/20 职场文书
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
幼师个人总结范文
2015/02/28 职场文书
教师学习心得体会范文
2016/01/21 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL