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

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!