javascript如何写淘宝接口，方法及其总结

写淘宝接口你首先需要了解的一些知识
1、html，css，javascript。
了解什么是同源策略，和非同源策略
以及我这里用JSONP协议；

首先写思路：
第一步：首先写结构，一个文本框，一个ul（存内容的）和一个div（放二级菜单）；
第二步：获取属性节点；还有ul里面的children，是为了放每一条的数据；
第三步：利用标签的src属性获取接口（使用JSONP的同源策略），创建script标签
oScript=Document.createElement(“script”),把接口放进oScript.scr=这里放接口
然后把它放进dom里；dom.appendchild(oScript)
第四部：创建一个接收数据的函数用来接收数据

下边是二级菜单的思路：
淘宝里面二级菜单的对象名是magic
所以要先保存一下magic
Var magic=data.magic
If(magic){
这里要进行多次遍历，因为对象里面套数组，数组里面套对象
进行了好几层级遍历
}
下边上代码：自己写的有注释。可以拿去尝试一下：

    <input type="text" placeholder="search">
    <ul>

    </ul>
    <div id="box">

    </div>
</div>

<script>
    //结构设计一个input，一个ul是为了放置搜出来的内容，box是为了存放二级菜单的内容；

    // 第一步获取属性节点，和li
    var oInput = document.querySelector("input");
    var oUl = document.querySelector("ul");
    var oDiv = document.getElementById("box")
    var oList = oUl.children;

    // 第二部写接口，点击input的时候利用标签的src属性来获取值，这里用的是JSONP的形式利用数据进行包裹；传递在转化
    oInput.oninput = function() {
            // 创建script标签
            var oScript = document.createElement("script");
            // 用模板字符串写：获取接口
            oScript.src = `
                       
        https://suggest.taobao.com/sug?code=utf-8&q=${oInput.value}&_ksTS=1603371804788_437&callback=jsonp438&k=1&area=c2c&bucketid=8
        
        `
            document.body.appendChild(oScript)
            document.body.removeChild(oScript);
            // 这一步是为了当input为空的时候div里面的内容同时给清楚掉
            if (oInput.value == "") {
                oDiv.innerHTML = ""
            }
        } // callback是后端接口，为什么用${oInput.value}


    // 3、利用JSONP外边包了一个函数的形式接收数据
    function jsonp438(data) {

        /* if (!data.result) {
            return;
        } */
        // 这里data因为返回来得时候是一个对象的形式而result是里面的属性所以就相当于data{result:[[]]}的形式；
        data1 = data.result;
        // console.log(data)
        let str = "";
        // 遍历data，item是每一个遍历后返回的值；里面的商品是数组的形式，利用1取下标的形式获取商品名称也就是$item[0]
        data1.forEach(item => {
            str += `<li>
                <a href="https://s.taobao.com/search?ie=utf8&initiative_id=staobaoz_20201022&stats_click=search_radio_all%3A1&style=grid&js=1&imgfile=&q=${item[0]}&suggest=0_1&_input_charset=utf-8&wq=a&suggest_query=a&source=suggest

">${item[0]}`;
});

        oUl.innerHTML = str;

        //这里是为了写二级菜单
        var magic = data.magic
            // console.log(magic)
        if (magic) {
            //遍历magic
            magic.forEach(item => {
                //我们实际上获取到的索引是比淘宝实际中少1，然后这里只要是有magic这个对象名的都加>符
                oList[item.index - 1].innerHTML += "&gt"
                    //当划过每个ul里面magic的li的时候
                oList[item.index - 1].onmouseover = function() {
                    // 先清一下Odiv里面的结构防止下次划过其他的li的时候oDiv里面的内容不会改变
                    oDiv.innerHTML = ""
                        // 这里保存的是第一次遍历magic里面的值
                    let subData = item.data;
                    // console.log(subData)
                    st = ""
                        //magic里面的二次遍历，这次里面是magic里面的data里面的数组
                    subData.forEach(item => {
                        console.log(item);
                        //这次是里面的最里面的一层结构，取对象里面的属性
                        item.forEach(item => {
                            console.log(item)
                            if (item.type == "hot") {
                                st += `
                              <div>
                                <a class="red">${item.title}</a>
                            
                              
                              </div>
                              `
                            } else {
                                st += `
                              <div>
                                <a>${item.title}</a>
                            
                              
                              </div>
                              `
                            }

                            oDiv.innerHTML = st
                        })


                    })

                }

            })
        }



    }
</script>