Ajax分页、搜索及重置按钮失效问题求助

你的脚本存在以下几个问题导致按钮失效： #

• 语法错误：代码末尾多了一个多余的})，直接导致整个事件绑定代码无法正常执行
• 表单重置方法错误：jQuery对象没有reset()方法，应该调用原生DOM元素的reset()
• GET请求参数设置错误：processData: false和contentType: false是用于POST上传文件的配置，GET请求下会破坏表单序列化数据的传递
• 错误处理里的变量拼写错误：responsiveness是笔误，应该是response相关属性
• 未阻止链接默认行为：点击分页a标签时，浏览器会默认跳转页面，打断Ajax请求

修复后的完整代码： #

$(document).on("click", "#pagination a, #search_btn, #reset_btn", function(e) {
    // 阻止a标签默认跳转行为
    if(this.tagName === 'A'){
        e.preventDefault();
    }

    if(this.id == 'reset_btn'){
        // 调用原生DOM的reset方法重置表单
        $("#searchform")[0].reset();
    }

    $.ajax({
        url: this.dataset.url,
        type: 'get',
        data: $("#searchform").serialize(),
        cache: false,
        success: function(data) {
            $("#pagination_data").html(data);
        },
        error: function (response) {
            alert(response.responseText || '请求出错');
        }
    });
});

额外说明： #

• 动态加载的分页链接和按钮之所以能被触发，是因为你用了事件委托$(document).on()，这个做法是对的，不需要修改
• 确保分页链接的data-url属性正确指向后端接口，表单的id="searchform"和容器id="pagination_data"都正确匹配页面元素

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