Question

我试图从我的localhost获取json文件的内容并将其显示在我的页面上，我创建了一个自定义函数displayProfile，只要文件存在于目录中，就会在success内调用。问题是我得到一个错误说：

TypeError：数据未定义

JQUERY代码版本1

$.ajax({
    url:'api/profile.json',
    dataType:'json',
    data: {format: "json"},
    success:function(data){
        displayProfile();
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        //alert(textStatus+' '+errorThrown);
        $("#myfirstname").text('Firstname');
        $("#mymiddlename").text('M.I.');
        $("#mylastname").text("Lastname");
        $("#mybiography").text("Biography")
        $("#myprofpic").attr("src","default.jpg");
        $("#mycoverphoto").css("background-image","url(defaultcover.jpg");
        }
});

var displayProfile = function(data){
    // initialize values
    var firstname = data.profile.firstname;
    var middlename = data.profile.middlename;
    var lastname = data.profile.lastname;
    var biography = data.profile.biography;
    var prof_pic = data.profile.profpic;
    var cover_photo = data.profile.coverphoto;

    // set values
    $("#myfirstname").text(firstname);
    $("#mymiddlename").text(middlename.substr(0,1)+".");
    $("#mylastname").text(lastname);
    $("#mybiography").text(biography)
    $("#myprofpic").attr('src',prof_pic);
    $("#mycoverphoto").css("background-image","url("+cover_photo+")");
};

但是当我复制函数的内容并将其粘贴到成功中时，它就可以了：

JQUERY代码版本2

$.ajax({
    url:'api/profile.json',
    dataType:'json',
    data: {format: "json"},
    success:function(data){
        // initialize values
        var firstname = data.profile.firstname;
        var middlename = data.profile.middlename;
        var lastname = data.profile.lastname;
        var biography = data.profile.biography;
        var prof_pic = data.profile.profpic;
        var cover_photo = data.profile.coverphoto;

        // set values
        $("#myfirstname").text(firstname);
        $("#mymiddlename").text(middlename.substr(0,1)+".");
        $("#mylastname").text(lastname);
        $("#mybiography").text(biography)
        $("#myprofpic").attr('src',prof_pic);
        $("#mycoverphoto").css("background-image","url("+cover_photo+")");
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        //alert(textStatus+' '+errorThrown);
        $("#myfirstname").text('Firstname');
        $("#mymiddlename").text('M.I.');
        $("#mylastname").text("Lastname");
        $("#mybiography").text("Biography")
        $("#myprofpic").attr("src","default.jpg");
        $("#mycoverphoto").css("defaultcover.jpg)");
        }
});

你们能解释为什么版本2有效吗？我是这种语言的初学者。谢谢！

Answer 1

您必须传递成功处理程序中返回的data：

success:function(data){
    displayProfile(data);
},

为什么版本2有效？

这是因为您直接在成功处理程序中引用数据，而数据是在函数的参数中定义的。

在你的第一个案例中，你没有通过ajax返回的data。因此， undefined 和 的结果不起作用 。

如上所述 Rory 中提到的使用该函数作为参考，那么它将能够解析data因为它是在函数的参数中定义：

success: displayProfile,

Answer 2

您没有在函数中传递数据：

success:function(data){
    // Provide the data to the function as parameter
    displayProfile(data);
}

Answer 3

$.ajax({
    url:'api/profile.json',
    dataType:'json',
    data: {format: "json"},
    success:function(data){
        displayProfile(data);//Must have the corresponding parameters
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        //alert(textStatus+' '+errorThrown);
        $("#myfirstname").text('Firstname');
        $("#mymiddlename").text('M.I.');
        $("#mylastname").text("Lastname");
        $("#mybiography").text("Biography")
        $("#myprofpic").attr("src","default.jpg");
        $("#mycoverphoto").css("background-image","url(defaultcover.jpg");
        }
});

var displayProfile = function(data){
    // initialize values
    var firstname = data.profile.firstname;
    var middlename = data.profile.middlename;
    var lastname = data.profile.lastname;
    var biography = data.profile.biography;
    var prof_pic = data.profile.profpic;
    var cover_photo = data.profile.coverphoto;

    // set values
    $("#myfirstname").text(firstname);
    $("#mymiddlename").text(middlename.substr(0,1)+".");
    $("#mylastname").text(lastname);
    $("#mybiography").text(biography)
    $("#myprofpic").attr('src',prof_pic);
    $("#mycoverphoto").css("background-image","url("+cover_photo+")");
};

为什么ajax在成功调用函数时会返回TypeError未定义错误？

3 个答案: