获取Query Parameter并基于参数展示游戏详情，请求代码协助

Hey Richard, let's tackle this query parameter issue step by step—no worries, it's simpler than it seems once you break it down! Here's a complete, actionable solution tailored to your game detail page needs:

第一步：从URL中提取查询参数 #

First, we need to grab the game identifier (like gameId or gameName) from the page's URL. There are two reliable ways to do this:

方法1：用现代浏览器原生API URLSearchParams（推荐） #

This is the cleanest, most straightforward approach for modern browsers:

// Get the query parameters from the current URL
const urlParams = new URLSearchParams(window.location.search);
// Extract the value of the "game" parameter (e.g., from game.html?game=zelda)
const targetGameId = urlParams.get('game');

// Quick test to confirm you're getting the right value
console.log('Selected game ID:', targetGameId);

方法2：手动解析（兼容旧浏览器） #

If you need to support older browsers that don't have URLSearchParams, use this helper function:

function getQueryParam(paramName) {
  const url = window.location.href;
  paramName = paramName.replace(/[\[\]]/g, '\\$&');
  const regex = new RegExp(`[?&]${paramName}(=([^&#]*)|&|#|$)`);
  const results = regex.exec(url);
  
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

// Usage: Get the value of "game" from the URL
const targetGameId = getQueryParam('game');

第二步：结合AJAX请求加载对应游戏详情 #

Once you have the game identifier, you can fetch your JSON data, filter for the matching game, and render its details. Let's use the modern fetch API (it's cleaner than traditional XHR):

完整实现代码 #

// Assume your games.json looks like this:
// [
//   { "id": "zelda", "name": "The Legend of Zelda: Tears of the Kingdom", "description": "Open-world adventure...", "image": "zelda.jpg" },
//   { "id": "mario", "name": "Super Mario Bros. Wonder", "description": "Classic platformer with new twists...", "image": "mario.jpg" }
// ]

async function loadAndDisplayGameDetails() {
  try {
    // 1. Grab the game ID from URL params
    const urlParams = new URLSearchParams(window.location.search);
    const targetGameId = urlParams.get('game');

    // Handle case where no game is selected
    if (!targetGameId) {
      document.getElementById('game-detail-container').innerHTML = '<p>Please select a game to view details!</p>';
      return;
    }

    // 2. Fetch the JSON data file
    const response = await fetch('games.json');
    if (!response.ok) throw new Error('Failed to load game data');
    const allGames = await response.json();

    // 3. Find the matching game in the dataset
    const selectedGame = allGames.find(game => game.id === targetGameId);

    // 4. Render the details to the page
    if (selectedGame) {
      renderGameDetails(selectedGame);
    } else {
      document.getElementById('game-detail-container').innerHTML = '<p>Sorry, we couldn\'t find details for that game.</p>';
    }
  } catch (error) {
    console.error('Error loading game details:', error);
    document.getElementById('game-detail-container').innerHTML = `<p>Oops, something went wrong: ${error.message}</p>`;
  }
}

// Helper function to render game details to the DOM
function renderGameDetails(game) {
  const container = document.getElementById('game-detail-container');
  container.innerHTML = `
    <h2>${game.name}</h2>
    <img src="${game.image}" alt="${game.name}" style="max-width: 400px;">
    <p>${game.description}</p>
    <!-- Add more fields here based on your JSON structure (e.g., release date, rating) -->
  `;
}

// Run the function when the page finishes loading
window.addEventListener('DOMContentLoaded', loadAndDisplayGameDetails);

第三步：测试与调试 #

To make sure everything works:

• Link to your game page with a query parameter like game.html?game=zelda
• Open your browser's developer tools (F12) to check the console for errors
• Verify that your games.json file is in the correct path (you should be able to access it directly via http://your-domain/games.json)

If you're still stuck, double-check these common pitfalls:

• Ensure the query parameter name in your URL matches what you're using in code (e.g., game vs gameId)
• Confirm the id field in your JSON exactly matches the value in the query parameter (case-sensitive!)
• Make sure your server is serving the JSON file correctly (no 404 errors)

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