是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總是最簡單，最快速的方式來「看看引擎蓋下」！