recherche

Maison >interface Web >js tutoriel >Implémentation JSONP

Implémentation JSONP

高洛峰
高洛峰original
2016-12-24 17:37:481197parcourir

Utilisez jsonp pour obtenir des données sur tous les domaines.

partie js 

(function(window, document) {
    'use strict';
    var jsonp = function(url, data, callback) {
        //1、挂载回调函数
        var fnsuffix = Math.random().toString().replace('.', '');
        var cbFuncName = 'my_json_cb' + fnsuffix;
        window[cbFuncName] = callback;
        //2、将data转换成url字符串的形式
        //{id=1,count=4}==>id=1&count=4
        var querystring = url.indexOf('?') == -1 ? '?' : '&';     //判断url中最后是否有？，没有则为？
        for (var key in data) {
            querystring += key + '=' + data[key] + '&';
        }
        //3、处理url中回调函数 url+=callback=sdgade
        querystring += 'callback=' + cbFuncName;
        //querystring=?id=1&count=4&callback=sdgade
        //4、创建一个script标签
        var scriptElement = document.createElement('script');
        scriptElement.src = url + querystring;
        //5、把script标签放到页面上
        document.body.appendChild(scriptElement);
    };
    window.$jsonp = jsonp;
})(window, document)

Test 

<!DOCTYPE html>
<html>
<head>
    <title>jsonp</title>
</head>
<body>
    <div id="htt"></div>
    <script type="text/javascript" src="http.js"></script>
    <script>
        (function(){
            $jsonp(&#39;http://api.douban.com/v2/movie/in_theaters&#39;,{},    
                function(data){
                    document.getElementById(&#39;htt&#39;).innerHTML=JSON.stringify(data);
                });
        })()
    </script>
</body>
</html>

sur la page Le résultat peut être renvoyé comme, indiquant que l'acquisition est réussie !

Implémentation JSONP


Pour plus d'articles liés à l'implémentation de JSONP, veuillez faire attention au site Web PHP chinois !


Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Télécharger l'aperçu de l'image Script JS Exemple d'implémentation de l'aperçu de l'image du fichier d'entréeArticle suivant：Télécharger l'aperçu de l'image Script JS Exemple d'implémentation de l'aperçu de l'image du fichier d'entrée

Articles Liés

Voir plus