AJAX - OnSubmit 问题答案

【问题标题】：AJAX - OnSubmit ProblemAJAX - OnSubmit 问题
【发布时间】：2011-08-04 00:55:25
【问题描述】：

我对 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>

【问题讨论】：

标签： javascript html ajax dom

【解决方案1】：

让showUser返回false，否则表单会被浏览器按常规方式提交。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：