Question

我正在使用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>

ServerTime.php：

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

我想知道onsubmit和onchange的处理方式与为什么会出现这个问题有什么不同。

非常感谢任何帮助。

Answer 1

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

Answer 2

我认为不同之处在于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和onSubmit之间的Javascript差异

2 个答案: