AJAX請求第一次不工作，但此後工作

-1

我正在製作一個簡單的功能，因爲它顯示在w3schools官方網站上。我試圖運行一個AJAX請求的功能。AJAX請求第一次不工作，但此後工作

我想這一切都運行良好，除了代碼只在第一次失敗後運行的事實。我的意思是，假設您剛剛第一次來到我的網站，而您嘗試提交第一次，它只是刷新頁面，沒有任何反應。

據我所知，我嘗試在每一行中使用alert函數進行調試，以查找請求是否真的被創建。我發現readyState在代碼運行的第一次（在每個瀏覽器，不同的計算機上）從1跳到4，但下一次它會渲染readyState 1,2,3和4，它會工作並提交。

我想過有關餅乾的事嗎？但我仍然想知道這是什麼原因。請大家幫忙。

JavaScript函數代碼（head標籤內）

function sendForm() { 

    var criarRequest = new XMLHttpRequest(); 
    criarRequest.onreadystatechange = function() { 
     if (criarRequest.readyState == 4 && criarRequest.status == 200) { 
      document.getElementById("contacts").innerHTML = criarRequest.responseText; 
     } 
    }; 
    //var loading = document.getElementById("contacts").innerHTML = "A enviar..."; 
    var inputEmail = document.getElementById("email").value; 
    var inputMensagem = document.getElementById("mensagem").value; 
    criarRequest.open("POST", "sendEmail.php", true); 
    criarRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    criarRequest.send("email="+inputEmail+"&mensagem="+inputEmail); 
}

HTML代碼的形式/輸入

<form> 
    <input style="width:220px; height:39px" type="text" id="email" placeholder="Email" /> 
    <br /> <br /> 
    <textarea style="width:220px; height:100px" id="mensagem" placeholder="Mensagem"></textarea> 
    <br /> <br /> 
    <button id="enviar" onclick="sendForm()">Enviar</button> 
</form>

請給我唯一的純潔，RAW JAVASCRIPT的解決方案，沒有jQuery的。

來源

2016-06-21 joaogeraldes

其實很簡單：P按鈕是「提交」的默認屬性「類型」，當發生這種情況時，表單被提交導致刷新。添加'type =「button」'來改變這個功能，並且你不應該再刷新，以允許ajax完成它的請求。

來源

2016-06-21 20:14:46

非常感謝！它現在工作很簡單。我無法相信我已經失去了太多的時間來審查我的js代碼。 – joaogeraldes

你知道爲什麼它會在第一次「失敗」提交後生效嗎？ – joaogeraldes

不完全確定爲什麼，但它應該每次刷新。我能看到它工作的唯一原因是你的服務器緩存了結果並看到相同的請求，所以它有一個更快的響應，但它仍然令人耳目一新。第一次點擊後您的頁面是否仍然清爽？ –

AJAX請求第一次不工作，但此後工作

回答

相關問題