Comment jsonp obtient-il des données sur tous les domaines ? (exemple de code)-js tutoriel-php.cn

Comment jsonp obtient-il des données sur tous les domaines ? (exemple de code)

青灯夜游

Libérer： 2019-01-05 10:24:14

avant

3345 Les gens l'ont consulté

Comment jsonp obtient-il des données sur tous les domaines ? Cet article vous présentera la méthode jsonp pour obtenir des données inter-domaines. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Conseils d'acquisition de données inter-domaines JSONP

Étant donné que le navigateur a une politique de même origine, vous devez obtenir des données non originales ( protocole, nom de domaine , si les trois ports sont différents, les données de la page sont considérées comme non originales), il doit être cross-domain

(1) principe jsonp

Étant donné que l'attribut src de la balise script peut accéder aux scripts js non originaux, accéder au serveur via l'attribut src renverra le code js de la fonction, et les données que nous voulons sont renvoyées sous forme de paramètre de fonction, et nous allons d'abord définir cette fonction et retourner Le code js peut être exécuté

(2) code d'implémentation jsonp

page de demande

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

Copier après la connexion

<?php

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

?php>

Copier après la connexion

Après cela, php retournera

jsonp（{
    name:'niuni
}）

Copier après la connexion

puis le code h renvoyé par PHP sera exécuté par la méthode jsonp de la page demandée

(3) Jsonp simple cross-domain de jQuery

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

Copier après la connexion

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, J'espère que cela sera utile à l'étude de chacun. Pour un contenu plus passionnant, vous pouvez prêter attention aux colonnes de didacticiels pertinentes du site Web PHP chinois ! ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!