如何發送ajax到同一頁面？

我使用純JS來發送Ajax請求其他PHP頁面，我真的很新的AJAX的概念，所以我不知道很多。我見過jQuery ajax，但我更喜歡學習純js ajax，所以我可以理解ajax是如何工作的。如何發送ajax到同一頁面？

我需要發送AJAX到同一頁面，而不是將其發送到另一個頁面來處理數據。有可能這樣做嗎？如何？

我的索引頁：

<div id="response"></div> 
    <form method="post" id="myForm"> 
     <span>Username: </span> 
     <input type="text" name="uname" id="uname">&nbsp;&nbsp; 
     <span>Age: </span> 
     <input type="number" name="age" id="age">&nbsp;&nbsp; 
     <input type="submit" name="submit" value="Submit"><br> 
    </form> 
    <script src="js/app.js"></script>

我的PHP代碼：

<?php 
    if(isset($_GET['uname']) && isset($_GET['age'])) { 
     $name = trim(strip_tags($_GET['uname'])); $age = trim(strip_tags($_GET['age'])); 
     echo !empty($name) && !empty($age) ? 
      '<p style="color:green">Hello: '.$name.' You\'re '.$age.' Years Old :D</p>' : 
      '<p style="color:red">Please Write your Name and Your Age</p>'; 
    }

我的Ajax代碼：

window.onload = function() { 
    var myForm = document.getElementById('myForm'); 
    myForm.onsubmit = function() { 
     // Create the object from XMLHttpRequest 
     var xhttp = (window.XMLHttpRequest) ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"), 
       uname = document.getElementById('uname').value, 
       age = document.getElementById('age').value, 
       result = document.getElementById('response'), 
       url = 'ajax-thing.php?uname='+uname+'&age='+age; 
     xhttp.onload = function() { 
      result.innerHTML = xhttp.responseText; 
     }; 
     xhttp.open('GET', url, true); 
     xhttp.send(); 
     return false; 
    } 
};

來源

2017-02-22 Maohammed Hayder

首先，jQuery是不是針對你的情況成功的必要條件。其次，你能解釋爲什麼你需要*發送ajax請求到同一頁面嗎？在我看來，你將不得不編寫條件語句來停止原始表單和其他內容被傳回給responseText。如果可以完成，將ajax指向單獨的文件進行處理會更輕便。 – mickmackusa

嘗試使用jQuery

來源

2017-02-22 04:15:03

我想我提到我使用純JS是有原因的。 –

這是可能的。在服務器上，您只需要驗證ajax請求（當您使用ajax發出請求時，請求將附加標頭X-Requested-With: XMLHttpRequest）。如果你想更輕鬆地屏蔽，您可以添加新的PARAMS到的網址，注意服務器知道這是一個Ajax請求，是這樣的：ajax-thing.php?uname='+uname+'&age='+age + '&ajax=1'，並返回任何你想要的，如果這是Ajax請求。

來源

2017-02-22 04:27:05

所以我必須將（＆ajax = 1）添加到網址的末尾？我的意思是我不希望發送Ajax請求（Ajax的thing.php）頁面，而不是我希望它被髮送到同一個網頁（的index.php）。這可能嗎？ –

這是可能的，這個參數只是告訴服務器知道Ajax發送的這個請求，你可以更容易地處理這個請求。 Ajax不關心你的url是否是同一頁。所以不要擔心這一點。 –

但我試圖將請求發送到同一頁面，並將結果之際，整個文檔，我的意思是它打印出來的html文件我已經在當前頁面的結構，你知道是什麼問題？你有沒有試過把請求發送到同一頁面？如果你有一個我能做到的例子，我會很感激你的幫助。謝謝。 –

如何發送ajax到同一頁面？

回答

相關問題