Question

我有一个html表单，用于登录我的网站。唯一的问题是它刷新了页面，我不需要。因此，我尝试使用AJAX代替。而且它不起作用。该页面仍然刷新，我不确定我发布的数据是否正确发送。我的代码如下。我在做什么错了？

 <?php if (login_check($mysqli) == false) :  ?>
     <div id="loginform" data-iziModal-group="grupo1">
         <button data-iziModal-close class="icon-close">x</button>  <!--watch out here - JSFormat formatted the izimodal spec to have spaces in it and the button no longer worked.-->
         <header>
         <a href="" id="signin">Sign in</a>
         </header>
         <section>
         <form name="login_form" id="login_form">
         <input type="text" placeholder="Email" name="email" class="login_email" id="login_email">
         <input id="password" type="password" placeholder="Password" name="password" class="login_password">
         <footer>
         <button data-iziModal-close>Cancel</button>
         <button class="submit" data-iziModal-close onclick="hashandlogin(this.form, this.form.password);">Log in</button>
         <p style="text-align: center; color: #444; font-size: 16px; font-family: Lato; padding-top: 70px; font-weight: 500;">
        Don't have an account? <a style="font-size: 16px; font-weight: 500; font-family: Lato;" href="register.php">Register here.</a></p>
                        </footer>
                        </form>
                        </section>
                    </div>
          <script type="text/javascript">

          document.getElementById("login_form").addEventListener("submit", function (event) {
              event.preventDefault()
              console.log("defaultprevented");
          });

    function hashandlogin(a, b) {
         formhash(a, b);
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                console.log(this.responseText);
            }
        };
        xmlhttp.open("GET", "includes/process_login.php?email=" +document.getElementById("login_email").value + "&p="+document.getElementById("hashedp").value, true);
        xmlhttp.send(); 
    }

    </script>   

function formhash(a, b) {
var c = document.createElement("input");
a.appendChild(c), c.name = "p", c.type = "hidden", c.id="hashedp", c.value = hex_sha512(b.value), b.value = "", a.submit()

}

includes / process_login.php文件：

<?php

include_once 'db_connect.php';
include_once 'functions.php';

sec_session_start(); // Our custom secure way of starting a PHP session.

if (isset($_POST['email'], $_POST['p'])) {
    $email = filter_input(INPUT_POST, 'email', FILTER_SANITIZE_EMAIL);
    $password = $_POST['p']; // The hashed password.

    if (login($email, $password, $mysqli) == true) {
        $_SESSION["email"] = $email;
        saveLogin($_SESSION['user_id'],$mysqli);
        echo ("something");
        // Login success
      //  header("Location: ../account.php");  I don't want the account page shown just cos user has logged in. But what should go here? If nothing or index.php then get a blank page with process_login.php as the address.
        exit();
    } else {
        // Login failed
  //      header('Location: ../login.php?error=1');
  echo ("nothing");
        exit();
    }
} else {
    // The correct POST variables were not sent to this page.
    echo ("nothing at all");
  //  header('Location: ../error.php?err=Could not process login');
    exit();
}

Answer 1

如果未在type内定义按钮的<form>，则默认情况下该按钮的行为为type="submit"。这可能是导致刷新的原因。

此外，没有定义<form>的{{1}}会将当前页面作为操作。

规避所有这些问题的一种方法是使用：action。

为什么AJAX会刷新页面？

1 个答案: