jqGrid报parsererror及is not a function错误求助

两个报错分别对应不同根因，按顺序排查即可： #

1. 报错：Uncaught TypeError: $(...).jqGrid is not a function #

这个错误没有其他特殊原因，就是插件资源加载顺序错误/重复加载jQuery导致的：

• 资源加载必须严格遵循顺序：先引入jQuery，再引入jqGrid中文语言包grid.locale-cn.js，再引入jqGrid核心jsjquery.jqGrid.min.js，最后引入你自己的业务代码
• 全页面检查，绝对不能重复引入jQuery：如果在加载完jqGrid插件之后又引入了一次jQuery，之前挂载在jQuery原型上的jqGrid方法会被直接覆盖，立刻报这个函数不存在的错
• jqGrid兼容的jQuery版本范围是1.7~3.6，不要用4.x以上的高版本jQuery，会出现兼容问题

2. 报错：parsererror: SyntaxError: Unexpected token < in JSON at position 0 200 OK #

这个错误的本质是：代码预期接收JSON格式数据，但实际拿到的是HTML内容（HTML标签以<开头，JSON解析器碰到第一个字符就会抛错），对应两个核心问题：

• 接口本身返回异常：打开浏览器F12的网络面板，找到PCM/DataToDisplayPCM这个请求，查看响应正文，大概率是404页面、登录拦截跳转页、后端500报错页的HTML内容，先把接口调通，确保真的返回JSON字符串
• jqGrid配置错误：你已经通过独立的ajax请求拿到了数据，通过data参数传给组件，但你把datatype设成了"JSON"，这个配置下jqGrid会忽略你传入的data，自己重新发起请求拉取数据，而你没有给jqGrid配置正确的请求地址，就会拿到HTML格式的错误页触发解析报错

修正后的完整代码 #

$.ajax({
    type: "POST",
    url: "PCM/DataToDisplayPCM",
    dataType: "text", // 明确指定按纯文本接收响应，禁止jQuery自动猜测响应类型
    success: function (dataJson) {
        // 清洗返回内容：去掉首尾空白、UTF-8 BOM头，避免解析失败
        const validJsonStr = dataJson.trim().replace(/^\ufeff/, '');
        const json = $.parseJSON(validJsonStr);

        $("#table").jqGrid({
            data: json,
            datatype: "local", // 本地加载数据必须设为local，设为JSON会触发组件自动发请求
            height: 'auto',
            rowNum: 10,
            rowList: [10, 20, 30],
            colModel: [
                { name: 'ProdPriority', label: 'Priority', index: 'ProdPriority', width: 50 },
                { name: 'ProductCode', label: 'Product Code', index: 'ProductCode', width: 80 },
                { name: 'ProductName', label: 'Product Name', index: 'ProductName', width: 200 },
                { name: 'DIV', label: 'Division', index: 'Division', width: 60 },
                { name: 'Category', label: 'Categary', index: 'Category', width: 150 },
                { name: 'SubCategory', label: 'SubCategary', index: 'SubCategory', width: 150 },
                { name: 'Priority_1', label: 'Priority_1', index: 'Priority_1', width: 80 },
                { name: 'Priority1per', label: 'Priority_1%', index: 'Priority1per', width: 80 },
                { name: 'Priority_2', label: 'Priority_2', index: 'Priority_2', width: 80 },
                { name: 'Priority2per', label: 'Priority_2%', index: 'Priority2per', width: 80 },
                { name: 'Priority_3', label: 'Priority_3', index: 'Priority_3', width: 80 },
                { name: 'Priority3per', label: 'Priority_3%', index: 'Priority3per', width: 80 }
            ],
            pager: "#prowed1",
            sortname: 'P_CODE',
            viewrecords: true,
            sortorder: "desc"
        });
        jQuery("#table").jqGrid('navGrid', "#prowed1", { edit: false, add: false, del: false });
    }
});

关键调整点 #

• 删除了colModel、配置对象末尾多余的尾逗号，兼容低版本浏览器
• 增加了返回字符串清洗逻辑，避免BOM头、多余空白导致JSON解析失败
• 修正了jqGrid的datatype配置，避免组件重复发起错误请求
• 给ajax显式指定dataType，避免jQuery自动识别响应类型出错

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