上图

实现过程

1. 在百度上随便搜索一个内容

2. 在Network中找到一个地址右击 copy 然后 Copy link address

3. 将地址保存起来，取出中间有用的部分作为url属性的值，只需截取到 &wd 之前即可

栗子：

https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=32617,1440,32745,7542,32795,32723,32231,7517,32781,32116,32719,26350&wd=php&req=2&csor=3&pwd=ph&cb=jQuery11020916663046629572_1601203241918&_=1601203241921

我们需要截取的地址：

https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=32617,1440,32745,7542,32795,32723,32231,7517,32781,32116,32719,26350

4.开始敲代码

html

<body>

<div id="container">

    <input type="text" name="keyword" id="keyword">

    <input type="button" value="百度一下" id="search">

    <div id="search-info"></div>

</div>

</body>

css

<style type="text/css">

        #container{

            margin: 100px auto;

            width: 500px;

            text-align: center;

            padding: 10px;

        }

        #container ul{

            margin: 0;

        }

        #container li{

            list-style: none;

            text-align: left;

            padding-left: 45px;

            height: 25px;

            line-height: 25px;

            cursor: pointer;

        }

        #keyword{

            width: 220px;

            margin: auto;

            height: 25px;

            border: none;

            border: 2px solid #c4c7ce;

        }

        #search{

            background-color: #4e6ef2;

            color: white;

            border: none;

            border-radius: 3px;

            width: 80px;

            height: 30px;

        }

        #search-info{

            width: 480px;

            text-align: center;

            margin: auto;

        }

        #search-info li:hover{

            background-color: #4e6ef2;

        }

    </style>

js

<script type="text/javascript" src="./jquery.js"></script>

    <script type="text/javascript">

        $(function() {

            $("#keyword").keyup(function () {

                var kw = $(this).val();

                $.ajax({

                    url:'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=32617,1440,32745,7542,32795,32723,32231,7517,32781,32116,32719,26350',

                    jsonp: 'cb',

                    //jsonp是jQuery提供的方法

                    //百度是根据以cb开头的方法名字，所以通过jsonp来定义

                    //服务器通过这个来得到函数的名字

                    data: {wd: kw},

                    //kw是input的id值，用来拼接我们在搜索框中输入的值，这个参数在data中传递

                    //之前是在url属性中写入  "接口地址wd"='+kw'

                    dataType: 'jsonp',

                    //必须使用jsonp，这是跨域接口，指定返回的参数类型

                    success: function (data) {

                        var list = data.g

                        var tag = '<ul>';

                        for(var i= 0;i<list.length;i++){

                            var listdata = data.g[i].q;

                            tag += '<li>'+listdata+'</li>';

                        }

                        tag += '</ul>';

                        $("#search-info").html(tag);

                    }

                });

            });

        })

    </script>

其中 var list = data.g 中的data得到的是一个数组，可通过console.log(data)在服务器查看

当在搜素框中输入php ，服务器打印的结果是数组,而我们想要的是data下面的g下面的q

var listdata = data.g[i].q 就可以通过遍历得到我们想要的数据并渲染在页面上

使用Ajax跨域实现百度搜索功能的更多相关文章

  1. AJax跨域请求百度音乐接口数据展示页面

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. ajax 跨域的问题 用js绕过跨域

    之前遇到一个ajax跨域的问题,搜索了很多方法才找到解决方案,也怪自己  菜鸟一个 这些经验还是要慢慢来的 尤其是最近来回顾一下 竟然发现自己忘记了  所以还是把它记下来啊 免得到时候忘记 这个方法原 ...

  3. Ajax跨域实现淘宝/百度搜索下拉提示效果

    最近学到Ajax,觉得自己对与前后端的数据交互有了一个基本的了解.下面是Ajax应用到淘宝/百度的搜索功能的一个简单的小实例,就是输入一个词,下拉框中自动显示匹配的内容:

  4. Ajax跨域：Jsonp实例--百度搜索框下拉提示

    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

  5. 使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码】

    项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...

  6. JAVAEE——宜立方商城11：sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求（jsonp）

    1. 学习计划 第十一天: 1.sso注册功能实现 2.sso登录功能实现 3.通过token获得用户信息 4.Ajax跨域请求(jsonp) 2. Sso系统工程搭建 需要创建一个sso服务工程,可 ...

  7. 百度的一个Ajax跨域方法 JavaScript是没有域的限制

    baidu的通行证处理都是在二级域名passport.baidu.com中处理的,但是baidu很多地方登录都好像是用ajax处理的,他是怎么做的呢?研究了一下,发现一个小技巧. 在http://zh ...

  8. 为什么返回的数据前面有callback？ ashx/json.ashx?的后面加 callback=? 起什么作用 js url?callback=xxx xxx的介绍 ajax 跨域请求时url参数添加callback=?会实现跨域问题

    为什么返回的数据前面有callback?   这是一个同学出现的问题,问到了我. 应该是这样的: 但问题是这样的: 我看了所请求的格式和后台要求的也是相同的.而且我也是这种做法,为什么他的就不行呢? ...

  9. js便签笔记（13）——jsonp其实很简单【ajax跨域请求】

    前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资料,原来如此... 为何一直知道jsonp,但一直迷迷糊糊的不明白 ...

  10. 【JS跨域请求】Ajax跨域请求JSONP

    前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资料,原来如此... 为何一直知道jsonp,但一直迷迷糊糊的不明白 ...

