XMLHttpRequest 在 eventListener click 之前抢占地加载 json

目前正在学习AJAX。

我正在测试 XMLHttpRequest 以在单击按钮时加载 json，但它似乎在任何单击发生之前抢先加载 json。

我也尝试使用append(this.responseText(来查看它是否会在每次我单击按钮时附加json，但这也不起作用。

function loadDoc(str) {
let xhttp = new XMLHttpRequest()
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.querySelector("#container").innerHTML = this.responseText;
}
};
xhttp.open('GET', "https://jsonplaceholder.typicode.com/posts/" + str, true);
xhttp.send();
}
let run = document.querySelector('#clickme');
run.addEventListener('click', loadDoc(2));

<html>
<head>
<meta charset="UTF-8">
<title>posts</title>
</head>
<body>
<div id="container">
</div>
<button id="clickme"> click me</button>
</body>
</html>

我在JSFIDDLE上有一个例子

你错误地使用了事件侦听器。通过编写run.addEventListener('click', loadDoc(2))您可以立即调用 loadDoc，然后将其返回值设置为侦听器。你想要的是将一个函数设置为侦听器，该侦听器将以值为 2 运行 loadDoc。因此，您可以使用匿名函数执行此操作，方法是创建一个调用 loadDoc 的匿名函数并将该函数设置为侦听器：

run.addEventListener('click', () => loadDoc(2));

相关内容

最新更新

热门标签：