1

そこで、ブログ用の JavaScript 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をロードしていないと思いますか? いずれにせよ、彼らは私にヒントを与えませんでした。

編集：私は今それが働いています。ここに提案されているメインの解析ビットがあります。

if(hr.readyState == 4 && hr.status == 200) { var data = 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);  
            }


        }
    }

編集：
すべて順調です

編集：
7月が機能しないと追加した場合、6月でのみ機能します。それはちょっと変ですか？

4

2 に答える 2

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;
                    }

                }
于 2012-09-30T01:15:58.363 に答える
0

ああ、おっしゃる意味がわかります。JSON応答の月のオブジェクトは配列ではなく、キーと値のペアを持つオブジェクトであり、オブジェクトキーには、varキーを実行するときに取得の順序が設定されていません...期待される順序を取得するには、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/

于 2012-09-30T03:28:22.520 に答える