时间戳

首页 > 解决方案 > XMLHttpRequest 在 eventListener 点击之前抢先加载 json

javascript - XMLHttpRequest 在 eventListener 点击之前抢先加载 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上的例子

标签： javascripthtmlajax

解决方案

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

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

推荐阅读