可能出錯的Ajax調用

我是新來的JS/AJAX/PHP，我試圖讓最簡單的登錄頁面：可能出錯的Ajax調用

HTML和JS/AJAX

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Login</title> 
    <script type="text/javascript" src="jquery-3.2.0.min.js"></script> 
    <script type="text/javascript"> 
     function login() { 
      if ($("#username").val() === "" && $("#psw").val() === ""){ 
       alert("Username and Password required") 
      }else{ 
       $.ajax({ 
        type: "GET", 
        url: "login.php", 
        data: "username=" + $("#username").val() + "&password=" + $("#psw").val(), 
        dataType: "html", 
        success: function (responseText) { 
         if (responseText === 0){ 
          alert("x"); 
         }else if (responseText === 1){ 
          alert("y"); 
         }else{ 
          alert("z"); 
         } 
        } 
       }); 
      } 
     } 
    </script> 
</head> 
<body> 
    <form id="form"> 
     <h1>Login Page</h1> 
     <fieldset> 
      <legend>Login</legend> 
      <strong>Username</strong> 
      <input type="text" name="username" id="username" placeholder="min. 5 characters" /> 
      <strong>Password</strong> 
      <input type="password" name="psw" id="psw" placeholder="min. 8 characters" /> 
      <br> 
      <input type="submit" name="submit" value="LOGIN" onclick="login()" /> 
     </fieldset> 
    </form> 
</body> 
</html>

PHP

 <?php 
if (isset($_REQUEST['username'])) { 
    $username = $_REQUEST['username']; 
    $password = $_REQUEST['password']; 

    $connection = mysqli_connect("localhost", "root", ""); 
    $db = mysqli_select_db($connection, "login_esercizio"); 

    $query = "SELECT * FROM users WHERE username = '$username'"; 
    $data = mysqli_query($connection, $query); 
    $row = mysqli_num_rows($data); 

    if ($row <= 0){ 
     echo 0; 
    }else{ 
     echo 1; 
    } 
}

正如您所看到的，這是一個簡單的AJAX調用。我試圖理解爲什麼這段代碼不工作，但我無法弄清楚。 MySQL正在工作，PhpStorm有解釋器，一切都很好。我做了一個選擇，看看MySQL裏面是否有數據，就有它。

我認爲AJAX調用有問題，但我無法弄清楚，因爲我不知道/看到問題。

告訴我，如果我必須更清楚，我在這裏很新，也爲我的英語感到抱歉。

來源

2017-04-04 Règik

看在瀏覽器上的開發者控制檯，特別是JS控制檯和網絡選項卡 – Steve

我也會嘗試'var_dump（$ _ REQUEST）'來查看你發送的參數是否正在通過。但是，我會在開發控制檯中查看請求是否真的在製作。 –

你的問題是，當你點擊submit按鈕來執行AJAX請求時，你也提交了form。由於表單沒有action，這取消了AJAX請求並刷新頁面。

要做你需要的事情，你需要通過連接表格的submit事件來停止表單提交，並調用preventDefault()。您還可以通過在JS代碼中使用不顯眼的事件處理程序來改進邏輯，而不是使用過時的on*事件屬性。

請注意，responseText將是一個字符串，因此您需要將這些值與該數據類型進行比較。它甚至會更可靠返回JSON以避免空白的問題返回文本時，但對你的下面至少應該工作：

$(function() { 
    $('#form').submit(function(e) { 
    e.preventDefault(); // stop form submission 

    if ($("#username").val() === "" && $("#psw").val() === "") { 
     alert("Username and Password required") 
    } else { 
     $.ajax({ 
     type: "GET", 
     url: "login.php", 
     data: { 
      username: $("#username").val(), 
      password: $("#psw").val() 
     }, 
     dataType: 'text', 
     success: function (responseText) { 
      if (responseText.trim() === '0'){ 
      alert("x"); 
      } else if (responseText.trim() === '1') { 
      alert("y"); 
      } else { 
      alert("z"); 
      } 
     } 
     }); 
    } 
    }) 
});

<form id="form"> 
    <h1>Login Page</h1> 
    <fieldset> 
    <legend>Login</legend> 

    <strong>Username</strong> 
    <input type="text" name="username" id="username" placeholder="min. 5 characters" /> 

    <strong>Password</strong> 
    <input type="password" name="psw" id="psw" placeholder="min. 8 characters" /><br /> 

    <input type="submit" name="submit" value="LOGIN" /> 
    </fieldset> 
</form>

來源

2017-04-04 15:27:56

非常感謝Rory McCrossan！這個答案很完美，它讓我開始瞭解AJAX如何工作以及如何使用HTML。 –

可能出錯的Ajax調用

回答

相關問題