onChange和onSubmit之间的Javascript差异

我使用ajax进行测试，并在表单元素中使用onSubmit与onChange对比发现问题。如果我使用onSubmit方法调用ajax请求，我得到的状态响应为0，没有文本响应。onChange和onSubmit之间的Javascript差异

页使用的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>

ServerTime.php：

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

我想知道的区别是什么的onsubmit和onchange事件的处理方式，为什么这个问题会之间正在发生。

任何帮助将不胜感激。

来源

2013-10-30 Mr Jandal

onSubmit当您点击提交按钮时触发，onChange会在您更改输入内容时触发。 – Johnny000

我想象中不同的是，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-30 10:55:53 lonesomeday

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>

所以在上面的dropdownlist中，只要选项被改变，change（）函数就会被调用。为的onsubmit解释和例子去以下链接http://www.w3schools.com/jsref/event_form_onsubmit.asp

来源

2013-10-30 10:49:04

onChange和onSubmit之间的Javascript差异

回答

相关问题