是ajax实际工作？

Question

我使用JS ajax和PHP进行游戏即时通讯的登录和注册系统。

我的问题是我不知道ajax请求实际上正在处理我指向它的php代码。当我运行代码时，网页上发生了正确的事情，但是我已经将一个var_dump（）放入了php中，以确保数据实际存在，但是我没有在网页上显示从php上的任何内容，就像您通常使用var_dump （）

赫雷什使用HTML IM：

<article id="container"> 
    <div id="load-new" class="game_menu"> 
     <h1>LOAD/NEW</h1> 
    </div> 
    <div id="reg" class="game_menu"> 
     <h1>REGISTER</h1> 
     <form name="register" method="post" action=""> 
       <label for="usernamesignup" class="uname">Your username</label> 
       <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="Username" /> 
       <label for="emailsignup" class="youmail"> Your email</label> 
       <input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="domain@mydomain.com"/> 
       <label for="passwordsignup" class="youpasswd">Your password </label> 
       <input id="passwordsignup" name="passwordsignup" required="required" type="password"/> 
       <label for="passwordsignup_confirm" class="youpasswd">Please confirm your password </label> 
       <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password"/> 
       <button id="reg_submit" type="button">Register</button> 
     </form> 
    </div> 
    <div id="login" class="game_menu"> 
     <h1>LOGIN</h1> 
     <form name="login" method="post" action=""> 
      <label for="username" id="username_label">Username:</label> 
      <input type="text" name="username" id="username" value=""/> 
      <label for="password" id="password_label">Password:</label> 
      <input type="password" name="password" id="password" value=""/> 
      <button id="login_submit" type="button">Login</button> 
     </form> 
    </div> 
    <div id="access" class="game_menu"> 
     <h1>ACCESS</h1> 
     <button id="login_but" type="button">Login</button> 
     <button id="reg_but" type="button">Register</button> 
    </div> 

继承人与AJAX请求使用JS IM：

this.login_ajax = function() 
{ 
     var username = $("#username").val(); 
     var password = $("#password").val(); 

     var dataString = 'username='+ username + '&password='+ password; 
     alert(dataString); 

    $.ajax({ 
     type:"POST", 
     url:"PHP/login.php", 
     data: dataString, 
     success: function() { 
      $('#login').hide(); 
      $('#load-new').show(); 
     }, 
     error: function(){ 
      alert("ERROR"); 
     } 

    }); 
}; 

，这里是PHP文件是运行：

if ((isset($_POST['username'])) && (strlen(trim($_POST['username'])) > 0)) { 
    $username = stripslashes(strip_tags($_POST['username'])); 
} else {$username = 'No username entered';} 
if ((isset($_POST['password'])) && (strlen(trim($_POST['password'])) > 0)) { 
    $password = stripslashes(strip_tags($_POST['password'])); 
} else {$password = 'No password entered';} 

var_dump($username); 

就像我说的，ajax请求返回成功，但即时通讯从PHP文件，这让我觉得，没有转储是实际运行的PHP文件？

谢谢

Answer 1

直接从浏览器运行php文件来检查结果。如果您使用GET，至少在开发时更容易。

而且您的代码不会与从服务器收到的信息进行交互。回调应该有一个参数

success: function (data) { 

    alert(data); 

} 

编辑

AJAX活动通常由服务器执行程序（你的情况的login.php），并检索结果（一字符串）。但是从服务器询问信息并且不采取任何措施会很愚蠢，对吧？所以这就是为什么我们为成功定义回调函数的原因。

想象一下，您有一个.php文件，该文件在数据库中查找书籍的参考，并打印出作者的名称。您在客户端检索什么是作者的名字......这样一个天真的回调函数可以是：

success: function (author) { 
    alert('that book was written by ' + author); 
} 

成功回调的第一个参数是从服务器接收到的字符串。如果您想要返回多个值而不是字符串，则应该使用$ .getJSON函数，或者在$ .ajax中指定要将结果解析为JSON。

Answer 2

在success（）中，您可以检查查看从PHP传递到您的HTML页面的数据。您必须设置成功函数（data）{...}，并执行诸如console.log（data）之类的操作。在成功功能本身。然后打开浏览器并查看console.log正在吐出什么。

而且如果你用谷歌Chrome浏览器 - 我强烈建议下载Chrome插件PHP Console检查将来PHP错误和警告。它可能不完美，但我认为它太棒了！

Answer 3

还有一种更简单的方法来检查AJAX请求，而不是通过控制台通过AJAX回调来检查结果。日志，你将能够看到全部请求/响应的细节，包括HTTP状态代码（所以你可以看看你是否没有收到500服务器错误）。

• 首先设置你的服务器端脚本（在你的情况下是PHP）来转储你需要检查的所有东西。不管它的格式是什么（JSON/XML /明文），因为我们稍后会查看原始响应。

• 将按钮添加到您的HTML和电线它在jQuery来就点击AJAX请求：

  $（ '＃testButton'）点击（函数（）{$ 阿贾克斯（选项）。 }）;

大部分浏览器现在有开发工具（在Firefox萤火虫？）

在Chrome：

• 按F12打开开发人员工具。
• 切换到网络选项卡。
• 从打开网络选项卡的那一刻起，devtools开始记录每个从该页面创建的请求。
• 现在启动您的AJAX请求（通过测试按钮通常很好），并且您应该看到列表中显示请求。
• 当您点击该请求时，它将打开详细信息，您可以在其中查看标题，预览，响应，Cookie和时间详情。

在Internet Explorer：

• 按F12打开开发人员工具。
• 切换到网络选项卡。
• 按开始捕获按钮
• 启动你的AJAX请求
• 双击该响应，看细节

在Firefox：

• 我敢肯定，这是类似的，但我有一段时间没有使用它，所以希望有人可以编辑它并添加适当的步骤！

这将是查看AJAX请求背后究竟发生了什么的最佳方法。

不要误会我的意思 - 您可以（也应该）仍然使用AJAX回调和console.log（或Chrome中的console.dir）来调试您的AJAX请求，但是当事情不起作用时，devtools总是最简单，最快速的方式来“看看引擎盖下”！