PHP表单执行后实现页面无刷新的技术咨询

Hey there! To make your PHP form submit without refreshing the page, the go-to approach is using AJAX (Asynchronous JavaScript and XML) to send the form data to your PHP backend asynchronously. Here's a step-by-step implementation tailored to your existing code:

1. 修改前端表单与添加AJAX逻辑 #

First, adjust your HTML form to work with AJAX. We'll add IDs to elements so we can easily target them with JavaScript, and prevent the default form submission behavior.

Updated HTML Form #

<form id="contactForm">
  <!-- Name Field -->
  <div>
    <label for="name">Name:</label>
    <input type="text" name="name" id="name" value="">
    <span class="error-text" id="nameErr"></span>
  </div>

  <!-- Email Field -->
  <div>
    <label for="email">Email:</label>
    <input type="email" name="email" id="email" value="">
    <span class="error-text" id="emailErr"></span>
  </div>

  <!-- Phone Field -->
  <div>
    <label for="phone">Phone:</label>
    <input type="tel" name="phone" id="phone" value="">
  </div>

  <!-- Subject Field -->
  <div>
    <label for="subject">Subject:</label>
    <input type="text" name="subject" id="subject" value="">
    <span class="error-text" id="subjectErr"></span>
  </div>

  <!-- Message Field -->
  <div>
    <label for="message">Message:</label>
    <textarea name="message" id="message"></textarea>
    <span class="error-text" id="messageErr"></span>
  </div>

  <!-- Submit Button (type="button" to avoid default submission) -->
  <button type="button" id="submitBtn">Send Message</button>
  
  <!-- Success/Error Display -->
  <div id="successMessage" class="success-text"></div>
</form>

Native JavaScript AJAX Code #

Add this script right before the closing </body> tag to handle the form submission asynchronously:

// Get elements from the DOM
const submitBtn = document.getElementById('submitBtn');
const contactForm = document.getElementById('contactForm');
const successMessage = document.getElementById('successMessage');
const errorElements = {
  name: document.getElementById('nameErr'),
  email: document.getElementById('emailErr'),
  subject: document.getElementById('subjectErr'),
  message: document.getElementById('messageErr')
};

// Add click event listener to submit button
submitBtn.addEventListener('click', function() {
  // Clear previous messages
  successMessage.textContent = '';
  Object.values(errorElements).forEach(el => el.textContent = '');

  // Create FormData object from the form
  const formData = new FormData(contactForm);

  // Initialize AJAX request
  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'your-form-handler.php', true); // Replace with your PHP file path

  // Handle successful response
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      const response = JSON.parse(xhr.responseText);

      // Update error messages
      errorElements.name.textContent = response.nameErr || '';
      errorElements.email.textContent = response.emailErr || '';
      errorElements.subject.textContent = response.subjectErr || '';
      errorElements.message.textContent = response.messageErr || '';

      // Update success message and clear form if successful
      if (response.successMessage) {
        successMessage.textContent = response.successMessage;
        contactForm.reset(); // Clear form fields
      }
    } else {
      successMessage.textContent = 'Something went wrong. Please try again later.';
    }
  };

  // Handle network errors
  xhr.onerror = function() {
    successMessage.textContent = 'Network error occurred. Check your connection.';
  };

  // Send the request with form data
  xhr.send(formData);
});

2. 修改后端PHP代码 #

Update your PHP handler to return a JSON response instead of directly modifying the page content. This lets the JavaScript parse the result and update the page dynamically.

Updated PHP Code #

<?php
// Initialize variables
$sendTo = "example@example.nl";
$name = $email = $phone = $subject = $message = "";
$nameErr = $emailErr = $subjectErr = $messageErr = $successMessage = "";

// Process form data if request is POST
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Validate Name
    if (empty($_POST['name'])) {
        $nameErr = "Name is required.";
    } else {
        $name = trim($_POST['name']);
        if (!preg_match("/^[a-zA-Z-' ]*$/", $name)) {
            $nameErr = "Only letters and white space allowed.";
        }
    }

    // Validate Email
    if (empty($_POST['email'])) {
        $emailErr = "Email is required.";
    } else {
        $email = trim($_POST['email']);
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            $emailErr = "Invalid email format.";
        }
    }

    // Validate Subject
    if (empty($_POST['subject'])) {
        $subjectErr = "Subject is required.";
    } else {
        $subject = trim($_POST['subject']);
    }

    // Validate Message
    if (empty($_POST['message'])) {
        $messageErr = "Message is required.";
    } else {
        $message = trim($_POST['message']);
    }

    // If no errors, send email
    if (empty($nameErr) && empty($emailErr) && empty($subjectErr) && empty($messageErr)) {
        $headers = "From: $name <$email>" . "\r\n" .
                   "Reply-To: $email" . "\r\n" .
                   "X-Mailer: PHP/" . phpversion();

        if (mail($sendTo, $subject, $message, $headers)) {
            $successMessage = "Your message has been sent successfully!";
        } else {
            $successMessage = "Oops! Failed to send your message. Please try again.";
        }
    }
}

// Return JSON response
header('Content-Type: application/json');
echo json_encode([
    'nameErr' => $nameErr,
    'emailErr' => $emailErr,
    'subjectErr' => $subjectErr,
    'messageErr' => $messageErr,
    'successMessage' => $successMessage
]);
?>

额外注意事项 #

• Mail Reliability: The built-in mail() function can be inconsistent. For better deliverability, consider using libraries like PHPMailer or SwiftMailer.
• CSRF Protection: Add a CSRF token to your form to prevent cross-site request forgery. Generate a token in your PHP session and include it as a hidden input in the form, then validate it in the PHP handler.
• Loading State: Add a loading indicator (e.g., "Sending...") to the submit button while the AJAX request is in progress to prevent duplicate submissions.
• Styling: Add CSS to style error/success messages for better user experience.

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