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实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
jquery实现简单自动轮播图效果
Jul 29 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学习教程之第1天
2008/06/15 PHP
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
详谈JavaScript的闭包及应用
2017/01/17 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
Python中的map、reduce和filter浅析
2014/04/26 Python
Python 字典dict使用介绍
2014/11/30 Python
Python自动重试HTTP连接装饰器
2015/04/28 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
Python内置类型性能分析过程实例
2020/01/29 Python
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
新西兰优惠网站:Treat Me
2019/07/04 全球购物
感谢信怎么写
2015/01/21 职场文书
中班下学期个人总结
2015/02/12 职场文书
专家推荐信怎么写
2015/03/25 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
vue使用echarts实现折线图
2022/03/21 Vue.js
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers