Question

我是JS / AJAX / PHP的新手，我试图制作最简单的登录页面：

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电话有问题，但我无法弄明白，因为我无法知道/看到问题。

告诉我，如果我必须更清楚，我在这里很新，也很抱歉我的英语。

Answer 1

您的问题是当您点击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>

在ajax调用中可能出错了

1 个答案: