Javascript event.prevent 默認在 wordpress 上不起作用

Question

我正在制作一個自定義 HTML 頁面以添加到 WordPress 網站。 我創建了一個表單，因此我可以在提交該表單時調用 API 並將響應記錄到控制台，但在提交頁面時會重新加載。 我怎樣才能解決這個問題？

HTML

<div>
  <div>
  <form id="form">
    <input class="input" placeholder="address" type="text">
    <button type="submit">Submit</button>
  </form>
  </div>
</div>

<script>
const form = document.querySelector('#form');
const addressValue = document.querySelector('.input').value;
form.addEventListener('submit', (event)=>{
  const xhr = new XMLHttpRequest();
  xhr.open('GET', http://www.zillow.com/webservice/GetSearchResults.htm?zws-id=<X1-ZWz171ov3ap3pn_4hjdy>>&address=addressValue);
xhr.onload = ()=>{
 console.log(xhr.response);
}
xhr.send();
event.preventDefault();
})

</script>

Answer 1

我在這一行中看到您沒有將 xhr url 請求放在引號之間，這可能是為了做到這一點。

 xhr.open('GET', http://www.zillow.com/webservice/GetSearchResults.htm?zws-id=<X1-ZWz171ov3ap3pn_4hjdy>>&address=addressValue);

應該是這樣

xhr.open('GET', 'http://www.zillow.com/webservice/GetSearchResults.htm?zws-id=<X1-ZWz171ov3ap3pn_4hjdy>>&address=addressValue');