onChange 和 onSubmit 之间的 JavaScript 区别

Javascript difference between onChange and onSubmit

本文关键字：JavaScript 区别 之间 onSubmit onChange      更新时间：2023-09-26

我正在使用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，并且填充时间字段。使用 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 的方式有什么区别，以及为什么会发生这个问题。

任何帮助将不胜感激。

我想区别在于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值用于确定默认事件是否继续。

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

<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（） 函数。有关提交说明和示例，请转到以下链接 http://www.w3schools.com/jsref/event_form_onsubmit.asp

相关文章：