2010-09-27 30 views
7

Tôi đang cố gắng tải lại tệp JSON cứ 10 giây một lần bằng JQUERY.Cách tải lại JSON bằng AJAX cứ sau 10 giây

Các trang web là ở đây: http://moemonty.com/chirp/chirp.html

Bộ luật là đây:

<html> 
<head> 
<title>the title</title> 
<!-- included Jquery Library --> 
    <script type="text/javascript" src="./js/jquery-1.4.2.js"></script> 
<!-- jquery library --> 
    </head> 
<body> 
<script> 

$.ajaxSetup({ cache: false }); //disallows cachinge, so information should be new 


function loadChirp(){ //start function 

var url = "http://www.chirpradio.org/json"; 
     $.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22"+url+"%22&format=json&callback=?", 
      function(data){ 
      console.log(data.query.results.json); 

       document.write('The artist is: ' + data.query.results.json.artist + '<br/><br/>'); 

       document.write('The artist is: ' + data.query.results.json["record-label"] + '<br/><br/>'); 

       document.write('The album is: ' + data.query.results.json.album + '<br/><br/>'); 

       document.write('The record label is: ' + data.query.results.json["record-label"] + '<br/><br/>'); 

       document.write('The feedback link is: ' + data.query.results.json["feedback-link"] + '<br/><br/>'); 

       document.write('The database id is: ' + data.query.results.json["database-id"] + '<br/><br/>'); 

       document.write('The time is: ' + data.query.results.json.timestamp.time + ' '); 

       document.write(data.query.results.json.timestamp["am-pm"] + '<br/><br/>'); 

       document.write('The current dj is: ' + data.query.results.json["current-dj"] + '<br/><br/>'); 


       setTimeout("loadChirp()",5000); 
       alert('The timeout was triggered.'); 

      }); 

} //end function   


$(document).ready(function(){ 
//DOCUMENT READY FUNCTION 
    loadChirp(); 
}); 
//DOCUMENT READY FUNCTION 


</script> 
</body> 
</html> 

Nó dường như không có tác dụng.

+2

* dường như không hoạt động * là không một mô tả vấn đề rất chính xác. Kết quả mong đợi, kết quả thực tế (thông báo lỗi, mã trạng thái HTTP) là gì? –

+0

Điều gì sẽ xảy ra? – Pointy

+1

Ngoài ra, ngay cả khi mã hết giờ đã hoạt động, tôi không nghĩ rằng tất cả các cuộc gọi 'document.write' đó sẽ làm những gì bạn muốn chúng làm. – Pointy

Trả lời

11

Có thể bạn muốn tập dữ liệu trả về trước đó được thay thế bằng bộ mới, thay vì thêm nó. Trong trường hợp đó, sử dụng jQuery bạn có thể làm:

<div id='content'></div> 
<script> 
    function loadChirp(){ 
     $.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22"+url+"%22&format=json&callback=?", 
       function(data) { 
        $('#content').html('The artist is: ' + data.query.results.json.artist + '<br/><br/>'); 
       }); 
     setTimeout("loadChirp()",5000); 
     } 
</script> 

vv ...

+2

Câu trả lời hay, nhưng 'setTimeout (" loadChirp() ", 5000);' nên là 'setTimeout (loadChirp, 5000);' Nó gần như không bao giờ thích hợp để truyền một chuỗi vào 'setTimeout' hoặc' setInterval'. –

+1

câu hỏi là tải lại sau mỗi 10 giây, vì vậy nó phải là: setInterval (loadChirp, 10000); – George

+0

Nên được setTimeout (loadChirp, 10000); không có() hoặc "" trên hàm loadChirp. Việc gọi hàm với thực thi "()" sẽ mở ra một đệ quy khủng khiếp. –

3

Tôi mong đợi vòng lặp hoạt động như được trích dẫn nhưng có thể có sự tinh tế xung quanh thực tế bạn đang sử dụng JSONP. Tôi sẽ thay đổi cuộc gọi setTimeout tới:

setTimeout(loadChirp, 5000); 

... vì một vài lý do. Trước hết, sử dụng tham chiếu hàm thay vì chuỗi mã là một ý tưởng tốt hơn, và thứ hai, bạn chắc chắn rằng bạn đang nhận được tham chiếu hàm đúng (trong khi với chuỗi, tham chiếu nào bạn nhận được phụ thuộc vào ngữ cảnh trong đó mã được thực hiện).

Nhưng như Pointy đã chỉ ra trong nhận xét, có một vấn đề riêng: document.write sẽ không làm những gì bạn có thể muốn làm ở đó. Bạn chỉ có thể sử dụng document.write để ghi vào luồng HTML đang được phân tích cú pháp như là một phần của tải trang gốc. Sau khi tải trang, bạn không thể sử dụng nó nữa. Cân nhắc sử dụng các chức năng append hoặc appendTo của jQuery và các chức năng tương tự để thêm vào DOM sau khi tải trang.

+0

Downvoter: Tôi đang thiếu gì? –

0

Bạn gặp lỗi trong console.log(data.query.results.json); - bảng điều khiển không được xác định. Ngoài ra, bạn có thể sử dụng setInterval("function()", 5000);.

+1

'giao diện điều khiển 'sẽ được xác định trên nhiều trình duyệt (Firefox, Chrome, ...), chứ không phải trên IE. Tôi đoán nếu anh ta sử dụng nó, anh ta đang sử dụng một trình duyệt mà nó được hỗ trợ. –

+1

Chỉ cần cụ thể hơn, nếu bạn sử dụng setInterval, hãy gọi nó trên tài liệu sẵn sàng, không phải bên trong chính hàm đó. – o15a3d4l11s2

0

Bạn chắc chắn nên sử dụng:

setInterval ("loadChirp", 10000):

Đừng viết loadCrirp() vào trong setInterval vì chúng ta chỉ đi qua một refrence

+0

* "Đừng viết loadCrirp() bên trong setInterval vì chúng ta chỉ đi qua một điểm" * Vậy tại sao ví dụ của bạn vẫn truyền một chuỗi? Bạn cần phải loại bỏ các dấu ngoặc kép để chuyển một tham chiếu đến hàm; nếu không, 'setInterval' sẽ đánh giá chuỗi, mà sẽ không có hiệu lực (ví dụ, nó sẽ không gọi hàm này). –

Các vấn đề liên quan