利用jsonp实现百度联想词查询

最新推荐文章于 2022-04-07 16:05:10 发布

weixin_34292287

最新推荐文章于 2022-04-07 16:05:10 发布

阅读量142

点赞数

文章标签： json

原文链接：https://juejin.im/post/5cc8e5c76fb9a0323b7e55bc

版权

所谓jsonp,就是json的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题,而接下来要写的案例就是利用了这个原理。

首先我们可以在百度查找中随便输入一些内容

接着打开控制台的Network，便可看到如上图所示，接着复制Request URL的内容，箭头所指的内容其实就是搜索的函数，即cb=函数名，接着看如下代码

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
    .box{width:220px;
         height:40px;
         margin-top:50px;
         margin-left:200px;
         border:1px solid darkgoldenrod;
    }
    .list{width:220px;
          margin-left:200px;
          list-style: none;
    }
    </style>
</head>
 
<body>
    <input class="box" type="text"></div>
    <div class="list"></div>
 
    <script>
       var obox = document.getElementsByClassName("box")[0],
            list = document.getElementsByClassName("list")[0];
        obox.oninput = function () {
            var val = this.value;//获取输入框内容
            var os = document.createElement("script")
            os.src = `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${val}&cb=getdata`
            document.body.appendChild(os);
            os.onload = function () {
                document.body.removeChild(os)
            }
        }
        var getdata = function (data) {
            var str = '';
            for (let i = 0; i < data.s.length; i++) {
                str += `<li>${data.s[i]}</li>`
            }
            list.innerHTML = str
        }
 
    </script>
复制代码

由于控制台给出的函数太长我便换成了getdata函数，而wd=后面的其实就是搜索内容，这样便实现了联想词查找

转载于:https://juejin.im/post/5cc8e5c76fb9a0323b7e55bc

weixin_34292287

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用jsonp实现百度联想词查询

所谓jsonp,就是json的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题,而接下来要写的案例就是利用了这个原理。首先我们可以在百度查找中随便输入一些内容接着打开控制台的Network，便可看到如上图所示，接着复制Request URL的内容，箭头所指的内容其实就是搜索的函数，即cb=函数名，接着看如下代码<!DOCTYPE html><html lang="...
复制链接

扫一扫