jQuery Ajax请求返回200 OK但无法触发成功回调提示问题

我尝试用Ajax发送数据并获取响应，以下是我的Ajax代码：

jQuery( document ).ready(function() { 
    jQuery( "#district" ).change(function() { 
        var lvType = jQuery(this).val(); 
        if(lvType == '') { 
            alert('Please Enter District First'); 
            return false; 
        } 
        jQuery.ajax({ 
            url: '../wp-content/plugins/sevaapkedwar/menu-pages/search.php?q='+lvType, 
            type: 'get', 
            dataType: 'text/html', 
            success:function(data) { 
                alert('ajax call finished successfully'); 
            }, 
            error: function (err) { 
                console.log(err); 
            } 
        }); 
    });
});

我的search.php代码为：

global $wpdb; 
$q = $_GET['q']; 
$get_m = "select * from `sevaapkedwar_area` where `district_name` = '$q'"; 
$get_st_l = $wpdb->get_results($get_m); 
//print_r($get_st_l); 
$json = array(); 
foreach($get_st_l as $get_st_l){ 
    $json[] = array( 
        'id' => $get_st_l->id, 
        'area' => $get_st_l->area_name 
    ); 
} 
echo json_encode($json);

运行代码后，控制台显示请求状态为200 OK，返回数据为[{"id":"8","area":"City1"}]，但无法弹出“ajax call finished successfully”提示，请问我遗漏了什么？

这问题其实很典型——你设置的dataType和服务器实际返回的数据类型不匹配。

看你的PHP代码，最后输出的是json_encode($json)，也就是标准的JSON格式数据，但你在AJAX配置里写的是dataType: 'text/html'。jQuery的AJAX会严格按照你指定的dataType去解析返回内容，如果服务器返回的是JSON，但你告诉jQuery要解析成HTML，它会尝试把JSON当作HTML处理，这就会触发解析错误，导致success回调不执行，反而会走error回调（你可以在error里打个断点看看，应该能看到解析相关的错误信息）。

修改方法很简单，把dataType改成'json'就行：

jQuery.ajax({ 
    url: '../wp-content/plugins/sevaapkedwar/menu-pages/search.php?q='+lvType, 
    type: 'get', 
    dataType: 'json', // 这里改成json
    success:function(data) { 
        alert('ajax call finished successfully');
        // 现在你还可以直接用data这个JSON对象，比如遍历它
        console.log(data);
    }, 
    error: function (err) { 
        console.log(err); 
    } 
});

另外，还有个优化建议：你的PHP代码最好加上响应头，明确告诉浏览器返回的是JSON类型，这样更规范，也能避免一些潜在的解析问题：

header('Content-Type: application/json'); // 加上这一行
echo json_encode($json);

这样修改后，AJAX的success回调就能正常触发啦！

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