【问题标题】:Using JSONP and I have 'ReferenceError: data not defined'使用 JSONP,我有 'ReferenceError: data not defined'
【发布时间】:2016-04-24 11:24:18
【问题描述】:

我在显示通过 JSONP 调用的 JSON 数据时遇到问题。我有一个通过 URL 跨域传递的复杂 JSON 文件,而且我是 JSON 和 ajax 的新手。我在https://learn.jquery.com/ajax/working-with-jsonp/ 关注了一篇 JSONP 文章,这很奏效。现在,在遵循这个问题How do I iterate through this JSON object in jQuery? 之后,我正在尝试遍历 JSON 对象并在 HTML 页面中显示数据,但我不会去任何地方。数据未定义,我不确定自己做错了什么:

// Using LibCal and JSONP
$.ajax({
    url: "https://api2.libcal.com/1.0/room_bookings_nickname/?iid=3356&group_id=12306&key=92a47e5c854dee620cca071648c3fc41",

    // The name of the callback parameter, as specified by the YQL service
    jsonp: "callback",

    // Tell jQuery we're expecting JSONP
    dataType: "jsonp",

    // Tell LibCal what we want and that we want JSON
    data: {
        q: "select Room name,booked timeslots,booking name from LibCal room bookings",
        format: "json"
    },

    // Work with the response
    success: function( response ) {
        console.log( response ); // server response
    }
});

$.each(data.bookings, function(index, element) {
    alert(element.timeslots.room_name); 
});

我希望这对我们那里的高级用户来说是一个明显的修复:)

【问题讨论】:

    标签: javascript jquery json ajax


    【解决方案1】:

    那是因为您的 data 对象不存在。您所指的 data 键是您传递给 $.ajax 方法的对象上的一个。

    您需要在success 回调中执行您的函数才能使其有意义。

    $.ajax({
        ...
        // keep all your original stuff
        ...
        success: function( response ) {
            var data = response;
            $.each(data.bookings, function(index, element) {
                alert(element.timeslots.room_name); 
            });
        }
    });
    

    【讨论】:

    • 啊,“新手”错误。我现在已经修复了代码,所以它不会抛出错误。现在的问题是查看 JSON 数据树 - 得到很多未定义的对象。
    • @RyanCoolwebs 发生在我们当中。至于未定义的对象,如果那是您从服务器获得的 - 祝您好运。不知道我可以如何帮助你:D
    【解决方案2】:

    我做了这样的请求。您需要再上一层才能访问要循环的数组。

    var json_url = "https://api2.libcal.com/1.0/room_bookings_nickname/?iid=3356&group_id=12306&key=92a47e5c854dee620cca071648c3fc41"
    
    $.ajax({
      url: json_url,
      crossDomain:true,
      dataType:"jsonp"
    }).done(function(response) {
       // at the end of request 
    
       //Yours --->response.bookings
       //Mine  --->response.bookings.timeslots
    
         //access the array to loop
       var rooms = response.bookings.timeslots;
    
       $.each(rooms, function(index, element) {
          create_elem(element.room_name, index); 
      });
    });
    

    这是 jsFiddle 中的工作版本 - https://jsfiddle.net/9e746pkh/

    希望这会有所帮助。

    【讨论】:

    • 我没有看到问题的迭代部分。我的错,让我试一试。
    • 它在 JSFiddle 中工作?我在那里遇到了真正的问题,所以我在括号中做了自己的。
    • @RyanCoolwebs 是的,它有效。我刚刚更新了我的答案。它适用于 JSFiddle,因为我允许 crossDomain:true。检查jsfiddle.net/9e746pkh
    • 谢谢@Devtye,你成功了!我对我的代码进行了更新,我的控制台日志拉回了我想要的数据列表。也没有意识到 JSFiddle 有一个允许 crossDomain:true 的选项,但看起来 JSFiddle 最近经历了一次整容/升级。再次感谢。
    • @RyanCoolwebs 是的,jsFiddle 是一个出色的工具,他们最近几天在这方面做了很多工作,不客气。我很高兴能帮上忙:)
    猜你喜欢
    • 2021-09-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-10-13
    • 2014-03-03
    • 2015-08-11
    • 1970-01-01
    • 2021-12-08
    相关资源
    最近更新 更多