gpt4 book ai didi

javascript - 如何在 JavaScript 中的另一个函数中创建 xmlhttprequest 和 onload 函数?

转载 作者:太空宇宙 更新时间:2023-11-04 16:06:26 26 4
gpt4 key购买 nike

我有一个脚本,可以使 xmlhttprequest 获取并解析 JSON。对于从 JSON 获取的每个值,脚本会在前一个 JSON 的 forEach 循环中创建另一个 xmlhttprequest ,并尝试附加从第二个 JSON 获取的数据中的 HTML。

我的脚本:

var request; 
request = new XMLHttpRequest(); //make request to post-list file
request.open('GET', 'main.json', true); //post-list file is in base folder
request.onload = function () {
var dat;
dat = JSON.parse(request.responseText); //parse the post-list json
dat.forEach(function (data) {
req = new XMLHttpRequest(); //make new request for post-detail file
req.open('GET', data.postid + '.json', true); //path to post-detail file is acquired from post-list file
req.onload = function () {
info = JSON.parse(req.responseText); //parse the post-detail file
// function for page contents
document.getElementsByClassName('main-content')[0].innerHTML += '<div class="post"><h2><a href="/post.html?id=' + info.postid + '">' + info.title + '</a></h2><p>' + info.excerpt + '...</p></div>';
};
});
};
request.send();

我的 HTML:

<!DOCTYPE html>
<html>
<head>
<script src = "js/main.js"></script>
</head>
<body>
<div class="main-content"></div>
</body>
</html>

我的main.json:

[
{
"postid": "2",
"author": "John Doe"
},
{
"postid": "1",
"author": "John Doe"
}
]

我的 1.json:(请求为 data.postid.json):

{
"postid": "1",
"author": "Jhon Doe",
"title": "This is the first title.",
"category": [
"Music",
"Lifestyle"
],
"year": "2017",
"month": "Jan",
"date": "24",
"text": "<p>This is post 1 full text.</p><p>This is the second paragraph.</p>",
"excerpt": ""
}

实现:http://embed.plnkr.co/B9v5OZK7yAQykmRStECA/

我的结果:仅执行第二次加载之外的命令。我无法检查第二个 JSON 是否已成功解析。

如果我能在不使用 jQuery 的情况下完成此操作,我会很高兴。

最佳答案

您忘记在 forEach 循环内调用 req.send()。如果您不调用它,则永远不会进行 HTTP 调用。

我还将 event 参数添加到两个 onload 调用中,并使用 event.target.responseText 变量来获取要解析的响应

var request; 
request = new XMLHttpRequest();
request.open('GET', 'main.json', true);
request.onload = function (event) { // <-- Add event argument
var dat;
dat = JSON.parse(event.target.responseText); // <-- and use event.target to get the response text
dat.forEach(function (data) {
req = new XMLHttpRequest();
req.open('GET', data.postid + '.json', true);
req.onload = function (event) { // <-- Add event argument
info = JSON.parse(event.target.responseText); // <-- and use event.target to get the response text
var cat = info.category;
var catl = cat.length;
var ti = '';
for (i = 0; i < catl; i++) {
ti += '<a href="category.html?id=' + cat[i].replace(" ", "-") + '">' + cat[i] + '</a>';
if (i < catl - 1) {
ti += ', ';
}
}
document.getElementsByClassName('main-content')[0].innerHTML += '<div class="post"><h2><a href="/post.html?id=' + info.postid + '">' + info.title + '</a></h2><p>' + info.excerpt + '...</p><div class="meta"><a href="/author.html?id=' + info.author.replace(" ", "-") + '">' + info.author + '</a> in ' + ti + ' <i class="link-spacer"></i> ' + info.month + ' ' + info.date + ', ' + info.year + ' <i class="link-spacer"></i> <i class="fa fa-bookmark"></i> ' + info.time + ' min read </div></div>';
};
req.send(); // <-- You need to send every inner request, otherwise the HTTP call is never made
});
};
request.send();

请参阅此处的工作示例:https://plnkr.co/edit/Alewp8nW9aPjlbO0DDi1

关于javascript - 如何在 JavaScript 中的另一个函数中创建 xmlhttprequest 和 onload 函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41827211/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com