结合 php 实现的 jsonp 前端小 demo

资料

参考原文–JSONP 教程
github 源码地址

环境

  • 这里我使用的是 xmapp 集成软件,在本地起的 apache 服务进行测试的
  • jsonp.php 文件是要放到 xmapp -> htdocs 目录下的

源码

  • index.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
      <!DOCTYPE html>
    <html>

    <head>
    <meta charset="utf-8">
    <title>JSONP 实例</title>
    </head>

    <body>
    <div id="divCustomers"></div>
    <script type="text/javascript">
    function callbackFunction(result, methodName) {
    // result = ["customername1","customername2"]
    var html = '<ul>';
    for (var i = 0; i < result.length; i++) {
    html += '<li>' + result[i] + '</li>';
    }
    html += '</ul>';
    document.getElementById('divCustomers').innerHTML = html;
    }
    </script>
    <script type="text/javascript" src="http://127.0.0.1:8008/jsonp.php?jsoncallback=callbackFunction"></script>
    </body>

    </html>
  • jsonp.php

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <?php
    header('Content-type: application/json');
    //获取回调函数名
    $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
    //json数据
    $json_data = '["customername1","customername2"]';
    //输出jsonp格式的数据
    echo $jsoncallback . "(" . $json_data . ")";
    ?>
  • 浏览器效果图

坚持原创,坚持做个好人!