上图

实现过程

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. Echarts - legend属性设置

    legend: { orient: 'horizontal', // 'vertical' x: 'right', // 'center' | 'left' | {number}, y: 'top', ...

  2. Golang 实现时间戳和时间的转化

    何为时间戳: 时间戳是使用数字签名技术产生的数据,签名的对象包括了原始文件信息.签名参数.签名时间等信息.时间戳系统用来产生和管理时间戳,对签名对象进行数字签名产生时间戳,以证明原始文件在签名时间之前 ...

  3. Microsoft Office MSDT代码执行漏洞（CVE-2022-30190）漏洞复现

    目录 免责声明: CVE-2022-30190漏洞复现 漏洞概述: 影响版本: 漏洞复现: 使用方法: 利用: 修复建议: 参考: 免责声明: 本文章仅供学习和研究使用,严禁使用该文章内容对互联网其他 ...

  4. 基于python的数学建模---非线性规划

    凸函数的非线性规划 minimize 求解的是局部最优解 简单的函数,无所谓 复杂的函数 初始值的设定很重要 scipy.optimize.minimize(fun,x0,args=(),method ...

  5. 【深入浅出 Yarn 架构与实现】4-1 ResourceManager 功能概述

    前面几篇文章对 Yarn 基本架构.程序基础库.应用设计方法等进行了介绍.之后几篇将开始对 Yarn 核心组件进行剖析. ResourceManager(RM)是 Yarn 的核心管理服务,负责集群管 ...

  6. vulnhub靶场之Chronos：1

    准备: 攻击机:虚拟机kali.本机win10. 靶机:Chronos,下载地址:https://download.vulnhub.com/chronos/Chronos.ova,下载后直接vbox打 ...

  7. 谁说.NET没有GC调优？只改一行代码就让程序不再占用内存

    经常看到有群友调侃"为什么搞Java的总在学习JVM调优?那是因为Java烂!我们.NET就不需要搞这些!"真的是这样吗?今天我就用一个案例来分析一下. 昨天,一位学生问了我一个问 ...

  8. Apache手动安装教程及报错解决梳理

    操作参考教程:https://www.cnblogs.com/haw2106/p/9839655.html 下载地址(例):wget https://dlcdn.apache.org/httpd/ht ...

  9. mysql安装及访问配置

    安装教程参考:https://www.cnblogs.com/hjw-zq/p/8809227.html 下载地址:https://dev.mysql.com/downloads/mysql/ 例:h ...

  10. JavaEE Day05 JDBC（用Java语言操作数据库）

    今日内容 基本概念 快速入门 对JDBC中各个接口和类的详解 一.基本概念 1.概念:Java Database Connectivity:Java数据库连接,Java语言操作数据库 2.本质:官方( ...