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自定义图片上传插件实例代码
Apr 04 jQuery
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 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开发中常用的8个小技巧
2008/08/27 PHP
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
vue项目实现图片上传功能
2019/12/23 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
Python建立Map写Excel表实例解析
2018/01/17 Python
python Tkinter的图片刷新实例
2019/06/14 Python
python用for循环求和的方法总结
2019/07/08 Python
python圣诞树编写实例详解
2020/02/13 Python
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
PHP如何与mysql建立链接
2013/05/05 面试题
七年级地理教学反思
2014/01/26 职场文书
文化活动实施方案
2014/03/28 职场文书
标准毕业生自荐信
2014/06/24 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
工作失职检讨书
2015/01/26 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
葬礼主持词
2015/07/02 职场文书
旅行社计调工作总结
2015/08/12 职场文书
使用JS实现简易计算器
2021/06/14 Javascript