上图

实现过程

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. 优秀的Kafka GUI客户端、可视化管理工具、监控工具

    想要查看Topic里的消息却找不到软件,想要查看或更新Broker.Topic配置,想要监控Broker服务器状态?试试下面的Kafka GUI工具--Kafka Assistant 官网地址:htt ...

  2. 使用kubeadm方式搭建K8S集群

    使用kubeadm方式搭建K8S集群 kubeadm是官方社区推出的一个用于快速部署kubernetes集群的工具. 这个工具能通过两条指令完成一个kubernetes集群的部署: # 创建一个 Ma ...

  3. AR手势识别交互，让应用更加“得心应手”

    现如今, AR技术不断发展,人们不再满足于运用键盘.鼠标等简单器械来实现传统的人机交互模式.随着用户接触机器的多样化,繁琐的操作不但对一些用户有门槛,而且还增加其学习成本:如果能用自然且符合日常生活习 ...

  4. 学习 vue3 第一天 vue3简介，创建vue3项目 Composition Api 初识

    前言: 从今天开始来和大家一起学习 vue3 相信大家都不陌生,已经火了一段时间了,但是还是有不少人没有学习,那就跟着六扇老师来简单的入个门 废话不多说,来开始今天的学习 Vue3 简介: 2020年 ...

  5. mongorestore target dump invalid CreateFile dump The system cannot find

    问题 使用 mongorestore 指定 dump 文件夹,恢复数据报错. mongorestore target 'dump' invalid: CreateFile dump: The syst ...

  6. <十>关于菱形继承

    代码1 #include <iostream> using namespace std; class A{ public: A(int _a):ma(_a){ cout<<&q ...

  7. 基于Nginx搭建WebDAV服务

    title: 基于Nginx搭建WebDAV服务 categories: - [IT,网络,服务] tags: - WebDAV - Nginx comments: true date: 2022-1 ...

  8. 说说真实Java项目的开发流程，以及面试前的项目准备说辞

    介绍项目是必不可少的Java面试环节,求职者需要借此证明自己真实Java项目的经验,如果再做的好的话,需要借此展开自己的亮点说辞. 不过之前如果只有学习项目经验,比如是自己跑通一个项目,或者是在培训班 ...

  9. ArcObjects SDK开发 022 开发框架搭建-FrameWorkUI包设计

    1.CommandUIs部分 这部分主要是定义承载Command和Tool的具体UI.如下图所示. 以CommandUI结尾的这几个类都是继承了Framework.Engine里面的ICommandU ...

  10. php的可变变量覆盖漏洞

    题目如下: <?php highlight_file('source.txt'); echo "<br><br>"; $flag = 'xxxxxxx ...