上图

实现过程

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. C#多线程之线程基础篇

    目录 一.概念 二.原理 硬件结构 运行时 三.基础 创建与启动 传递参数 前台/后台线程 异常处理 中断与中止 中断(Interrupt) 中止(Abort) 协作取消模式 四.异步编程模式 异步编 ...

  2. Vue2 到 Vue3，重温这 5 个常用的 API

    距离Vue3发布已经过去一年多时间了,从Vue2到Vue3是一个不小的升级,包括周边生态等.虽然目前大多数开发者们在使用的仍旧以Vue2为准,但Vue3显然是Vue开发者们未来必须面对的,而且前不久V ...

  3. 一个jsqlparse+git做的小工具帮我节省时间摸鱼

    背景 前些时间做了个小工具解决了团队内数据库脚本检验&多测试环境自动执行的问题,感觉挺有意思,在这跟大家分享一下. 工具诞生之前的流程是这样: 1.开发人员先在开发环境编写脚本&执行: ...

  4. 谷歌、微软、Meta？谁才是 Python 最大的金主？

    你知道维护 Python 这个大规模的开源项目,每年需要多少资金吗? 答案是:约 200 万美元! PSF(Python 软件基金会)在 2022 年 6 月发布了 2021 的年度报告,其中披露了以 ...

  5. i春秋Hash

    打开题目页面是一个超链接 先查看源码得到一段信息 没什么,这只是超链接跳转的信息 点击跳转到下一个界面 提示我们如果我们的传入不是123,123也就是key了,在上面的url就可以看到 如果key!= ...

  6. C++一个吃豆人小游戏

    C++一个吃豆人小游戏 代码如下 #include <cstdio>#include <iostream>#include <ctime>#include < ...

  7. Springboot使用基础总结

    搭建项目 (Eclipse   |  |     IDEA====>官方生成DEMO:http://start.spring.io/) 模版引擎  ( thymeleaf freemarker ...

  8. 卸载virtualbox中linux虚拟机的增强工具

    报错信息 vboxclient:the virtualbox kernel service is not running 前言 我由virtualbox换到vmware 遇到了这个问题,很烦每次都通知 ...

  9. MySQL进阶实战2，那些年学过的事务

    @ 目录 一.MySQL服务器逻辑架构 二.并发控制 1.读写锁 2.锁粒度 3.表锁 4.行级锁 三.事务 1.原子性(atomicity) 2.一致性(consistency) 3.隔离性(iso ...

  10. 【Java EE】Day02 MySQL概念、软件、语句

    〇.总结 1. 一.数据库的基本概念 1.概念 用于存储和管理数据的仓库 特点: 持久化存储,本质是文件系统 方便存储和管理数据 使用统一方式(MySQL)操作 常见的数据库软件: MySQL:Ora ...