美文网首页
jsonp的封装

jsonp的封装

作者: 成长储存罐 | 来源:发表于2019-08-26 14:37 被阅读0次

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <title>Document</title>

    </head>

    <body>

        <h2>正则测试jsonp的封装2</h2>

    </body>

    <script>

    document.onclick = function(){

        var url="http://127.0.0.1/1907/jsonp/jsonp2.php";

        jsonp(url,function(res){

            console.log(res)

        },{

            user:"admin",

            pass:123,

            zx:"asd",              //后台要执行的函数名

            cloumnName:"zx"        //后台接收的要执行的函数名所在的字段名   

        })

    }

    function jsonp(url,success,data){

        //0.解析要发送的数据

        data = data || {};

        var str ="";

        for(var i in data){

            str += `${i}=${data[i]}&`

        }

        url = url + "?" + str;

        //1.创建script标签,引入外部url

        var script = document.createElement("script");

        script.src = url;

        document.body.appendChild(script);

        //2.准备jsonp要执行的函数

        window[data[data.columnName]]= function (res){

            success (res)

        }

    }

    </script>

    </html>

    PHP文件:

    <?php

    $a = @$_GET["user"];

    $b = @$_GET["pass"];

    $cb = @$_GET["zx"];

    $data = "这是php通过jsonp接收到的跨域的的数据,又还给你了:".$a."----".$b;

    echo $cb."('".$data."')";

    ?>

    相关文章

      网友评论

          本文标题:jsonp的封装

          本文链接:https://www.haomeiwen.com/subject/jvnrectx.html