如何使用提交按鈕來激活AJAX功能？

我的網頁上有以下表單和javascript功能。這是一個虛擬函數，我正在使用它來測試我想要做什麼是可能的。如何使用提交按鈕來激活AJAX功能？

我正在試圖做的是有一個窗體發送一個AJAX請求到服務器，以便服務器可以更新數據庫，而頁面本身繼續沿着它的預定路徑。我處於緊張時刻，所以我很遺憾沒有時間重寫整個頁面以更好地支持這一點。我的問題是xmlhttp對象似乎沒有正常返回。我得到一個readyState的4，但status爲0.有人可以請解釋我需要做什麼？

這裏是我的代碼：

ajax.php

<html> 
<head> 
<script type="text/javascript"> 
function test(){ 
    var xmlhttp = new XMLHttpRequest(); 

    xmlhttp.onreadystatechange=function(){ 
     document.getElementById("new").innerHTML+="<b>"+xmlhttp.readyState+"</b> "+xmlhttp.status; 

     if (xmlhttp.readyState==4 && xmlhttp.status==200){ 
      document.getElementById("hello").innerHTML=xmlhttp.responseText; 
     } 
    } 

    xmlhttp.open("GET","response.php",true); 
    xmlhttp.send(); 
} 
</script> 
</head> 

<body> 
<?php 
if ($_POST){ 
    echo $_POST['hello']; 
} 
?> 

<form action="ajax.php" method="post"> 
<input type="text" name="hello" /> 
<input type="submit" value="submit" onclick="test();" /> 
</form> 

<div id="hello"></div> 
<h3>debug</h3> 
<div id="new"></div> 
</body> 
</html>

response.php

<?php 
echo "Hello there"; 
?>

編輯

請注意，我不想上一頁默認行爲。實際上，像往常一樣提交forn 必須。我只是想爲流程添加一個AJAX請求。

來源

2012-01-13 ewok

http://stackoverflow.com/questions/5081674/jquery-prevent-default-browser-form-submit-behaviour-but-submit-form-with-jquer – check123 2012-01-13 14:16:39

http://stackoverflow.com/questions/1357118/javascript-event-preventdefault-vs-return-false – check123 2012-01-13 14:17:39

@ check123請不要說我不想阻止默認行爲。表單需要像平常一樣提交，但我也希望AJAX請求也能發生。 – ewok 2012-01-13 14:18:44

不能觸發AJAX請求，並允許的形式在同一時間提交。當頁面重新加載時，不完整的AJAX請求被取消（如提交表單時的情況）。您必須要麼而不是完全提交表單，或者等到您的AJAX調用完成後再提交表單。如果你想去第二條路線，你可以做如下修改代碼：

<html> 
<head> 
<script type="text/javascript"> 
function test(){ 
    var xmlhttp = new XMLHttpRequest(); 

    xmlhttp.onreadystatechange=function(){ 
     document.getElementById("new").innerHTML+="<b>"+xmlhttp.readyState+"</b> "+xmlhttp.status; 

     if (xmlhttp.readyState==4 && xmlhttp.status==200){ 
      document.getElementById("hello").innerHTML=xmlhttp.responseText; 
      **document.getElementById("ajaxform").submit();** 
     } 
    } 

    xmlhttp.open("GET","response.php",true); 
    xmlhttp.send(); 
} 
</script> 
</head> 

<body> 
<?php 
if ($_POST){ 
    echo $_POST['hello']; 
} 
?> 

<form action="ajax.php" method="post" **id="ajaxform"**> 
<input type="text" name="hello" /> 
<input type="submit" value="submit" onclick="test();**return false;**" /> 
</form> 

<div id="hello"></div> 
<h3>debug</h3> 
<div id="new"></div> 
</body> 
</html>

更改/添加標有**。

請注意，我不喜歡那裏的一些做法，特別是使用HTML標記的onsubmit等屬性來附加Javascript事件處理程序。

來源

2012-01-13 14:37:59

謝謝，這個工程。另一個可能會出現的問題是，這是否可以通過多個提交按鈕完成？ – ewok 2012-01-13 14:49:42

@ewok如果它們全部使用相同的形式，您希望它們都執行相同的AJAX調用，並且您只希望用戶在任何給定的時間點擊其中的一個來提交表單，但它會工作正常你只需在每個HTML標籤中包含'onsubmit =「test（）; return false;'代碼。如果你希望AJAX調用對每個按鈕都是唯一的（即一個按鈕發佈到不同的URL /提交不同的數據到另一個），您需要爲每個按鈕編寫單獨的函數 – 2012-01-13 14:57:30

它將設置的方式是將一個按鈕發佈到頁面的更改（「應用」按鈕）並激活另一個提交按鈕的按鈕我想知道的是當你調用'document.getElementById（「ajaxform」）。submit（）;'時，哪個按鈕會被識別爲已被點擊？ – ewok 2012-01-13 15:09:00

我知道這並不直接回答你的問題，但如果你時間緊張，那麼我會建議只使用jQuery來處理AJAX。

你可以將它連接到一個按鈕按下，然後調用一些代碼：http://api.jquery.com/jQuery.ajax/

如果需要的話，我可以挖掘出一些代碼示例。

來源

2012-01-13 14:16:37 webnoob

一旦按下提交按鈕，瀏覽器就會向服務器提交數據，並且會加載一個新頁面。你可以綁定表單的提交事件，並在事件進行ajax調用，但你會有2個問題。

的瀏覽器可能會重定向之前所有的Ajax數據發送
你不知道，如果Ajax調用成功與否

我會嘗試發送的數據要通過AJAX在發送使用隱藏輸入的相同表單數據。如果兩個呼叫都針對不同的網址，然後試試這個：

var ajaxSent = false; 
$('#myForm').submit(function(e){ 
    if (!ajaxSent){ 
     e.preventDefault(); 
     $.ajax({ 
      url: "ajaxUrl", 
      // data, method, etc 
      success: function(){ 
       ajaxSent = true; 
       $('#myForm').trigger('submit'); 
      } 
    } 
    // else submit the form 
});

來源

2012-01-13 14:35:52 Juank

雖然我更喜歡自己使用jQuery，但問題中的代碼是使用常規的Javascript，並且沒有jQuery標記，或者在問題中沒有提及它。您至少應該在您的回答中指出代碼使用jQuery，可能帶有指向jQuery網站的鏈接。 – 2012-01-13 14:45:42

Downvote，因爲沒有參考這個使用jQuery和OP本來不是。 – webnoob 2012-01-13 15:27:32

如何使用提交按鈕來激活AJAX功能？

回答

相關問題