JS----Jsonp 简单使用

Jsonp 简单使用

客户端 - 直接提交:getJSON:

$.getJSON("http://127.0.0.1/test.php?jsoncallback=?&t=5555&name=jack", function(data){
    console.log(data)
    console.log(data.name)  
})
           

客户端 - ajax提交:

$('#form').on('submit', function(event) {
    window.event.returnValue = false;

    $.ajax({
        url: "http://127.0.0.1/test/t1.php?t=5555",       // 服务器地址要注意是ipv4的，ipv6测试暂时没成功。
        data:{name:'jack', age:$("[name='age']").val()},  // 传递数据
        type: "POST",                                     // get/post都可以的请求方式
        async: false,                                     // 是否同步，false为异步加载        
        dataType: "jsonp",                                // 设置返回数据类型jsonp      
        jsonp: "jsoncallback",                            // jsonp的字段，服务器返回的前缀要和这个一样
        success: function (data) {
            console.log(data)   
            // console.log(data[0].name)

            // 取数据：遍历数据
            var ul = '<ul>';
            // data为获取的数据，记得给服务器设置charset=utf-8;否则返回中文乱码
            $.each(data, function (i, v) {
                ul += '<li>' + v.name + '</li>';
            });

            ul +='</ul>';


            $("#result").append(ul);

        },
        error: function () {
            console.log('fail');
        }
    });
})
           

服务端:

header("Content-type:text/html;charset=utf-8");

// htmlspecialchars() 函数把一些预定义的字符转换为 HTML 实体。
// 获取回调函数名
$jsoncallback = isset($_REQUEST['jsoncallback']) ? htmlspecialchars($_REQUEST['jsoncallback']) : '';

// 方式1：json数据
$jsonData1 = '[{name:"jack"},{name:"tom"}]';

// 方式2：获取数据. 主意要为$_GET
$jsonData2 = json_encode($_GET);

// 输出json数据
echo $jsoncallback . "(" . $jsonData1 . ")";