jquery-ajax-jsonp-360搜索引擎的联想词获取

最新推荐文章于 2021-08-06 13:18:14 发布

鲸鱼编程pyhui

最新推荐文章于 2021-08-06 13:18:14 发布

阅读量708

点赞数 2

本文链接：https://blog.csdn.net/ifubing/article/details/95043204

版权

测试一下ajax获取jsonp数据的功能

1，准备数据

在这里插入图片描述

2，发起请求，获取数据后按jsonp的类型处理

在这里插入图片描述

3，获取jsonp数据中的字典一类的内容

在这里插入图片描述

360联想取词接口的返回值

在这里插入图片描述

目标，联想取词

做一个输入框
找到360联想取词的接口链接，抓取数据的来源
分析来源，返回不同数据的依据
构建合适的请求
发起请求
获取响应
处理响应中的数据，把数据添加到页面中
任务完成

寻找数据源，数据接口的过程

f12，打开开发者工具

找到network，找到all，network表明我们要抓取网络请求了，all表示抓取所有的请求

如果内容太多，使用清屏

在这里插入图片描述

当有请求发起的时候，关注这里

在这里插入图片描述

通过仔细查看response的内容（如果内容太长，可以用preview，查看处理后的格式）

在这里插入图片描述

如果发现数据是想要的，就代表，当前我们点击的请求，就是对的请求

下一步，拿到请求的接口地址

在这里插入图片描述

得到的接口内容
https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=华为&mid=c68892e973deb25ad6f3f6f99bea6d1b&huid=11%2Fa%2BYamUFHk1Uk%2F%2BO8y1I5mPlxYqSLYhP40JF6PKoIVE%3D&llbq=A5%2CB5%2CC5%2CD5

有中文，却看不到

原因是被编码了

在这里插入图片描述

发现规律，猜想，如果把华为修改苹果的话，是否会出现苹果的联想词？

试一波

https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=苹果&mid=c68892e973deb25ad6f3f6f99bea6d1b&huid=11%2Fa%2BYamUFHk1Uk%2F%2BO8y1I5mPlxYqSLYhP40JF6PKoIVE%3D&llbq=A5%2CB5%2CC5%2CD5

得到结果

在这里插入图片描述

完整代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-1.12.4.min.js"></script>

    <script>
        $(function () {
            // 获取文本标签
            var $ipt = $("#keywords");
            // 添加一个内容改变的事件
            $ipt.keyup(function () {
                var sValue = $ipt.val();
                document.title = sValue;
                get_data(sValue)
            })

        })


        function get_data(sValue) {
        var u = "https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=" + sValue;
        $.ajax({
            url: u,
            type: "GET",
            dataType: "jsonp",
            jsonpCallback:"suggest_so"
        }).done(function (dat) {
            // 清空ul标签的内容
            $("ul").empty();


            var data = dat.result
            var data_len = data.length;
            // 遍历拿到全部的内容
            for(var i=0;i<data_len;i++){
            // 创建一个li的标签节点
            $li = $("<li>");
            content = data[i].word;
            $li.html(content);
            // ul标签添加li标签
            $("ul").append($li);
            }
        }).fail(function () {
            alert("fail");
        })
        }

    </script>

</head>
<body>

<!--输入框-->
<input type="text" id="keywords">

<ul>
<!--<li>传奇中文网</li>-->
</ul>

</body>
</html>

效果

在这里插入图片描述

鲸鱼编程pyhui

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery-ajax-jsonp-360搜索引擎的联想词获取

测试一下ajax获取jsonp数据的功能1，准备数据2，发起请求，获取数据后按jsonp的类型处理3，获取jsonp数据中的字典一类的内容360联想取词接口的返回值目标，联想取词做一个输入框找到360联想取词的接口链接，抓取数据的来源分析来源，返回不同数据的依据构建合适的请求发起请求获取响应处理响应中的数据，把数据添加到页面中任务完成寻找数据源，数据接口的过...
复制链接

扫一扫