jsonp跨域请求vip联想词

最新推荐文章于 2021-03-16 16:28:47 发布

奥D

最新推荐文章于 2021-03-16 16:28:47 发布

阅读量211

点赞数 2

分类专栏：笔记文章标签： jsonp javascript

本文链接：https://blog.csdn.net/iloadj/article/details/109468391

版权

笔记专栏收录该内容

31 篇文章 0 订阅

订阅专栏

jsonp跨域请求联想词


<body>
    <input type="text" id="inp">
    <ul id="ul"></ul>
</body>
<script type="text/javascript">
/*
    1.获取输入框的值;
    2.将值传出发送jsonp请求
    ①查找地址
    ②处理地址
    ③动态添加
    3.接受请求并处理
*/
    var inp = document.getElementById('inp');
    var ul = document.getElementById('ul');
    var body = document.querySelector("body")
    inp.oninput = function(){
        var value = this.value;
        // console.log(value);
        // jsonp跨域请求vip搜索联想词，应用原理：动态创建的script标签，利用script标签的src属性可以解析，用来跨域请求数据。
        var oscript = document.createElement("script");
        oscript.src = "https://category.vip.com/ajax/getSuggest.php?callback=searchSuggestions&keyword="+value + "&_:" + +new Date();
        body.appendChild(oscript)
        // 每次添加后，应该立即删除，清理内存。
        body.removeChild(oscript)
        // console.log(body);
    }
    function searchSuggestions(res){
        var str=""
    //   如果数据是空的，说明该词没有联想词
        if(res.data.length==0){
            console.log("请求失败，没有该联想词");
            ul.style.display = "none"
            return
        }
        console.log(res.data);
        res.data.forEach(ele => { 
            // vip中有个data属性有的商品有，有的商品没有，需要判断
            if (ele.props) {
                var str1="";
                ele.props.forEach(ele => {
                    str1 += ele.name
                });
                // console.log(str1);}
                str +=`
                <li><a href=http:${ele.url}>${ele.word}</a><span>库存数量${ele.goodsCount}</span> <span>标签:${str1}</span></li>
            `
            }else{
                str +=`
                <li><a href=http:${ele.url}>${ele.word}</a><span>,库存数量${ele.goodsCount}</span> <span>,标签:无</span></li>
            `
            }
            
        });
        ul.innerHTML = str;
        ul.style.display = "block"
    }
</script>