javascript - 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 事件，它具有将表单回发到服务器的默认行为。因此，您必须对该事件返回 false 或 preventdefault 以允许您的 ajax 代码完成。最简单的解决方法是简单地添加一个 return false:

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