jsonp案例

最新推荐文章于 2024-05-20 22:41:35 发布

数星星呀

最新推荐文章于 2024-05-20 22:41:35 发布

阅读量125

点赞数

分类专栏： JS 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_52291147/article/details/130303524

版权

JS 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

跨域获取数据（以百度为例）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" name="" id="mysearch">
    <ul id="list"></ul>
    <script>
        //https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=38515,36556,38470,38352,38468,38375,38486,37937,37709,26350,38185&wd=a&req=2&csor=1&cb=jQuery1102009703213229325702_1682138582989&_=1682138582990
        mysearch.oninput = function (evt) {
            console.log(evt.target.value)
            if (!evt.target.value) {//空字符串不请求
                list.innerHTML = ""
                return
            }
            var oscript = document.createElement("script")
            oscript.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=38515,36556,38470,38352,38468,38375,38486,37937,37709,26350,38185&wd=${evt.target.value}&req=2&csor=1&cb=test&_=1682138582990`
            document.body.appendChild(oscript)
            oscript.onload = function () {
                oscript.remove()
            }
        }
        function test(obj) {
            console.log(obj.g)
            list.innerHTML = obj.g.map(item => `<li>${item.q}</li>`).join("")
        }
    </script>
</body>

</html>

效果显示：