上图

实现过程

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. xss学习笔记(萌新版)

    xss简介 xss攻击者构造恶意信息然后在用户的浏览器上执行,主要分为反射性xss,这种主要是某个页面存在有漏洞的参数,然后填上恶意参数把整个链接发给用户或者管理员,他们点击了带有恶意参数的链接就会执 ...

  2. 云原生之旅 - 9）云原生时代网关的后起之秀Envoy Proxy 和基于Envoy 的 Emissary Ingress

    前言 前一篇文章讲述了基于Nginx代理的Kuberenetes Ingress Nginx[云原生时代的网关 Ingress Nginx]这次给大家介绍下基于Envoy的 Emissary Ingr ...

  3. Linux网络通信（TCP套接字编写，多进程多线程版本）

    预备知识 源IP地址和目的IP地址 IP地址在上一篇博客中也介绍过,它是用来标识网络中不同主机的地址.两台主机进行通信时,发送方需要知道自己往哪一台主机发送,这就需要知道接受方主机的的IP地址,也就是 ...

  4. JAVA-注解之 TODO、FIXME、XXX

    TODO.FIXME.XXX    //TODO : 表示待实现的功能    //FIXME: 代码存在Bug,不能Run或运行结果不正确,需要修复    //XXX  : 勉强可以工作,但是实现的方 ...

  5. 8.drf-序列化器

    在序列化类中,如果想使用request,则可以通过self.context['request']获取 序列化器的主要由两大功能 - 对请求的数据进行校验(底层调用的是Django的Form和Model ...

  6. 2022春每日一题：Day 39

    题目:[USACO1.4]等差数列 Arithmetic Progressions 一个很显然的做法,枚举公差,首项,p,q这样的话复杂度爆炸,不过可以肯定的一点,如果我们这样做,找到了答案就可以直接 ...

  7. Guess Next Session

    打开又是一个输入框的界面,点一下下面的看源码 很简短的一个源码 大概意思是如果password等于session[password]就输出flag 直接搜了下session函数的漏洞,发现sessio ...

  8. Java阻塞队列中的异类，SynchronousQueue底层实现原理剖析

    上篇文章谈到BlockingQueue的使用场景,并重点分析了ArrayBlockingQueue的实现原理,了解到ArrayBlockingQueue底层是基于数组实现的阻塞队列. 但是Blocki ...

  9. RNN的PyTorch实现

    官方实现 PyTorch已经实现了一个RNN类,就在torch.nn工具包中,通过torch.nn.RNN调用. 使用步骤: 实例化类: 将输入层向量和隐藏层向量初始状态值传给实例化后的对象,获得RN ...

  10. updog:一款局域网传输文件的软件

    前言 不知道你是否有过这样 的需求,在局域网传输文件,苦于没有好的软件支持,或者只能单向传输,updog可以完全解决这种问题 安装 pip3 install updog updog是python中的一 ...