如何发送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到同一页面？

回答

相关问题