Using jsonp to realize Baidu association words

The so-called json is a "usage mode" of json, which can be used to solve the problem of cross domain data access of mainstream browsers. The next case to be written is to use this principle.

First of all, we can input some content in Baidu search

Next, open the Network of the console, and you can see the above figure. Next, copy the content of the Request URL. The content indicated by the arrow is actually the search function, that is, cb = function name. Next, look at the following code

<!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;//Get input box content
            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>

Because the function given by the console is too long, I changed it to getdata function, and the function after wd = is actually the search content, so the association word search is realized

Tags: JSON network IE

Posted on Tue, 03 Dec 2019 22:55:56 -0500 by ajna