如何从jqGrid自定义按钮获取JSON响应？附代码示例

嗨，问题出在你用window.location.href直接跳转页面了——这种方式会让浏览器导航到新页面，自然没法捕获后端返回的JSON响应。要拿到JSON，你得用AJAX请求来异步获取数据，而不是跳转页面。

修改后的代码示例 #

把原来的window.location.href替换成AJAX请求，下面是完整的按钮配置代码：

$("#jqGrid").navButtonAdd('#jqGridPager', {
    id: "btnCustom",
    caption: "",
    title: "Test Title",
    buttonicon: 'fa fa-file-excel-o',
    onClickButton: function () {
        // 使用jQuery AJAX异步请求获取JSON
        $.ajax({
            url: "/Controller/Action",
            type: "GET", // 根据后端接口要求改成POST，比如提交数据时用POST
            dataType: "json", // 指定预期返回的数据类型为JSON
            // 如果需要传递参数（比如选中行的ID），可以添加data属性
            // data: { 
            //     selectedId: $("#jqGrid").jqGrid('getGridParam', 'selrow') 
            // },
            success: function (response) {
                // 这里成功拿到JSON响应，可按需处理
                console.log("获取到的JSON响应：", response);
                // 示例：弹窗展示响应内容
                alert("响应数据：\n" + JSON.stringify(response, null, 2));
            },
            error: function (xhr, status, error) {
                // 处理请求失败的情况
                console.error("请求出错：", error);
                alert("获取数据失败，请检查接口或稍后重试");
            }
        });
    },
    position: "last"
});

额外说明 #

1. 简化GET请求写法：如果你的接口是GET类型，也可以用$.getJSON简化代码：

   $.getJSON("/Controller/Action")
       .done(function(response) {
           console.log("成功获取响应：", response);
       })
       .fail(function(jqXHR, textStatus, errorThrown) {
           console.error("请求失败：", errorThrown);
       });
   

2. 传递参数：如果需要把jqGrid的选中行数据传给后端，用$("#jqGrid").jqGrid('getGridParam', 'selrow')可以获取选中行的ID，然后在AJAX的data属性里传递。

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