Question

我目前不熟悉使用AJAX和JSON，而且我对你可能很简单的事情感到困惑。

我将使用AJAX从JSON中获取数据然后从那里获取数据，我需要将数据输入到我的HTML页面上的指定ElementID中。

数据是Paragraphs，我被困在Javascript部分，我将数据从JSON获取到我的HTML文档上的ElementID。

JSON

{

    "Paragraphs": [

        {
            "Paragraph1": "Hi! I am Person."
        },

        {
            "Paragraph2": "My name is Person and I am a web designer from a Place."
        }

    ]
}

JS

(function () {


    "use strict";
    // Instantiate new xhr object
    var dataFile = "scripts/app.json";
    var request = new XMLHttpRequest();
    request.open('GET', dataFile, true);
    request.addEventListener('readystatechange', function () {
        // wait for file to finish loading
        if (request.readyState === 4) {
            var paragraph = {};

            // read in the json object
            paragraph = JSON.parse(request.responseText);


            // declare local paragraph array container
            var paragraphArray = [];

            // read in the paragraphs array from the json object
            paragraphArray = paragraph.Paragraphs;

            //store
            var paragraphArrayLength = paragraphArray.length;
            //loop
            for (var number = 0; number < paragraphArrayLength; number++) {
                var paragraph = document.getElementById('Paragraph1' + 'Paragraph2' + (number + 1));
                Paragraphs.Paragraph1.innerHTML = paragraphArray[number];
                paragraphs.Paragraph2.innerHTML = paragraphArray[number];
            }
        }
    });
    request.send();

})();

HTML

<div class="container">
    <div class="jumbotron">
        <div class="text-center">
            <h1 id="Paragraph1"></h1>
            <img src="images/portfolio.jpg" class="img-circle" alt="Cinque Terre" width="150" height="150">
            <p class="lead" id="Paragraph2"></p>
            </ul>
        </div>
    </div>
</div>

请帮忙！谢谢你8）

Answer 1

这将使用Paragraphs数组中对象中的键作为要填充值的元素的ID。

for (var i = 0; i < paragraphArrayLength; i++) {
    for (var id in paragraphArray[i]) {
        document.getElementById(id).innerHTML = paragraphArray[i][id];
    }
}

嵌套循环是必需的，因为数组元素是对象，并且每个对象的属性名称都不同。我建议更改JSON结构，使其更加统一，例如

{

    "Paragraphs": [

        {
            "id": "Paragraph1",
            "value": "Hi! I am Person."
        },

        {
            "id": "Paragraph2",
            "value": "My name is Person and I am a web designer from a Place."
        }

    ]
}

或者使Paragraphs成为对象而不是数组，其中ID是该对象的键。

Answer 2

            for (var number = 0; number < paragraphArrayLength; number++) {
            var paragraph = document.getElementById('Paragraph' + (number + 1);

            paragraph.innerHTML = paragraphArray[number -1].keys['Paragraph' + number];
        }

迭代段落时，应将每个段落设置为局部变量。这样，每次迭代你都有1个段落。

Answer 3

你的html和javascript都包含需要修复的错误。例如，html有一个额外的ul标签，“Paragraphs”应该是循环中的“paragraph”。

然而，数据格式可能是您遇到困难的原因。您有一个对象数组，每个对象都有一个具有不同名称的键。虽然你可以这样做，但它更难以使用。相比之下，字符串数组会容易得多。另请参阅Barmar的另一种常用替代方案。

为了更容易理解，我删除了所有无关的代码，包括循环。该片段只是简单地写了每个段落1和2.然而，这里的一些其他解决方案也向您展示了如何遍历数据。

运行代码段进行试用。

// simulated ajax data
var request = {
  responseText: '{"Paragraphs":[{"Paragraph1":"Lions and tigers"},{"Paragraph2":"and bears"}]}'
};


// if (request.readyState === 4) { ...

var paragraph = JSON.parse(request.responseText);
var paragraphArray = paragraph.Paragraphs;

document.getElementById('Paragraph1').innerHTML = paragraphArray[0].Paragraph1;
document.getElementById('Paragraph2').innerHTML = paragraphArray[1].Paragraph2;

<h1 id="Paragraph1"></h1>
<p class="lead" id="Paragraph2"></p>

使用AJAX获取JSON数据，然后通过HTML

3 个答案: