藉助baidu的jsonp接口，作一個本身的候選詞組件

時間 2019-11-07

標籤藉助 jsonp 接口一個本身候選詞組欄目 JSON 简体版

原文原文鏈接

先觀察html

對接口進行提煉：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=關鍵詞&cb=回調函數json

簡單測試一下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>百度候選詞</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
        let test = (data) => {
            console.log(data);
        }
    </script>
    <script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=dn&cb=test"></script>
</head>

<body>
    <!-- https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=關鍵詞&cb=回調函數 -->
</body>

</html>

效果：app

嘗試把內容放入一個ul內：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>百度候選詞</title>
</head>

<body>
    <ul id="myul"></ul>
    <script>
        // 爲何放ul的下面，能夠看這篇文章：https://www.cnblogs.com/dotnetcrazy/p/10106976.html
        let test = (json) => {
            let ulobj = document.getElementById("myul");
            json.s.forEach(item => {
                let liobj = document.createElement("li");
                liobj.innerHTML = item;
                ulobj.appendChild(liobj);
            });
        }
        // https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=關鍵詞&cb=回調函數
    </script>
    <script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=dn&cb=test"></script>
</body>

</html>

效果：函數

根據input輸入動態獲取

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>百度候選詞</title>
    <script>
        // https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=關鍵詞&cb=回調函數
        let show_ul = (json) => {
            let ul_obj = document.getElementById("myul");
            ul_obj.innerHTML = ""; // 清空如今的ul

            console.log(json.s);

            json.s.forEach(item => {
                let li_obj = document.createElement("li");
                li_obj.innerHTML = item;
                ul_obj.appendChild(li_obj);
            });
        }
        window.onload = () => {
            let input_obj = document.getElementById("myinput");

            input_obj.oninput = () => {
                // 用script加載的方式，只會執行一次，不知足咱們的需求，so ==> 動態建立
                let script_obj = document.createElement("script");
                script_obj.src = `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${encodeURIComponent(input_obj.value)}&cb=show_ul`
                document.body.appendChild(script_obj); //添加到body裏面
            }
        }
    </script>
</head>

<body>
    <input type="text" id="myinput" />
    <ul id="myul"></ul>
</body>

</html>

效果：測試