表单中的AJAX出现问题

时间:2019-07-11 02:17:31

标签: javascript ajax

我是JavaScript的新手。我尝试从表单中使用AJAX,并不断收到“ HTTP ERROR 405”。

我一直在观看视频课程,因此我在自己的环境中测试了示例代码,并且效果很好。但是这个例子不是形式上的。因此,我从代码中删除了和,AJAX正常运行。但是我需要以某种形式工作。我想以这种形式对服务器进行几次AJAX调用,并且需要知道如何使它们工作。

这是失败的HTML代码:

<form id="Match_Results" action="#" method="post">
  <fieldset>
  <legend>Before the Match</legend>
  <div id="which_league">
    <button id=get_leagues>Get Leagues</button>
    <div id="output"></div>
  </div>
  </fieldset>
</form>

这是JS:

document.getElementById('get_leagues').addEventListener('click', loadData);

function loadData() {
  const xhr = new XMLHttpRequest();

xhr.open('GET', 'leagues.txt', true);

xhr.onload = function(){
    console.log('READYSTATE', xhr.readyState);
    if(this.status === 200) {
      console.log(this.responseText);
      document.getElementById('output').innerHTML = `<h2>${this.responseText}</h2>`;
  }
}

xhr.onerror = function() {
  console.log('Request error...');
}

xhr.send();

这只是使它起作用的第一步,所以我只是拉入本地文本文件并使用按钮。稍后,实际代码将自动执行此操作,而无需按钮,而是通过PHP页面从MySQL数据库中提取。但是我什至无法正常工作。

0 个答案:

没有答案