升级jQuery到3.x后AJAX中$_GET传参报错，求解决方法

Hey there, let's break down what's causing this problem and walk through the solutions step by step:

First, the core issue here is that you're mixing server-side PHP code ($_GET['id']) directly into client-side jQuery/JavaScript. Browsers can't parse PHP variables—this was never actually valid code, even in jQuery 2.x. The upgrade to 3.x just tightened up error handling, so the previously hidden mistake is now throwing an obvious error in your console.

Here are the proper ways to pass that id value to your AJAX call:

1. Embed the PHP value directly (if JS lives in a PHP file) #

If your jQuery code is written inside a .php file (not a standalone .js file), use PHP to output the $_GET['id'] value as valid JavaScript:

$.ajax({ 
  url: "php/loadPictures.php", 
  // For numeric IDs (sanitize to prevent issues)
  data: { id: <?php echo isset($_GET['id']) ? intval($_GET['id']) : 'null'; ?> }, 
  // OR for string IDs (escape to avoid XSS)
  // data: { id: '<?php echo htmlspecialchars($_GET['id'], ENT_QUOTES); ?>' },
  dataType: 'json', 
  success: function( data ) {
    // Your success logic here
  }
});

Always sanitize user input! Using intval() for numbers or htmlspecialchars() for strings prevents security risks like XSS.

2. Pass the ID via HTML data attributes (for standalone JS files) #

If your jQuery code is in a separate .js file (best practice for code separation), store the id in an HTML element's data-* attribute first:

<!-- In your PHP-generated HTML -->
<div id="page-container" data-item-id="<?php echo htmlspecialchars($_GET['id'], ENT_QUOTES); ?>"></div>

Then retrieve it in your JavaScript:

// Grab the ID from the data attribute
const itemId = $('#page-container').data('item-id');

$.ajax({ 
  url: "php/loadPictures.php", 
  data: { id: itemId },
  dataType: 'json', 
  success: function( data ) {
    // Your success logic here
  },
  error: function(xhr, status, error) {
    // Add error handling (improved in jQuery 3.x) to debug easily
    console.error('AJAX Error:', status, error);
  }
});

Pro tip: Adding an error callback will help you catch and debug any future AJAX issues quickly.

3. Verify jQuery 3.x breaking changes #

While the main problem is the PHP/JS mix-up, jQuery 3.x did remove some deprecated AJAX methods and adjusted deferred behavior. If you still have issues after fixing the id parameter, check your browser's developer console for specific error messages—they'll point you to any other compatibility gaps.

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