仅用PHP与JavaScript实现无刷新表单提交及表单方法选型咨询

Hey there! I get that university projects often have strict constraints, so let's tackle your questions step by step:

1. 不用jQuery/框架实现表单无刷新提交 #

Absolutely possible with native JavaScript — you can use either XMLHttpRequest (compatible with older browsers) or the modern Fetch API. Here's a complete example using XMLHttpRequest (since it's more widely supported for legacy environments):

HTML Form #

<form id="myForm">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  
  <button type="submit">Submit</button>
  <div id="responseMessage"></div>
</form>

Native JavaScript (No Libraries) #

document.getElementById('myForm').addEventListener('submit', function(e) {
  // Prevent the default form submission (which refreshes the page)
  e.preventDefault();
  
  // Get form data
  const formData = new FormData(this);
  
  // Create XHR object
  const xhr = new XMLHttpRequest();
  
  // Configure the request
  xhr.open('POST', 'submit-handler.php', true);
  
  // Handle response
  xhr.onload = function() {
    const responseDiv = document.getElementById('responseMessage');
    if (xhr.status >= 200 && xhr.status < 300) {
      // Success: Show response from PHP
      responseDiv.textContent = this.responseText;
      responseDiv.style.color = 'green';
      // Optional: Reset the form
      document.getElementById('myForm').reset();
    } else {
      // Error handling
      responseDiv.textContent = 'Something went wrong!';
      responseDiv.style.color = 'red';
    }
  };
  
  // Handle network errors
  xhr.onerror = function() {
    document.getElementById('responseMessage').textContent = 'Network error occurred.';
  };
  
  // Send the request with form data
  xhr.send(formData);
});

If you prefer the more modern Fetch API, here's a quick alternative snippet for the JS part:

document.getElementById('myForm').addEventListener('submit', async function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  
  try {
    const response = await fetch('submit-handler.php', {
      method: 'POST',
      body: formData
    });
    
    const result = await response.text();
    const responseDiv = document.getElementById('responseMessage');
    if (response.ok) {
      responseDiv.textContent = result;
      responseDiv.style.color = 'green';
      this.reset();
    } else {
      responseDiv.textContent = 'Request failed!';
      responseDiv.style.color = 'red';
    }
  } catch (error) {
    document.getElementById('responseMessage').textContent = 'Network error: ' + error.message;
  }
});

2. PHP获取表单信息的最佳方式 #

Whether you're using the native JS approach above or a regular form submit, PHP has reliable ways to access form data. Here are best practices:

• Always use $_POST for sensitive data (like passwords) — we'll cover why in the next section.
• Validate and sanitize input to avoid security issues (SQL injection, XSS, etc.).
• Check if the data exists before accessing it to avoid undefined index errors.

Example PHP handler (submit-handler.php):

<?php
// Check if the request is a POST request
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  // Sanitize and get input data
  $username = filter_input(INPUT_POST, 'username', FILTER_SANITIZE_STRING);
  $password = filter_input(INPUT_POST, 'password', FILTER_SANITIZE_STRING);
  
  // Validate required fields
  if (empty($username) || empty($password)) {
    echo 'Please fill in all required fields.';
    exit;
  }
  
  // Do your processing here (e.g., check credentials, save to database)
  // IMPORTANT: Never store plain text passwords! Use password_hash() and password_verify()
  // Example: $hashedPassword = password_hash($password, PASSWORD_DEFAULT);
  
  // Send success response
  echo 'Form submitted successfully! Welcome, ' . htmlspecialchars($username) . '!';
} else {
  // Reject non-POST requests
  http_response_code(405);
  echo 'Method not allowed.';
}
?>

Key notes:

• filter_input() is safer than directly accessing $_POST because it sanitizes the input.
• htmlspecialchars() prevents XSS attacks when outputting user data back to the page.
• For password handling, always use password_hash() when storing and password_verify() when checking credentials — never store plain text!

3. 登录、注册表单应选用GET还是POST？ #

Always use POST for login/registration forms — here's why:

• Security: GET sends data in the URL, which is visible in the browser's address bar, history, and server logs. This is catastrophic for sensitive data like passwords. POST sends data in the request body, which is not exposed in these places.
• Length limits: URLs have length limits (varies by browser/server), so if your form has many fields, GET might fail. POST has no practical length limits.
• Caching: Browsers cache GET requests, which could lead to unintended behavior (like re-submitting a form if the user refreshes the page). POST requests are not cached by default.
• Semantics: GET is meant for retrieving data (like a search query), while POST is meant for submitting data that changes state (like creating a user account or logging in).

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