使用AJAX获取JSON数据，然后通过HTML上的ElementID输出数据

Using AJAX to grab JSON data then output data by ElementID on HTML

本文关键字：数据 HTML 上的 输出 ElementID 然后 AJAX 获取 JSON 使用      更新时间：2023-09-26

我目前是AJAX和JSON的新手，我一直在做一些对你来说可能很简单的事情。

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

数据是段落，我被困在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）

这将使用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是该对象的键。

html和javascript都包含需要修复的错误。例如，html有一个额外的ul标记，循环中的"段落"应该是"段落"。

然而，数据格式可能是你遇到困难的原因。您有一个对象数组，每个对象都有一个具有不同名称的键。虽然你可以这样做，但这会使工作变得更加困难。相比之下，字符串数组要容易得多。另见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>

            for (var number = 0; number < paragraphArrayLength; number++) {
            var paragraph = document.getElementById('Paragraph' + (number + 1);
            paragraph.innerHTML = paragraphArray[number -1].keys['Paragraph' + number];
        }

当你迭代段落时，你应该将每个段落设置为一个局部变量。这样，每次迭代你就有一个正在处理的段落。

相关文章：