1

我正在使用 ajax 进行测试，并在表单中使用 onSubmit 与在表单元素中使用 onChange 时遇到了问题。如果我使用 onSubmit 方法调用 ajax 请求，我得到的状态响应为 0，没有文本响应。

使用 onSubmit 调用 ajax 请求的页面：

<html>
<body>

<script language="javascript" type="text/javascript">
function ajaxFunction(){
    var ajaxRequest;  
        ajaxRequest = new XMLHttpRequest();

    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){                
            document.myForm.time.value = ajaxRequest.responseText;
                            alert(ajaxRequest.status);
        }
    }
    ajaxRequest.open("GET", "serverTime.php", true);
    ajaxRequest.send(null); 
    return false;
}

</script>

<form name='myForm' onsubmit="ajaxFunction();">
Name: <input type='text'  name='username' /> <br />
Time: <input type='text' name='time' />
<input type="submit" id="submitTask" value="Get Time">
</form>
</body>
</html>

但是，如果我使用 onChange 调用 ajax 请求，则状态响应为 200 并填充 Time 字段。使用 onChange 调用 ajax 请求的页面：

<html>
<body>

<script language="javascript" type="text/javascript">
function ajaxFunction(){
    var ajaxRequest;  
        ajaxRequest = new XMLHttpRequest();

    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            document.myForm.time.value = ajaxRequest.responseText;
                            alert(ajaxRequest.status);
        }
    }
    ajaxRequest.open("GET", "serverTime.php", true);
    ajaxRequest.send(null); 
    return false;
}

</script>

<form name='myForm'>
Name: <input type='text' onchange="ajaxFunction();" name='username' /> <br />
Time: <input type='text' name='time' />
<input type="submit" id="submitTask" value="Get Time">
</form>
</body>
</html>

服务器时间.php：

<?php
echo "test";//date("H:i:s"); 
?>

我想知道处理 onsubmit 和 onchange 的方式之间有什么区别，以及为什么会出现这个问题。

任何帮助将不胜感激。

4

2 回答 2

0

onchange 事件只会在您单击提交按钮时触发。另一方面，请考虑下拉列表的示例，只要有人从列表中更改选项，您就可以触发事件。我希望您能听懂我在说什么。如果有任何疑问请告诉我。

<select id="ss">
<option onchange="change()" value="1">v</option>
<option onchange="change()" value="2">c</option>
<option onchange="change()" value="22">d</option>
</select>

因此，在上面的下拉列表中，每当更改选项时，都会调用 change() 函数。有关 onsubmit 的解释和示例，请访问以下链接http://www.w3schools.com/jsref/event_form_onsubmit.asp

于 2013-10-30T10:49:04.380 回答
0

我想不同之处在于submit改变location了页面，因此取消了任何正在进行的 AJAX 请求。因此，它们返回错误和状态0（即服务器没有响应）。

您return false在您的功能中这样做，大概是为了阻止默认的表单操作。这不起作用，因为您需要return false从处理程序本身。这意味着要么在onsubmit属性本身中，要么通过以不同的方式附加处理程序：

onsubmit

<form name='myForm' onsubmit="ajaxFunction();return false;">

使用 Javascript 附加处理程序

// inside your <script> tags
window.onload = function() {
    document.getElementsByName('myForm')[0].onsubmit = ajaxFunction;
};

在第二种情况下（更好：通常最好不要在on*属性中包含 Javascript），该ajaxFunction函数作为事件处理程序附加，并且该return函数的值用于确定默认事件是否继续。

于 2013-10-30T10:55:53.957 回答