Как отправить ajax на эту же страницу?

Question

Я использую чистые js для отправки ajax-запроса на другую .php-страницу, я действительно новичок в концепции ajax, поэтому не знаю многого. Я видел jQuery ajax, но я предпочитаю изучать чистый js 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>'; 
    } 

мой Аякса код:

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; 
    } 
}; 

Answer 1

Попробуйте использовать Jquery

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $.ajax({ 
      url: 'ajax-thing.php', 
      data: "uname="+uname+"&age="+age, 
      success: function(data) { 
      console.log(data); // it will show the result in console 
      } 
     }); 
    }); 
</script> 

Answer 2

это возможно. На сервере вам нужно только проверить запрос ajax (когда вы делаете запрос с помощью ajax, к запросу будет прикреплен заголовок X-Requested-With: XMLHttpRequest). Если вы хотите сделать это проще, вы можете добавить новые параметры в url, чтобы заметить, что сервер знает, что это запрос ajax, например: ajax-thing.php?uname='+uname+'&age='+age + '&ajax=1' и возвращать все, что хотите, если это запрос ajax.