随机推荐

  1. python-代码编程规范

    命名 常用简写 名称相关 # 信息 information: info # 功能 function : func # 数量 quantity:qty PYQT相关 button : btn_ chec ...

  2. 如何在CentOS7上搭建自己的GitLab仓库

    序言 各位好啊,我是会编程的蜗牛,作为java开发者,在团队开发中,一般都是需要使用git及git仓库来管理我们的代码的,这非常方便.我以前在小公司的时候,基本都是一个人开发一个项目,所以也没有怎么接 ...

  3. 【笔记】入门DP（Ⅱ）

    0X00 P1433 吃奶酪 状压 \(DP\),把经过的点压缩成01串.若第 \(i\) 位为 \(0\) 表示未到达,为 \(1\) 则表示已到达. 用 \(f[i][j]\) 表示以 \(i\) ...

  4. windows server2016/2019在vmware上安装失败

    问题:无法进入装机界面 现象一:打开虚拟机后进入虚拟bios界面,无法引导iso镜像 解决方法1:从虚拟机设置里,修改引导选项,如果需要修改启动盘则设置强制执行BIOS设置 下图为vsphere的截图 ...

  5. 【云原生 · Kubernetes】Jenkins+Gitlab+Rancher+Docker 实现自动构建镜像的 CI 平台（一）

    1 准备 Jenkins+Gitlab 实验环境 1.1 准备实验环境:恢复到以一下快照:该环境已经配置好 jenkins+gitlab+sonar-配置通 主机角色: IP 地址 运行的服务 硬件配 ...

  6. 研究光度立体法阶段性小结和优化（可20ms获取4个2500*2000灰度图的Normal Map）。

    这个东西是我接触的第一个非2D方面的算法,到目前为止其实也没有完全搞定,不过可能短时间内也无法突破.先把能搞定的搞定吧. 这个东西也有一大堆参考资料,不过呢,搜来搜去其实也就那些同样的东西,个人觉得就 ...

  7. 批量删除多个相同格式内容的Excel表格的列

    Sub Del_Col()Application.DisplayAlerts = FalseDim myFiles As StringDim myExcels As StringWith Applic ...

  8. C++编程笔记(智能指针学习)

    目录 scoped_ptr unique_ptr shared_ptr 智能指针简单应用 智能指针简单应用 scoped_ptr 拷贝构造和 =赋值操作均为私有,不允许 内部重载了解引用(*)操作符和 ...

  9. 【消息队列面试】11-14：kafka高可靠、高吞吐量、消息丢失、消费模式

    十一.kafka消息高可靠的解决方案 1.高可靠=避免消息丢失 解决消息丢失的问题 2.如何解决 (1)保证消息发送是可靠的(发成功了/落到partition) a.ack参数 发送端,采用ack机制 ...

  10. 使用Spring Reactor优化推荐流程

    1. 背景 公司有一个推荐系统Rec,这个系统的主要功能是: 向外部系统提供推荐接口 根据请求获取推荐策略 根据推荐策略完成推荐的召回.过滤.打分.排序阶段 Rec作为微服务中的一环,本身不存储召回的 ...