Wie erhält JSONP domänenübergreifende Daten? (Codebeispiel)-js-Tutorial-php.cn

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

青灯夜游

Freigeben： 2019-01-05 10:24:14

nach vorne

3374 Leute haben es durchsucht

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

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<script type="text/javascript">
    function jsonp(data){
        console.log(username)
    }
</script>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
    $(document).ready(function(){
        var url = "http://www.example.com/jsonp.php?callback=jsonp";
        var script = $('<script><\/script>');
        script.attr("src",url);
        $("body").append(script);
    });
</script>
</body>
</html>

Nach dem Login kopieren

<?php

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

?php>

Nach dem Login kopieren

Danach kehrt PHP zurück

jsonp（{
    name:'niuni
}）

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!