AJAX出现Uncaught TypeError: Cannot read property 'length' of null错误如何解决

问题修复方案 #

1. 多标签输入取值错误修复

你使用了带data-role="tagsinput"属性的标签输入插件，原生jQuery的val()方法无法正确获取输入的标签内容，需要调用插件内置方法取值：

// 原错误代码
// var query = $('#tags').val();
// 替换为正确写法
var query = $('#tags').tagsinput('items');

该方法会返回你输入的所有标签组成的数组，传递给后端即可正常获取搜索条件。

2. 空返回值报错修复

你原来的空值判断逻辑存在逻辑错误，当后端返回null时，直接访问data.length就会触发Cannot read property 'length' of null报错，修改success回调内的判空逻辑：

// 原错误代码
// if ($(data) == null) {data.length = 0};
// if (data.length > 0) {
// 替换为正确写法
data = data || [];
if (data.length > 0) {

同时可以给load_data函数添加参数默认值，避免页面初次加载无查询参数时传递undefined到后端：

// 修改函数定义
function load_data(query = [])

关于参数命名的说明

你当前的AJAX请求配置data:{query:query}已经完成了参数命名，传递的参数名就是query，后端直接通过$_POST['query']即可获取到你传递的标签数组，不需要额外调整关联逻辑。

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