使用jQuery.load()时触发Uncaught TypeError: Illegal invocation错误求助

这个错误在jQuery的AJAX类方法（包括load()）里非常常见，核心原因是jQuery无法正确序列化你传递的请求参数，或者参数引用了不可被处理的对象/未声明的变量。下面是具体的排查和解决步骤：

1. 检查核心变量的合法性 #

首先确认pagetitle、category、subcategory、amount这几个变量：

• 它们必须在当前作用域内可访问（比如是全局变量，或者在change事件回调的外层作用域中定义）
• 变量类型必须是字符串、数字这类可序列化的基本类型，不能是DOM元素、函数或者其他复杂对象
• 可以在事件回调里先打印这些变量，确认没有undefined或异常值：

  console.log('参数检查:', pagetitle, category, subcategory, amount);
  

2. 确保getSizes()返回可序列化的格式 #

getSizes()的返回值是关键，它必须是jQuery能转换成请求参数的格式（比如逗号分隔的字符串、数组）。如果它返回的是DOM元素集合、jQuery对象或者其他不可序列化的内容，就会触发错误。

推荐的getSizes()实现应该是这样的（返回选中复选框值的逗号分隔字符串）：

function getSizes() {
  // 获取所有选中的复选框值，转成数组后拼接成字符串
  return $("#size input:checkbox:checked").map(function() {
    return $(this).val();
  }).get().join(',');
}

3. 显式序列化参数（可选但稳妥） #

如果参数结构比较复杂，或者某些变量存在特殊值，可以用$.param()手动序列化参数对象，避免jQuery自动处理时出问题：

$sizeCheckboxes.on("change", function() {
  var sizes = getSizes();
  console.log('Size adjusted: ' + sizes);

  // 手动序列化参数
  var requestParams = $.param({
    'pagetitle': pagetitle,
    'category': category,
    'subcategory': subcategory,
    'amount': amount,
    'size': sizes
  });

  $('#products').load("includes/products.php?" + requestParams, function() {
    setTimeout(function() {
      $('#products').fadeIn();
      $('.loader').hide();
    }, 500);
  });
});

4. 增加错误处理辅助排查 #

在load()的回调函数里增加错误状态判断，能帮你快速定位问题：

$('#products').load("includes/products.php", {
  // 参数...
}, function(response, status, xhr) {
  if (status === "error") {
    console.error('加载失败:', xhr.status, xhr.statusText);
  }
  setTimeout(function() {
    $('#products').fadeIn();
    $('.loader').hide();
  }, 500);
});

修改后的完整代码示例 #

var $sizeCheckboxes = $("#size input:checkbox");

// 确保getSizes返回正确格式
function getSizes() {
  return $("#size input:checkbox:checked").map(function() {
    return $(this).val();
  }).get().join(',');
}

$sizeCheckboxes.on("change", function() {
  var sizes = getSizes();
  console.log('Size adjusted: ' + sizes);

  // 先检查必要变量是否存在
  if (!pagetitle || !category || !subcategory || !amount) {
    console.error('缺少必要的请求参数');
    return;
  }

  // 先隐藏产品列表，提升体验
  $('#products').fadeOut();
  $('.loader').show();

  $('#products').load("includes/products.php", {
    'pagetitle': pagetitle,
    'category': category,
    'subcategory': subcategory,
    'amount': amount,
    'size': sizes
  }, function(response, status, xhr) {
    if (status === "error") {
      console.error('加载产品失败:', xhr.status, xhr.statusText);
      $('#products').html('加载失败，请稍后重试');
    }
    setTimeout(function() {
      $('#products').fadeIn();
      $('.loader').hide();
    }, 500);
  });
});

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