没有调用 Ajax 的问题答案

【问题标题】：Issue with Ajax is not being called没有调用 Ajax 的问题
【发布时间】：2021-10-05 08:51:52
【问题描述】：

我是学习 Ajax 和 javascript 的初学者。经过几个小时试图找出问题所在，我放弃了，把问题带到了这里。在 W3 学校的教程中，ajax 工作正常。我的代码有一个带有列表和输入框的表单。我想收集列表中选择的项目和输入框中输入的文本。然后，当单击按钮时，将调用带有 ajax 的函数。似乎我的功能没有被识别或该功能什么也不做。代码如下。我将不胜感激。谢谢。

function showCustomer() {
  const xhttp = new XMLHttpRequest();
  var selcriteria = document.getElementById('tcriteria');
  var selcriteriavalue = selcriteria.options[selcriteria.selectedIndex].value;
  var criteriavalue = document.getElementById('bananas').value;
  alert(selcriteriavalue + ' ' + criteriavalue);

  xhttp.onload = function() {
    document.getElementById("txtHint").innerHTML = this.responseText;
  }
  xhttp.open("GET", "action_page.py?tycriteria=" + tcriteria + "&vacriteria=" + vcriteria);
  xhttp.send();
}

<h2>Get Contact using Ajax </h2>
<form action="">
  <select name="tcriteria">
    <option value="">Select a criteria:</option>
    <option value="Name">Name</option>
    <option value="Phone 1 - Value">Telephone</option>
    <option value="Notes">Notes</option>
  </select>
  <input type='text' id='apples' value=''>
  <button type="button" id="bananas" onclick="showCustomer()">Get info</button>
</form>
<br>
<div id="txtHint">Contact data will be shown here...</div>

【问题讨论】：

document.getElementById('tcriteria') 没有 ID 为“tcriteria”的元素。因此引用selcriteria.options[selcriteria.selectedIndex].value 会导致错误“无法读取null 的属性'选项'”。你可以考虑<select name="tcriteria" id="tcriteria">。
vcriteria 未定义。

标签： javascript python html ajax

【解决方案1】：

在您的第 3 行，您尝试获取 id 为 tcriteria 的元素：

var selcriteria = document.getElementById('tcriteria');

但是没有任何具有该 id 的元素，因此您需要将其替换为：

var selcriteria = document.querySelector('[name="tcriteria"]');

注意：如果您不需要支持非常旧的浏览器，您可以使用fetch 代替XMLHttpRequest，使用${var} text ${var2}（仅在反引号中）代替数十个+-s 和let -s 和 const-s 而不是 var-s。您还可以使用箭头函数。

【讨论】：