AJAX/PHP回聲閃爍正確的文本，然後擦除它

好吧，這很奇怪。下面的代碼旨在作爲一個介紹性練習，讓我從AJAX開始，在該練習中，我將一些文本輸入到文本輸入中，單擊提交按鈕，並讓AJAX/PHP在div中以文本形式回顯。當我一次一行地瀏覽這段代碼時，我可以看到我的文本出現在我所在的div的正確位置。但是，當我跨過最後一個大括號時，文字消失了！怎麼會這樣？？我不明白。誰能幫忙？謝謝！AJAX/PHP回聲閃爍正確的文本，然後擦除它

<!DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
</head> 

<body> 

    <script language="javascript" type="text/javascript"> 
    <!-- 
     window.onload = function ajaxFunction() { 
      document.myform.onsubmit = getFeedback; 
     } 

     function getFeedback() { 
      var textvalue = document.getElementById("textfield").value; 
      var xmlhttp; 
      if (window.XMLHttpRequest) { 
       // code for IE7+, Firefox, Chrome, Opera, Safari 
       xmlhttp=new XMLHttpRequest(); 
      } else { 
       // code for IE6, IE5 
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
      xmlhttp.onreadystatechange=function() { 
       if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
        document.getElementById("feedback").innerHTML=textvalue; 
       } 
      } 
      xmlhttp.open("GET","scripts/handle_feedback.php?mytext="+textvalue,true); 
      //at this point in the execution, my text is displayed correctly... 
      xmlhttp.send(); 
     } //...but when I step across this line, the text disappears!!! 
    //--> 
    </script> 

    <div id="textboxdiv"> 
     <form name="myform"> 
      Text Here: <input type="text" id="textfield" /> 
      <button type="submit">Submit</button> 
     </form> 
    </div> 

    <div id="feedback"> 
    </div> 

</body> 

</html>

來源

2013-07-02 Alex

問題是，您沒有取消提交整個頁面的默認表單操作。

由於表單上沒有action屬性，因此默認操作是提交給當前URL--它實際上只是重新加載當前頁面。

您正在通過javascript和ajax自己處理表單，所以您不需要默認操作，並且需要取消它。

有兩種方法來解決這個問題：

返回false從getFeedback()功能

或...
不要擺在首位使用submit按鈕。如果您將按鈕更改爲type="button"，則不需要擔心的默認操作。如果沒有javascript，點擊該類型的按鈕將不會執行任何操作，因此您無需擔心取消提交。

來源

2013-07-02 06:36:13 jcsanyi

就是這樣。非常感謝。我花了一個小時試圖弄清楚這一點。我會盡快接受答案。再次感謝！ – Alex

getfeedback()需要與結束：

return false;

防止默認表單提交的發生。

來源

2013-07-02 06:36:41 Barmar

地址：return false您getFeedback功能

年底另一種可能的解決辦法是使用jquery。

使用jQuery，你可以簡單地使用

$("#mybutton").click(function(e){ 
    e.preventDefault() //stops the form actually submitting 
    $('#feedback').load('scripts/handle_feedback.php?mytext='+$("#textfield").val()); 
});

而且你需要給該按鈕的ID

<button type="submit" id="mybutton">Submit</button>

來源

2013-07-02 06:37:44

真的嗎？這與jQuery完全無關，jQuery絕對沒有必要。我會**不推薦**通過使用jQuery開始學習javascript和ajax。 jQuery可能很有用，但首先了解底層語言/技術總是有幫助的。 – jcsanyi

我同意首先了解底層腳本非常重要。我只是簡單地展示瞭如何用jQuery在幾行簡單的代碼中完成這項工作。判斷是海報的其他問題，他們似乎已經很好地處理了javascript，我認爲這可能是之前被忽視的東西，對於海報或其他正在查看Ajax的人來說可能是有用的。 –

我會接受足夠的刪除我的-1，但我不會去註冊它。 – jcsanyi

AJAX/PHP回聲閃爍正確的文本，然後擦除它

回答

相關問題