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中的deferred使用方法
Mar 27 jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jQuery实现视频展示效果
May 30 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
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
微信公众号之主动给用户发送消息功能
2019/06/22 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
JavaScript中的Array对象使用说明
2011/01/17 Javascript
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
详解在React-Native中持久化redux数据
2019/05/22 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
Python变量访问权限控制详解
2019/06/29 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
python groupby 函数 as_index详解
2019/12/16 Python
django正续或者倒序查库实例
2020/05/19 Python
python实现批量命名照片
2020/06/18 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
使用python实现学生信息管理系统
2021/02/25 Python
SQL Server的固定数据库角色都有哪些?对应的服务器权限有哪些?
2013/05/18 面试题
Linux的文件类型
2016/07/05 面试题
省优秀教师事迹材料
2014/01/30 职场文书
学生手册评语
2014/05/05 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
八达岭长城导游词
2015/01/30 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书