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');