Javascript 文本字段不通过AJAX传递数据

我一直在玩我在网上找到的AJAX函数，让我困惑的是，使用下拉列表，我能够将值发送到搜索页面，而使用文本字段我遇到了困难

<form name="search" action="" method="POST">
Search: <input type="text" name="find" />
<input type="submit" value="Search" onclick="showUser()"/>
</form>

搜索：

这是我正在使用的两种形式。底部的那个可以工作，而顶部的那个是我有问题的那个。你知道为什么会这样吗

<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="200">200</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</form>

<script>
function showUser(str) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  } 
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("POST","sfindme.php?q="+str,true);
  xmlhttp.send();
}
</script>

选择一个人：
200
2.
3.
4.
函数showUser（str）{
如果（str==“”）{
document.getElementById（“txtHint”）.innerHTML=“”；
返回；
} 
if（window.XMLHttpRequest）{
//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}else{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
document.getElementById（“txtHint”）.innerHTML=xmlhttp.responseText；
}
}
open（“POST”，“sfindme.php？q=“+str，true”）；
xmlhttp.send（）；
}

如果您不想重新加载页面；然后，使用一个简单的按钮来触发对

showUser

函数的调用，而不是提交按钮。因此，您的代码应该是：

<form name="search" action="" method="POST">
Search: <input type="text" id="find" />
<input type="button" value="Search" onclick="showUser(document.getElementById('find'))"/>
</form>

<div id ="txtHint">
</div>

<script>
function showUser(str) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  } 
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("POST","sfindme.php?q="+str,true);
  xmlhttp.send();
}
</script>

搜索：
函数showUser（str）{
如果（str==“”）{
document.getElementById（“txtHint”）.innerHTML=“”；
返回；
} 
if（window.XMLHttpRequest）{
//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}else{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
document.getElementById（“txtHint”）.innerHTML=xmlhttp.responseText；
}
}
open（“POST”，“sfindme.php？q=“+str，true”）；
xmlhttp.send（）；
}

您是否注意到其中一个函数调用缺少参数，如作为

str

传递的

this.value

部分中的参数？是的。我尝试使用和不使用

这个值。值
没有任何区别。表单提交了吗？submit按钮通常会提交表单并重新加载页面，此时您的javascript将丢失。文本字段未提交，而选择表单正在工作，但当您单击“提交”按钮时，表单肯定正在提交，至少这是应该发生的事情，因为没有任何东西阻止它？尝试将类型从
submit
更改为
button
，添加
this.value
参数，然后查看发生了什么感谢您的建议。然而，按照你的建议去做。它会导致页面重新加载。@user2691544我已经编辑了答案，现在页面不会重新加载。希望这有帮助！：）