JSONP调用中Ajax success回调未触发问题求助

你的核心问题出在JSONP响应格式不匹配，还附带了JSON双重编码的错误，导致浏览器无法识别返回内容为合法的JSONP脚本，进而触发加载失败的报错。下面一步步拆解解决：

1. 修复PHP端的JSONP输出逻辑 #

JSONP的本质是让服务器返回一个JavaScript函数调用，而不是纯JSON。你的前端通过jsonp: "callback"告诉后端：会通过callback参数传递回调函数名，所以PHP需要做两件事：

• 接收前端传来的callback参数
• 把Twitter API返回的JSON数据包裹在这个回调函数里返回

另外你当前代码有个关键错误：$tweets已经是TwitterProxy::get()返回的JSON字符串（直接来自Twitter API的响应），你再调用json_encode($tweets)会把这个JSON字符串转义成带引号的普通字符串，完全不符合JSONP的要求。

修改PHP最后几行代码：

// 原代码：
// $tweets = $twitterConexion->get( $twitter_url );
// echo json_encode($tweets);

// 修改后：
$tweets = $twitterConexion->get( $twitter_url );
// 获取前端传递的callback参数
$callback = isset($_GET['callback']) ? $_GET['callback'] : '';
// 验证callback合法性，防止XSS注入
if (preg_match('/^[a-zA-Z0-9_]+$/', $callback)) {
    // 返回标准JSONP格式：回调函数包裹原始JSON数据
    echo "{$callback}({$tweets})";
} else {
    // 非法callback时返回纯JSON作为 fallback
    echo $tweets;
}

2. 前端代码微调（可选但更严谨） #

你的前端Ajax配置基本正确，不过可以做小优化：

• JSONP只支持GET请求，type:'GET'可以省略，jQuery会自动处理
• success回调里的data是已经解析好的JSON对象，不能直接用.html(data)输出，要转成格式化字符串才能正常显示

微调后的代码：

function doRequest (user){
    $.ajax({
        url: 'https://diegovelserver.000webhostapp.com/php/app.php',
        data: {data: user},
        jsonp: "callback",
        dataType: 'jsonp',
        success: function(data){
            alert("success");
            // 转成格式化的JSON字符串显示
            $('.jsonpResult').html('<pre>' + JSON.stringify(data, null, 2) + '</pre>');
        },
        error: function (e) {
            console.log('错误类型:', e.responseType);
            console.log('状态码:', e.status);
        }
    });
}

3. 错误原因解释 #

• Firefox提示"failed to load script"：因为你返回的是纯JSON（甚至是双重编码的字符串），不是合法的JS脚本，浏览器无法解析执行，所以报错。
• Chrome的net::ERR_SPDY_PROTOCOL_ERROR和404：这是SPDY协议下，浏览器接收到不符合预期的响应内容后触发的协议错误，被错误标记为404（实际后端返回的是200，但内容无效）。

额外验证步骤 #

你可以直接在浏览器访问后端测试URL（比如https://diegovelserver.000webhostapp.com/php/app.php?data=nasa&callback=test），正常情况下应该返回test({"statuses": [...]})这样的格式，说明后端输出正确。

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