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差異

回答

相關問題