为什么这个jQuery函数不能与我的php文件正确通信

Question

让我向您展示我的产品：

（1） 形式：

 <form name="login-form" class="login-form" method="post" onSubmit="login()">
  <div class="header">
    <h1>Sign In</h1>
  </div>
  <div class="content">
    <input type="hidden" name="siteToken" value="$token" />
    <input id="username" name="username" type="text" class="input username"  placeholder="Username" required="required" />
  <div class="user-icon"></div>
    <input id="password" name="password" type="password" class="input password" placeholder="Password" required="required" />
  <div class="pass-icon"></div>
  </div>
  <div class="footer">
    <input type="submit" name="submit" value="Login" class="button" />
  </div>
</form>

（2） jQuery函数：

$(document).ready(function login() {
  $('.login-form').submit(function() {
      var formData = $(this).serialize();
      $("input").prop("disabled", true);
      $.post('VRC_LoginProcess.php', formData, loginMessage);
      function loginMessage(data) {
        $('.header').append(data);
      };    
  });
});

（3） PHP函数：

<?php
require_once('VRC_Header.php');
require_once('../Classes/VRC_MasterOO.php');
require_once('../Classes/VRC_Secure_Login.php');

//*******************************//
//Declerations
$signIn = "";
$username = "";
$password = "";
$success = "";
$error = "";
//******************************//
//****************************************************************************************//
//Script Header
$signIn = new UserService($dbuser, $dbpass, $dbhost, $dbname); //Create new class instance 
$signIn->sec_session_start(); //Begin session
//***************************************************************************************//
//***************************************************************************************//
//Begin Login Functions
if(isset($_POST['username'], $_POST['password'])) {
    //Assign POST submissions to passable php variables
    $username = $_POST['username'];
    $password = $_POST['password'];
    $passedToken = $_POST['siteToken'];
    /*//Check Token Values (prevent CSRF attacks)
    if($passedToken != $_SESSION['token']) {
        $error = "CSRF attack detected. Please close your browser and try again."; 
        $signIn->csrfAttackLog($username);
        echo $error;
        exit();     
    }*/

    //Test if both fields are not null
    if($username == "" || $password == "")
    {
        $error = "Not all fields were entered<br />";
        echo $error;
        exit();
    }
    //Start login process
    else
    {
        $success = $signIn->login($username, $password);
        if ($success === true)
        { //Login Successful
            echo "Success!"; //Direct to main page.
            exit();
        }
        //Specific login failure determination
        else 
        {
            switch ($success){
                case 1:
                    $error = "Your account has been locked.";
                    echo $error;
                    break;
                case 2: 
                    $error = "Invalid Username/Password (2)";
                    echo $error;
                    break;
                case 3:
                    $error = "Invalid Username/Password";
                    echo $error;
                    break;  
                case 4: 
                    $error = "Invalid Username/Password (3)";
                    echo $error;
                    break;
            }
        }           
    }
}

？>

首先，我怀疑问题出在PHP函数上。在实现jQuery调用之前，我已经对它进行了测试（我直接在htmlaction属性中使用了它）。我怀疑这个问题发生在jQuery函数中（我刚开始使用jQuery，对它并不熟悉）。

请注意，我暂时删除了php文件中的令牌输入。我只是想在处理之前让它发挥作用（这部分还有另一个问题）。

我不相信post变量被正确地发送到php文件。此外，我也不相信我的jQuery函数能正确地接收到来自php函数的echo响应，因为它会将其显示为html——前提是它一开始就有效。

欢迎提供任何意见。

Answer 1

$(document).ready(function login() {

那条线就是问题所在。

登录功能可能对页面的其他部分不可用。它只是匿名函数的一个名称，它是$(document).ready函数的参数。

您有范围问题。

将登录功能单独移出：

function loginMessage(data) {
    $('.header').append(data);
};
function login() {
    $('.login-form').submit(function () {
        var formData = $(this).serialize();
        $("input").prop("disabled", true);
        $.post('VRC_LoginProcess.php', formData, loginMessage);
    });
}
$(document).ready(function () {
    login();
});

编辑：

在您的登录函数中，您正在为登录表单的提交事件注册一个处理程序。而且它只需要注册一次。

So, remove `onsubmit=login()` from your form's attributes, and you are good.

Answer 2

将HTML略微更改为该

<form name="login-form" class="login-form" method="post">
    <div class="header">
         <h1>Sign In</h1>
    </div>
    <div class="content">
        <input type="hidden" name="siteToken" value="$token" />
        <input id="username" name="username" type="text" class="input username" placeholder="Username" required="required" />
        <div class="user-icon"></div>
        <input id="password" name="password" type="password" class="input password" placeholder="Password" required="required" />
        <div class="pass-icon"></div>
    </div>
    <div class="footer">
        <input type="submit" name="submit" value="Login" class="button" />
    </div>
</form>

和Javascript

$(document).ready(function () {
    $('.login-form').submit(function (e) {
        e.preventDefault();
        var formData = $(this).serialize();
        $("input").prop("disabled", true);
        $.post('VRC_LoginProcess.php', formData, loginMessage);
        function loginMessage(data) {
            $('.header').append(data);
        }
    });
});