jsonp简单封装

最新推荐文章于 2023-05-10 10:56:09 发布

ace_TiAmo

最新推荐文章于 2023-05-10 10:56:09 发布

阅读量159

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/ace15824843202/article/details/99117206

版权

ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jsonp封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonp</title>
</head>
<body>
<script>

    //原理就是利用了script 可以发送不同源请求
    function jsonp (url,params,callback) {
        var funName = 'jsonp_'+Date.now()+Math.random().toString().substr(2,5);

        //对参数进行处理
        if (typeof params ==="object"){
            var tempArr=[];
            for(var key in params){
                var value = params[key]
                tempArr.push(key + '='+ value)
            }
            //tempArr =>['key1=value','key2=value2'
            params = tempArr.join('&')
        }


        //script 都是get请求
        var script = document.createElement('script');
        script.src=url +'?'+params+'&callback=' + funName;
        document.body.appendChild(script);

        window[funName]=function (data) {
            callback(data);

            //请求完删除script
            delete  window[funName];
            document.body.removeChild(script);
        };

        //调用
        jsonp('http://localhost/jsonp/server.php',{id:123},function (res) {
      console.log(res);
        })
</script>
</body>
</html>

服务端代码事例（PHP）

<?php


    $conn = mysqli_connect('localhost','root','123456','demo');

    $query = mysqli_query($conn,'select * from users');

    while($row = mysqli_fetch_assoc($query)){
        $data[] = $row;
    }

    //json and jsonp
    if(empty($_GET['callback'])){
        header('Content_type:applicatiion/json');
        echo json_encode($data);
        exit();

    }
    //如果客户端采用的事script 标记对我发送的请求
    //一定要返回一段javascript

    header('Content-Type:application/javascript');
    $result=json_encode($data);

    $callback_name = $_GET('callback');

    echo "typeof {$callback_name} === 'function' && {$callback_name}({$result})";

jquery--jsonp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="../js/jquery.js"></script>
<script>

    $.ajax({
        url:"http//localhost/jsonp/server.php",
        dataType:'jsonp',
        success:function (res) {
            console.log(res);
        }
    })
</script>

</body>
</html>

ace_TiAmo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsonp简单封装

jsonp封装<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jsonp</title></head><body><script> //原理就是利用了script...
复制链接

扫一扫