使用Ajax跨域实现百度搜索功能

上图
在这里插入图片描述

实现过程

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 就可以通过遍历得到我们想要的数据并渲染在页面上

在这里插入图片描述


__EOF__

本文作者杨芋可可
本文链接https://www.cnblogs.com/yangyukeke/p/13741417.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   杨芋可可  阅读(337)  评论(0编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
· 使用C#创建一个MCP客户端
点击右上角即可分享
微信分享提示