Heim >Web-Frontend >js-Tutorial >Wie erhält JSONP domänenübergreifende Daten? (Codebeispiel)

Wie erhält JSONP domänenübergreifende Daten? (Codebeispiel)

青灯夜游
青灯夜游nach vorne
2019-01-05 10:24:143560Durchsuche

Wie erhält JSONP domänenübergreifende Daten? Dieser Artikel stellt Ihnen die Methode von jsonp zum Abrufen domänenübergreifender Daten vor. Ich hoffe, dass er für Freunde hilfreich ist.

JSONP-Tipps zur domänenübergreifenden Datenerfassung

Da der Browser über eine Same-Origin-Richtlinie verfügt, müssen Sie nicht originale Daten abrufen ( Protokoll, Domänenname, wenn die drei Ports unterschiedlich sind, gelten die Daten der Seite als nicht original), sie müssen domänenübergreifend sein

(1) JSONP-Prinzip

Da das src-Attribut des Skript-Tags auf nicht originale JS-Skripte zugreifen kann, wird beim Zugriff auf den Server über das src-Attribut der JS-Code der Funktion zurückgegeben, und die gewünschten Daten werden als zurückgegeben Funktionsparameter, und wir werden zuerst diese Funktion definieren und zurückgeben. Der js-Code kann ausgeführt werden

(2) JSONP-Implementierungscode

Seite anfordern

nbsp;html>


    <title></title>


<script>
    function jsonp(data){
        console.log(username)
    }
</script>
<script>
</script>
<script>
    $(document).ready(function(){
        var url = "http://www.example.com/jsonp.php?callback=jsonp";
        var script = $(&#39;<script><\/script>&#39;);
        script.attr("src",url);
        $("body").append(script);
    });
</script>

<?php $data = {&#39;name&#39;: &#39;张三&#39;};
$callback = $_GET[&#39;callback&#39;];
echo $callback."(".json_encode($data).")";

?php>

Danach kehrt PHP zurück

jsonp({
    name:'niuni
})

Dann wird der von PHP zurückgegebene Code h von der JSONP-Methode der angeforderten Seite ausgeführt

(3) jQuerys einfaches domänenübergreifendes JSONP

<script>
    function showData (data) {
        console.info(data);
    }
    $(document).ready(function () {
        $("#btn").click(function () {
            $.ajax({
                url: "http://www.example.comjsonp",
                type: "GET",
                dataType: "jsonp",// 返回数据类型
                jsonpCallback: "showData",//回调函数
                // 获取数据成功就执行success函数
                success: function (data) {
                    console.info("data");
                }
            });
        });
    });
</script>

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für das Studium aller hilfreich sein. Weitere spannende Inhalte finden Sie in den entsprechenden Tutorial-Kolumnen auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonWie erhält JSONP domänenübergreifende Daten? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen