suchen

Heim  >  Artikel  >  Web-Frontend  >  JSONP-Implementierung

JSONP-Implementierung

高洛峰
高洛峰Original
2016-12-24 17:37:481192Durchsuche

Verwenden Sie JSONP, um domänenübergreifende Daten zu erhalten.

js-Teil 

(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>

Die Seite wird als zurückgegeben, was darauf hinweist, dass die Erfassung erfolgreich war.

JSONP-Implementierung


Weitere Artikel zur JSONP-Implementierung finden Sie auf der chinesischen PHP-Website!


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispiel für die Implementierung des JS-Skripts „Bildvorschau hochladen“ für die Bildvorschau der EingabedateiNächster Artikel：Beispiel für die Implementierung des JS-Skripts „Bildvorschau hochladen“ für die Bildvorschau der Eingabedatei

In Verbindung stehende Artikel

Mehr sehen