Question

嘿，我是js的初学者，如果您可以的话，我现在遇到问题了 这是我的html

 <div class="container">
    <button id="button1">Get Costumer</button>
    <button id="button2">Get Costumers</button>
    <br><br>
    <h1>Customer</h1>
    <div id="Customer"></div>
    <h1>Customers</h1>
    <div id="Customers"></div>
    <div id="output"></div>
</div>

和js

 const xhr = new XMLHttpRequest();
    console.log(xhr);
    xhr.open("GET", "customer.json", !0);
    document.getElementById('button1').addEventListener('click', loadCustomer);
    console.log(xhr);

    function loadCustomer() {
        xhr.onload = function() {
            console.log(1);
            if (this.status === 200) {
                const customer = JSON.parse(this.responseText);
                console.log(customer)
            }
        };
        xhr.send()
    }

当我单击按钮时，它仅显示一次并在控制台中引发此错误

app.js：33未捕获的DOMException：对'XMLHttpRequest'执行'send'失败：对象的状态必须为OPENED。在HTMLButtonElement.loadCustomer

我哪里出错了？ take a look at the screenshot

Answer 1

您需要在xhr方法内重新初始化loadCustomer。只需在该方法内移动初始化代码，它便会开始工作。

document.getElementById('button1').addEventListener('click', loadCustomer);

function loadCustomer() {
  const xhr = new XMLHttpRequest();
  console.log(xhr);
  xhr.open("GET", "customer.json", !0);
  console.log(xhr);

  xhr.onload = function() {
    console.log(1);
    if (this.status === 200) {
      const customer = JSON.parse(this.responseText);
      console.log(customer)
    }
  };
  xhr.send()
}

几个不相关的建议：

显式使用true而不是!0来提高可读性。
您也应该听xhr.onerror。否则，您可能会想知道请求何时失败。

Json String在第二次调用后未显示

1 个答案: