美文网首页
jsonp实践

jsonp实践

作者: dreamruner | 来源:发表于2018-08-10 19:24 被阅读6次

什么是Jsonp

Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。

案例

借用了百度的关键字搜索联想,完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="text" id="txt1">

<ul id="ul1">


</ul>

<script>

    let oTxt = document.getElementById('txt1');
    let oUl = document.getElementById('ul1');


    function show(obj) {
        console.log(obj);
        oUl.innerHTML = '';
        obj.s.forEach(it=>{
            let oLi = document.createElement('li');
            oLi.innerHTML = it;
            oUl.appendChild(oLi);
        })

    }

    oTxt.oninput = function () {
        let script = document.createElement('script');
        script.src = `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${oTxt.value}&cb=show`;
        document.head.appendChild(script);
    };

</script>


</body>
</html>

相关文章

  • jsonp实践

    什么是Jsonp Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从...

  • JSONP实践

    跨域一直使用CORS,JSONP大概知道,但没有实践过。这次来实践一下。 前端代码 后台代码(Express) 总...

  • JSONP、JQuery发送AJAX、JSONP请求

    1.JSONP 2.JQuery发送AJAX、JSONP请求 1.JSONP JSONP利用JavaScript...

  • JS-18day

    1、jsonp公开接口 2、jQuery-jsonp 3、jsonp

  • 2018-12-10

    节点操作 ajax jsonp jQuery-jsonp jsonp公开接口

  • RESTful Service Best Practices:

    基本上,当前的最佳实践是使用以下属性包装常规(非JSONP)响应: code – contains the HTT...

  • jsonp原理

    模拟jsonp原理 servlet 测试 http://localhost/jq/jsonp.jsp JSONP ...

  • 2018-07-30

    一 ajax 二 jsonp 三 jquery-jsonp 四 jsonp公开接口

  • ajax

    1、ajax 2、jsonp 3、jQuery-jsonp 4、jsonp公开接口

  • javasscript - 收藏集 - 掘金

    jsonp 跨域请求详解——从繁至简 - 前端 - 掘金什么是jsonp?为什么要用jsonp?JSONP(JSO...

网友评论

      本文标题:jsonp实践

      本文链接:https://www.haomeiwen.com/subject/cnmlbftx.html