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

Question

我一直在使用我在网上找到的 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>

Answer 1

如果您不想重新加载页面；然后使用一个简单的按钮来触发对 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>