jQuery ajax请求json数据回调函数中data为undefined解决方法

本文主要讨论IE9下使用$.ajax获取json数据时可能遇到的回调函数中data为undefined的问题。
问题的前提是：

• 数据成功返回
• 回调函数成功执行

如果不是这样，你可能就要考虑json数据是否正确，dataType类型和返回类型是否一致，下面的内容也就不用看了。

问题描述

js数据请求代码：

$("#btn1").on("click",function(){
        $.ajax({
            type: "GET",
            url: "php/runton_lastMember.php",
            dataType: "json",
            success: function(data){
                console.log("data = "+data);
var userData = eval(data);
if (userData.length > 0){
var htmlText = "";
for (var i = 0; i < userData.length; i++) {
                        htmlText += "<li><a href='#' title='" + userData[i].username + "'>";
                        htmlText += "<img src='" + userData[i].user_pic + "' alt=''/></a></li>";
                    }
                    $("#content").empty().append(htmlText);
                }
            },
            error:function(data){
                console.log("失败");
            }
        });
    });

我们知道IE9是支持$.ajax异步请求数据的。这段请求代码中我要获取经过runton_lastMember.php脚本处理后返回的json数据。再将返回的数据插入到页面中显示出来。

紧接着我们来看看runton_lastMember.php脚本文件中的代码：

<?php
 header("Content-Type:application/json;charset=utf8");
require_once('runton_fns.php');

$conn = db_connect(); //连接数据库
$sql = "SET NAMES UTF8";

$conn->query($sql);

//从user表中获取最近的8个用户信息
$sql ="select * from users order by user_id desc limit 0,8";
$result = $conn->query($sql);

$arr =array();
//检查执行返回结果是否为空
if($result&&$conn->affected_rows){
while($row = $result->fetch_assoc()){
$arr[] =$row;
 };
echo json_encode($arr); //返回json数据
 }else{
echo '[]';
 }

看过请求代码和php脚本，貌似应该不会有问题的。经过在各浏览器中的测试发现：
Chrome、Firefox、360浏览器等浏览器中可以正常获得数据，但是在IE9中，出现如下结果：

我们再看看响应头：

看过请求响应后，我百思不得其解。为什么响应成功了 .ajax回调函数中data会没有数据？于是百度了一下，有说可能是json数据格式问题。检查一番，感觉问题不是这个。百度上也没有找到问题的答案。于是写了个json文件，通过 .ajax请求json文件获取数据看看：

$("#btn2").on("click",function(){
        $.ajax({
            type: "GET",
            url: "demo.json",
            dataType: "json",
            success: function(data){
var userData = eval(data);
if (userData.length > 0){
var htmlText = "";

for (var i = 0; i < userData.length; i++) {
                        htmlText += "<li><a href='#' title='" + userData[i].username + "'>";
                        htmlText += "<img src='" + userData[i].user_pic + "' alt=''/></a></li>";
                    }
                    $("#content").empty().append(htmlText);
                }
            },
            error:function(data){
                console.log("失败");
            }
        });
    });

经过测试发现可以访问到demo.json中的数据。看看请求json文件的响应头：

经过对比发现区别就在响应头中Content-Type的值上，之前php脚本中将响应头设置为：

Content-Type:application/json;charset=utf8;

问题就出在这，IE9下$.ajax获取json数据，dataType需要设置为”json”，同时php脚本响应头Content-Type也要设置为响应的类型application/json，并且要单独设置不要包含charset=utf8。

同样我们在请求XML数据时，也可能遇到这种情况，因此在脚本中最好也要这样设置响应头。