JavaScript无法将登录表单数据提交至PHP文件求助

Let’s break down the issues with your code — I’ve caught a few common pitfalls that could be stopping your login submission from working:

1. You Might Be Missing the jQuery Library #

All your code relies on $ (jQuery’s shorthand), but if you haven’t loaded the jQuery library on your page, none of this script will run at all.

Fix this by adding a reference to jQuery before your custom script. You can download the jQuery file and host it locally in your project, then include it like this:

<script src="/path/to/your/jquery.min.js"></script>

2. Invalid AJAX Error Handler Parameters #

Your error callback has duplicate parameters (status appears twice), which breaks the error handling logic — you won’t be able to see why the AJAX request is failing. The correct parameter order for jQuery’s AJAX error function is xhr, status, error.

Here’s the corrected error block, with added debugging to help you see issues:

error: function(xhr, status, error) {
  $("#message").html("Request failed: " + error);
  console.log("AJAX Error Details:", xhr, status, error); // Check console for specifics
}

3. Variable Scope Bug in Empty Field Validation #

Your current code runs $("#message").html(msg); outside of both the if and else blocks. If the user enters valid credentials (triggering the AJAX call), the msg variable inside the success callback is local — the outer msg might be undefined, leading to unexpected behavior.

Adjust the empty field check to handle the message directly inside the else block:

else {
  var msg = "Please input all the fields!";
  $("#message").html(msg); // Move this line inside the else block
}

4. PHP Response Might Have Extra Content #

Your JavaScript expects a clean numeric response (1, 2, or 0) from login.php, but if your PHP script outputs extra content like whitespace, warning messages, or HTML tags, the response won’t match your conditions.

To fix this in PHP:

• Enable output buffering to clear any unintended output
• Ensure you only echo the numeric response code

<?php
ob_start(); // Start output buffering

// Your login validation logic here
// ...

ob_end_clean(); // Clear all buffered output
echo $response_code; // Output only the numeric code (1, 2, or 0)
?>

Also, add a console log in your AJAX success callback to see the raw response from PHP — this will tell you if extra content is the issue:

success:function(response){
  console.log("Raw PHP Response:", response); // Check this in your browser's console
  var msg = "";
  // Rest of your success logic...
}

5. Use Browser Dev Tools to Debug #

Open your browser’s developer tools (press F12), go to the Console tab, and look for errors:

• If you see $ is not defined, jQuery isn’t loaded
• If AJAX fails, the error log from step 2 will show you why
• The raw response log from step 4 will reveal if PHP is sending unexpected content

Start with checking jQuery is loaded first — that’s the most common culprit here!

内容的提问来源于stack exchange，提问作者sam