关于使用百度接口渲染列表

最新推荐文章于 2023-06-29 20:36:27 发布

llyd

最新推荐文章于 2023-06-29 20:36:27 发布

阅读量263

点赞数

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

本文链接：https://blog.csdn.net/qq_58707001/article/details/127120745

版权

html 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

1.使用jsonp+jsquey

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/jquery.js"></script>
</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=36542,36464,36673,36454,31660,36692,36166,36695,36697,36570,36074,36655,36345,26350,36469,36314&wd=a&req=2&csor=1&cb=jQuery110208771006365075591_1656294200526&_=1656294200527
        mysearch.oninput = function(evt) {
            console.log(evt.target.value)
            if (!evt.target.value) {
                list.innerHTML = ""
                return
            }
            $.ajax({
                url: `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=36542,36464,36673,36454,31660,36692,36166,36695,36697,36570,36074,36655,36345,26350,36469,36314&wd=${evt.target.value}&req=2&csor=1&&_=1656294200527`,
                dataType: "jsonp",
                jsonp: "cb"
            }).then(obj => {
                // console.log(obj.g)
                list.innerHTML = obj.g ? obj.g.map(item =>
                    `<li>${item.q}</li>`
                ).join("") : "暂无内容"
            })
        }
    </script>
</body>

</html>