可能出错的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调用

回答

相关问题