AJAX - OnSubmit问题

Question

我是AJAX的新手，所以请原谅我。

我需要表格 - 第一个有效，但第二个没有，我不知道为什么。第一个html表单没有提交按钮，但第二个表单没有。它们都使用相同的javascript函数。

<script type="text/javascript">
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("GET","server_script.php?q="+str,true);
xmlhttp.send();
}
</script>

从1开始：

<form>
<select name="users" onchange="showUser(this.value)">
<option value="0001">0001</option>

0002            

   此处将列出个人信息。

从2开始：

<form onsubmit="showUser(this.foo.value)">
<input type="foo" >
<input type="submit" >
</form>
<br />
<div id="txtHint"><b>Person info will be listed here.</b></div>

Answer 1

在第一个上你的ajax正在触发onchange，因此没有任何默认行为会干扰它。

在第二个表单上，您正在使用onsubmit事件，该事件具有将表单发布回服务器的默认行为。因此，您必须对该事件return false或preventdefault以允许您的ajax代码完成。最简单的解决方法是简单地添加一个返回false：

<form onsubmit="showUser(this.foo.value); return false;">

Answer 2

让showUser返回false，否则表单将由浏览器通过常规方式提交。