调用返回JSON的PHP接口报语法错误，但已获取到响应内容

你遇到的这个语法错误，核心原因是JSONP格式不匹配。让我给你拆解下：

为什么会报错？ #

你在JS里指定了dataType: 'jsonp'，这意味着浏览器会按照JSONP的规则来处理响应——JSONP要求服务器返回的内容是「回调函数包裹JSON数据」的格式，比如：

jQuery32103297264247416809_1516181997373({"id":"1","name":"test",...})

但你的PHP接口返回的是纯JSON字符串，浏览器把它当作JS代码执行时，自然会因为{后面直接跟:而抛出语法错误，虽然你能在网络请求里看到响应内容，但JS引擎无法解析它。

另外，你的JS代码里还有两个小问题：

• $(document).ready(function(e) { $(function(){ ... }) }); 是重复绑定DOM就绪事件，其实只需要一层$(function(){ ... })就够了
• 用JSONP的话，jQuery会自动解析响应，不需要再调用$.parseJSON(response)

解决方案分两种情况： #

情况1：继续使用JSONP（适合跨域场景）

需要修改你的PHP接口，让它支持JSONP格式——获取URL中的callback参数，然后把JSON数据包裹在这个回调函数里：

// 获取回调函数名，没有的话留空
$callback = isset($_GET['callback']) ? $_GET['callback'] : '';

// 你的数据（可以是从数据库或其他地方获取的）
$data = [
    "id"=>"1",
    "name"=>"test",
    "country"=>"uk",
    "header"=>"Header",
    "pre_cta_text"=>"Pre CTA",
    "cta_text"=>"CTA text",
    "cta"=>"CTA",
    "img"=>null,
    "active"=>"1"
];

// 输出JSONP格式内容
if (!empty($callback)) {
    echo $callback . '(' . json_encode($data) . ')';
} else {
    // 兼容普通JSON请求
    echo json_encode($data);
}

然后简化你的JS代码：

$(function(){
    $.ajax({
        type:'GET',
        dataType: 'jsonp',
        data: { country: "uk" },
        url: 'http://api.mysite.uk/advertorial/index.php',
        success: function (response){
            // 这里response已经是解析好的JS对象，直接用就行
            console.log(response);
        },
        error : function () {
            console.log('Error');
        }
    });
});

情况2：改用普通JSON请求（适合同域场景）

如果你的前端页面和PHP接口在同一个域名下，完全不需要用JSONP，直接把dataType改成json即可：

$(function(){
    $.ajax({
        type:'GET',
        dataType: 'json',
        data: { country: "uk" },
        url: 'http://api.mysite.uk/advertorial/index.php',
        success: function (response){
            console.log(response);
        },
        error : function () {
            console.log('Error');
        }
    });
});

这种情况下，你的PHP接口返回纯JSON就完全没问题，不需要修改。

内容的提问来源于stack exchange，提问作者frabis