添加onClick点击事件后表格数据不显示且无报错如何解决？

常见原因及修复方法 #

• 事件绑定在DOM节点渲染完成前执行：如果你的JS代码位置在元素的上方，页面加载时会优先执行JS代码，此时id为viewUser的按钮还未被浏览器渲染，jQuery无法匹配到对应元素，点击事件根本没有绑定成功，自然点击后没有任何反应。
  修复方案：将事件绑定逻辑包裹在DOM加载完成的回调函数中，示例如下：

$(document).ready(function() {
  var url = "http://127.0.0.1:8080/Assignment2/video/backend/RestController.php?view=all";
  $('#viewUser').on('click',function (e){
    e.preventDefault();
    $.ajax({
      method: "GET",
      cache: false,
      url: url,
      // 强制指定返回数据格式为JSON，避免解析失败
      dataType: "json",
      success: function(data) {
        var student = '';
        $.each(data, function (key, value) {
          student += '<tr>';
          student += '<td>' + value.id + '</td>';
          student += '<td>' + value.username + '</td>';
          student += '<td>' + value.videoName + '</td>';
          student += '</tr>';
        });
        // 如果需要每次点击刷新表格内容，可将append改为html
        $('#table').append(student);
      },
      error:function(exception){alert('异常:'+exception);}
    })
  });
})

也可以直接把整个<script>标签移到HTML文件的</body>标签之前，保证DOM全部加载完成后再执行JS逻辑。

• AJAX返回的JSON数据未被正确识别：如果后端返回的响应头Content-Type不符合JSON格式要求，jQuery不会自动将返回的字符串解析为JS对象，直接遍历字符串不会生成对应表格行，也不会抛出相关报错。修复方案就是在AJAX配置中添加dataType: "json"参数，强制指定返回数据格式为JSON，参考上述示例代码。
• 表格选择器匹配错误：可以在success回调第一行添加console.log(data)打印返回结果，确认请求正常返回数据后，再检查$('#table')是否能正确匹配到你的表格元素，避免选择器写错导致内容无法插入。

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