PHP电商页分页与过滤冲突：TypeError非法调用及AJAX参数异常

你遇到的TypeError: Illegal invocation本质是非分页触发事件时，浏览器自动将事件对象作为第一个参数传入filterChange函数，覆盖了默认的limit = null。比如搜索框的input事件、复选框的change事件触发时，会把InputEvent/ChangeEvent对象传给filterChange，导致data.limit变成了事件对象（而非预期的null/数字），AJAX无法序列化这个对象，从而抛出错误。

方案1：修正事件绑定，显式传入null #

给过滤器元素绑定事件时，用匿名函数包裹调用，确保传入null作为limit参数：

• 搜索框：

  $('#search').on('input', () => filterChange(null))
  

• 子分类复选框：

  document.querySelectorAll("input[type='checkbox']").forEach(cb => {
      cb.addEventListener('change', () => filterChange(null))
  })
  

• 排序下拉框：

  $('#sort').on('change', () => filterChange(null))
  

• 分类下拉框（如果之前绑定了事件）：

  $('#category').on('change', () => filterChange(null))
  

方案2：在函数内部校验参数，强制修正limit类型 #

如果不想修改所有事件绑定，可在filterChange开头添加参数校验逻辑，把非数字的参数重置为null：

function filterChange(limit = null){
    // 新增：校验limit类型，非法值重置为null
    if (typeof limit !== 'number' && limit !== null) {
        limit = null;
    }
    
    // 原逻辑保留
    let limitPaginacije = limit != null ? limit : 0;
    
    let search = document.querySelector("#search").value;
    let category_id = $('#category option:selected').attr('data-category-id');
    
    let subcategory_ids = [];
    document.querySelectorAll("input[type='checkbox']").forEach((cb)=>{
        if(cb.checked)
        {
            subcategory_ids.push(cb.getAttribute("data-type-id"));
        }
    })
    
    let sort = $("#sort").val();

    let data = {
        search: search,
        category_id : category_id,
        subcategory_ids : subcategory_ids,
        sort : sort,
        limit: limit
    }

    console.log(data);
    $.ajax({
        url:"/php_sajt/pages/logic/filters.php",
        method: "post",
        data: data,
        success: (data) =>{
            $("#product-container").html(data);
            paginationButtonsEventAdd();
        },
        error: (xhr) => {
            ajaxError(xhr);
        }
    })
}

额外优化：分页按钮事件绑定 #

确保分页按钮的事件绑定正确获取数字类型的limit：

function paginationButtonsEventAdd(){
    $('.pgn').off('click').on('click', function(e){
        e.preventDefault(); // 阻止默认跳转行为
        const limit = parseInt($(this).data('limit'), 10); // 转为数字类型
        filterChange(limit);
    });
}

修改后，触发任何过滤器时data.limit都会是null，点击分页按钮时是数字类型，AJAX请求可正常序列化参数，不会再出现Illegal invocation错误。

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