如何使用Ajax從Harvard GSD獲取壓光機？

Question

我想通過Ajax進行設置，這是我迄今爲止所做的。我一直試圖弄清楚這一點，似乎無法獲得點擊。請幫助，並提前感謝您。

function getFunction() 
{ 
$(".cals").click(function() 
{ 
    $.get("http://events.cs50.net/api/1.0/calendars?campus=GSD&output=json", function(data, status) 
    { 

     var response = "<h3>GSD Calenders</h3>\n"; 


     response = response + '<ul data-role="listview" data-inset="true" data-filter="true">\n'; 

     var jsonObject = JSON.parse(data); 
     for (var i = 0; i < jsonObject.length; i++) { 
      var calendar = jsonObject[i].calname; 
      response = response 
       + '<li><a href="#item">' 
       + calendar 
       + '</a></li>\n'; } 


     response = response + '</ul>'; 


     $('#calendars').html(response); 
    }); 
}); 
} 

Answer 1

這裏是工作提琴： http://jsfiddle.net/rW9gx/1/

我已經改變了JS這樣：

$(function() { 

    $("#cals").click(function() 
    { 
     $.getJSON("http://events.cs50.net/api/1.0/calendars?campus=GSD&output=json", function(data, status) 
     { 

     var response = "<h3>GSD Calenders</h3>\n"; 
     response = response + '<ul data-role="listview" data-inset="true" data-filter="true">\n'; 

      for (var i = 0; i < data.length; i++) { 
       var calendar = data[i].calname; 
       response = response 
        + '<li><a href="#item">' 
        + calendar 
        + '</a></li>\n'; 
      } 
      response = response + '</ul>'; 
      $('#calendars').html(response); 
     }); 
    }); 

}); 

有幾件事情：

你已經包裹你的點擊事件處理程序一個函數（getFunction），這意味着該處理程序將僅在被觸發後應用。我不知道這是否是有意的，或者如果你的代碼示例是滿的，但在小提琴中我已經刪除它，並將js包裝在文檔就緒函數中，以便在DOM有應用時應用它加載。

我改變了JSON $.get到$.getJSON，這只是在$.ajax或$.get電話寫dataType: "json"的快捷方式。這意味着您不必將返回數據解析爲Json，因爲這是您期望的結果。

否則它工作得很好。