求助：为何出现Uncaught SyntaxError: Unexpected end of JSON input错误？

嘿，我一眼就瞅到你代码里的几个问题，咱们一个个拆解来解决：

1. HTML属性的低级拼写错误 #

你写的HTML按钮里，data- citizens这个属性多了个空格！正确的写法应该是data-citizens——这个空格会让浏览器完全识别错这个属性，导致$(this).data('citizens')拿到的要么是undefined要么是空字符串，用JSON.parse解析空内容可不就直接抛出「Unexpected end of JSON input」错误嘛，这大概率是你当前报错的核心原因！

2. JSON字符串的有效性排查 #

就算你修正了属性名称，要是还报错，就得检查json_encode($citizens)输出的内容是不是合法JSON：

• 直接在浏览器里查看按钮的HTML源代码，看看data-citizens的值有没有完整的大括号/中括号，有没有乱码或者未闭合的情况；
• 如果$citizens里包含引号、换行这类特殊字符，json_encode默认输出的内容可能在HTML属性里被截断，这时候给它加个参数：json_encode($citizens, JSON_HEX_QUOT | JSON_HEX_TAG)，强制转义特殊字符，避免和HTML属性的引号冲突。

3. 给代码加个调试保险 #

你可以在JS里先打印拿到的字符串，看看问题出在哪：

$('.view-profile').on('click', function(e) {
  e.preventDefault();
  var id = $(this).data('id');
  var str = $(this).data('citizens');
  console.log('当前拿到的citizens字符串:', str); // 先看这个输出
  try {
    var citizensArray = JSON.parse(str);
    alert(citizensArray[0].id);
  } catch (err) {
    console.error('JSON解析报错:', err);
  }
});

这样就算解析失败，你也能明确是字符串为空，还是字符串本身格式就不对。

修正后的完整代码示例 #

HTML/PHP部分： #

<button type="button" class="btn btn-success btn-sm view-profile" 
        data-citizens="<?php echo json_encode($citizens, JSON_HEX_QUOT | JSON_HEX_TAG);?>" 
        data-id="<?php echo $citizen['id'];?>">
  <i class="fa fa-fw fa-user"></i> 查看资料
</button>

JavaScript部分： #

$('.view-profile').on('click', function(e) {
  e.preventDefault();
  var id = $(this).data('id');
  var str = $(this).data('citizens');
  
  // 先判断有没有拿到数据
  if (!str) {
    alert('未获取到公民数据');
    return;
  }
  
  try {
    var citizensArray = JSON.parse(str);
    // 再判断数组是否有内容
    if (citizensArray.length > 0) {
      alert(citizensArray[0].id);
    } else {
      alert('公民数据为空');
    }
  } catch (err) {
    console.error('数据解析失败:', err);
    alert('数据格式有误');
  }
});

先把属性的空格问题解决，再一步步验证JSON的有效性，加上错误捕获能让你的代码稳不少～

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