2012-09-30 62 views
1

所以我爲我的博客製作了一個JavaScript AJAX加載程序,它無法正常工作。這是工作之前,但當我試圖增加幾個月到解析器和json文件它剛剛停止,並不會加載。Ajax JSON加載程序不能正常工作

這裏是JavaScript:

firstTime = 1; 
function ajax_get_json_for_main_page(a){ 

var counter = 0; 
var results = document.getElementById("blogShow"); 

    var hr = new XMLHttpRequest(); 
    hr.open("GET", "articles/main.json", true); 
    hr.setRequestHeader("Content-type", "application/json", true); 
    hr.onreadystatechange = function() { 
     var blog = new Array() 
     var title = ""; 

     if(hr.readyState == 4 && hr.status == 200) { 
      var data = JSON.parse(hr.responseText); 
      for(var obj in data){ 
       for(var entry in data[obj]) 
       { 
        blog[counter] = "<h4>"+entry[obj].title+"</h4><p>"+entry[obj].post+"</p>"+"<hr />"; 
        title += "<a onClick='willImpletmentlater(" + entry[obj] + ")" + "'>" + entry[obj].title + "</a><br /><br />" 
        counter = counter + 1; 
       } 

      } 
      document.getElementById("big3").innerHTML = title; 

      if(firstTime == 1) 
      { 
      results.innerHTML = blog[0] 
      firstTime = 1000; 
      } 


      if(a == 1) 
      { 
       interval = setInterval(function(){blogShowAnimateInner(1, blog);}, 1); 
      } 
      if(a == 2) 
      { 
       interval = setInterval(function(){blogShowAnimateInner(2, blog);}, 1); 
      } 
      if(a == 3) 
      { 
       interval = setInterval(function(){blogShowAnimateInner(3, blog);}, 1); 
      } 
      if(a == 4) 
      { 
       interval = setInterval(function(){blogShowAnimateInner(4, blog);}, 1); 
      } 


     } 
    } 


hr.send(null); 




} 

而且還JSON:

{ 
    "june": { 
     "17": { 
      "title": "Monday 17 of June 2012", 
      "post": "the post taken out to save space." 
     }, 
     "16": { 
      "title": "Sunday 16 of June 2012", 
      "post": "the post taken out to save space" 
     }, 
     "15": { 
      "title": "Saturday 15 of June 2012", 
      "post": "the post taken out to save space" 
     }, 
     "14": { 
      "title": "Friday 14 of June 2012", 
      "post": "the post taken out to save space" 
     }, 
     "13": { 
      "title": "Thursday 13 of June 2012", 
      "post": "the post taken out to save space" 
     }, 
     "12": { 
      "title": "Wednesday 12 of June 2012", 
      "post": "the post taken out to save space" 
     }, 
     "11": { 
      "title": "Tuesday 11 of June 2012", 
      "post": "the post taken out to save space" 
     }, 
     "10": { 
      "title": "Monday 10 of June 2012", 
      "post": " the post taken out to save space." 
     } 
    } 

}  

我試着去的jsfiddle,但我不認爲他們加載AJAX? 無論哪種方式,他們沒有給我提示。

編輯: 我現在正在這裏工作是建議的主要分析位。

如果(hr.readyState == 4 & & hr.status == 200){ VAR數據= JSON.parse(hr.responseText);

  var blog = []; 
      var title = ""; 
      var counter = 0; 

      for (var month in data) { 
       var monthEntries = data[month]; 
       for (var i = 0; i < monthEntries.length; i++) { 
        var entry = monthEntries[i]; 
        blog[counter] = "<h4>" + entry.title + "</h4><p>" + entry.post + "</p>" + "<hr />"; 
        title += "<a onClick='willImpletmentlater(" + entry + ")" + "'>" + entry.title + "</a><br /><br />" 
        counter = counter + 1; 
       } 

      } 

      console.log(blog); 
      console.log(title); 

      document.getElementById("big3").innerHTML = title; 




      if(a == 1) 
      { 
       interval = setInterval(function(){blogShowAnimateInner(1, blog);}, 1); 
      } 
      if(a == 2) 
      { 
       interval = setInterval(function(){blogShowAnimateInner(2, blog);}, 1); 
      } 
      if(a == 3) 
      { 
       interval = setInterval(function(){blogShowAnimateInner(3, blog);}, 1); 
      } 
      if(a == 4) 
      { 
       interval = setInterval(function(){blogShowAnimateInner(4, blog);}, 1); 
      } 


     } 
    } 

編輯:
所有好現在

編輯:
如果我添加七月不工作,只與6月份的工作。那有點奇怪?

回答

0

啊,我明白你的意思了。你的json響應月份對象不是一個數組,它是一個帶有鍵值對的對象,當你做var key時,對象鍵沒有設定的檢索順序...爲了得到預期的順序,你應該把json響應改爲類似這

{ 
    "june": [ 
     { 
      "day": "17", 
      "title": "Monday 17 of June 2012", 
      "post": "the post taken out to save space." 
     }, 
     { 
      "day": "16", 
      "title": "Sunday 16 of June 2012", 
      "post": "the post taken out to save space" 
     }, 
     { 
      "day": "15", 
      "title": "Saturday 15 of June 2012", 
      "post": "the post taken out to save space" 
     }, 
     { 
      "day":"14", 
      "title": "Friday 14 of June 2012", 
      "post": "the post taken out to save space" 
     }, 
     { "day": "13", 
      "title": "Thursday 13 of June 2012", 
      "post": "the post taken out to save space" 
     }, 
     { "day": "12", 
      "title": "Wednesday 12 of June 2012", 
      "post": "the post taken out to save space" 
     } 
    ] 

} 

我已經更新了jsfiddle。

http://jsfiddle.net/ew44p/1/

+0

感謝您的幫助,我整體上除了你的新答案,但嗯..我想知道你是否可以找出爲什麼如果我再添加像7月的月份它不工作的JSON? – Temere

+0

它應該導致(var month中的數據)每個月應該循環? – Temere

0

它可能應該像你的json結構一樣。

for(var month in data){ 
     var monthEntries = data[month]; 
        for(var day in monthEntries) 
        var entry = monthEntries[day]; 
        { 
         blog[counter] = "<h4>"+entry[day].title+"</h4><p>"+entry[day].post+"</p>"+"<hr />"; 
         title += "<a onClick='willImpletmentlater(" + entry[day] + ")" + "'>" + entry[day].title + "</a><br /><br />" 
         counter = counter + 1; 
        } 

       } 
+0

鉻說,它無法閱讀標題的意思是你的解決方案,其意義的,我沒有達到適當的區域屬性「未定義」? – Temere

+0

for(var month in data){ \t \t \t var monthEntries = data [month]; 爲(VAR一天monthEntries) \t \t \t \t \t \t變種條目=新陣列() \t \t \t \t \t \t條目[天] = monthEntries [天]; \t \t \t \t \t \t alert(day); \t \t \t \t \t \t { \t \t \t \t \t \t \t博客[計數器] = 「

」+條目[天] .title僞+「

」 +條目[天]。後+「

」+「
」; \t \t \t \t \t \t \t標題+ = 「" + entry[day].title + "

」 \t \t \t \t \t \t \t計數器=計數+ 1; \t \t \t \t \t \t} – Temere

+0

我改成上面,它想出了第一,但沒有任何 – Temere