如何隐藏PHP URL参数并实现无刷新页面及图片加载器显示？

Hey James, let's tackle your two JavaScript/PHP questions step by step—since you're solid with PHP but new to JS, I'll keep examples practical and aligned with your workflow:

The core idea here is to use AJAX (via the modern Fetch API) to send requests behind the scenes, block the default page refresh, and toggle a loader while the request runs. Here's how to set it up:

Step 1: Add the Loader Element #

First, add a hidden loader to your HTML (replace the GIF path with your actual loader image):

<!-- Image Loader (hidden by default) -->
<div id="img-loader" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; z-index: 9999;">
  <img src="/assets/loader.gif" alt="Loading..." />
</div>

<!-- Example Button & Navigation Links -->
<button class="ajax-action-btn" data-id="10">Update</button>
<a href="/dashboard.php" class="ajax-nav-link">Go to Dashboard</a>

<!-- Container to update with new content -->
<div id="main-content"></div>

Step 2: JavaScript to Handle Clicks & AJAX Requests #

This code will listen for clicks, block page refreshes, show the loader, fetch content, and update the page:

// Grab the loader and content container
const loader = document.getElementById('img-loader');
const contentContainer = document.getElementById('main-content');

// Handle action buttons (like your Update button)
document.querySelectorAll('.ajax-action-btn').forEach(btn => {
  btn.addEventListener('click', async (e) => {
    e.preventDefault(); // Stop the default page refresh
    loader.style.display = 'block'; // Show loader
    
    try {
      const itemId = btn.dataset.id;
      // Send request to PHP (we'll fix the URL parameter issue next)
      const response = await fetch(`/update.php?id=${itemId}`, {
        method: 'GET', // We'll switch to POST later for hidden params
        headers: {
          'X-Requested-With': 'XMLHttpRequest' // Let PHP know this is an AJAX request
        }
      });

      if (response.ok) {
        const newContent = await response.text();
        contentContainer.innerHTML = newContent; // Update page content
      } else {
        alert('Oops, something went wrong with the request!');
      }
    } catch (error) {
      console.error('Request failed:', error);
      alert('Could not complete the action.');
    } finally {
      loader.style.display = 'none'; // Hide loader no matter what
    }
  });
});

// Handle navigation links
document.querySelectorAll('.ajax-nav-link').forEach(link => {
  link.addEventListener('click', async (e) => {
    e.preventDefault();
    loader.style.display = 'block';
    
    try {
      const response = await fetch(link.href);
      if (response.ok) {
        const newContent = await response.text();
        contentContainer.innerHTML = newContent;
        // Optional: Update browser address bar without refreshing
        history.pushState({}, '', link.pathname);
      }
    } catch (error) {
      console.error('Navigation failed:', error);
    } finally {
      loader.style.display = 'none';
    }
  });
});

Step 3: PHP Adjustment for AJAX Requests #

In your PHP files (like update.php), you can return only the content you need to update instead of the full page:

<?php
// Check if this is an AJAX request
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest') {
  $id = $_GET['id'] ?? null;
  if ($id) {
    // Run your update logic here
    echo "<p>Item #{$id} updated successfully!</p>";
    exit; // Stop outputting the full page
  }
}
// If it's a normal page request, output the full page as usual
?>

The cleanest way to hide parameters is to switch from GET to POST requests—POST parameters are never visible in the URL. Here's how to adjust the code:

Update JavaScript to Use POST #

Modify the button click fetch call to send parameters in the request body instead of the URL:

// Inside the button click handler
const response = await fetch('/update.php', {
  method: 'POST', // Switch to POST
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: `id=${itemId}` // Send parameters here (hidden from URL)
});

Update PHP to Read POST Parameters #

In update.php, use $_POST instead of $_GET:

<?php
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest') {
  $id = $_POST['id'] ?? null; // Use POST instead of GET
  if ($id) {
    // Run update logic
    echo "<p>Item #{$id} updated successfully!</p>";
    exit;
  }
}
?>

Optional: Keep GET but Hide Parameters in Address Bar #

If you absolutely need to use GET (e.g., for bookmarking), you can use the History API to update the address bar after the request:

// After successful request:
history.pushState({ id: itemId }, '', '/update.php');

Then add a listener to handle browser back/forward buttons:

window.addEventListener('popstate', async (e) => {
  if (e.state?.id) {
    loader.style.display = 'block';
    const response = await fetch(`/update.php?id=${e.state.id}`);
    const newContent = await response.text();
    contentContainer.innerHTML = newContent;
    loader.style.display = 'none';
  }
});

Note: This only changes what's shown in the address bar—your PHP still uses the GET parameter behind the scenes.

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