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

在这里插入图片描述

posted @   杨芋可可  阅读(333)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示