javascript - jQuery AJAX 分页不起作用

Question

我在 HTML 的 header 添加了 ajax 库，还有 twitter-bootstrap 库 我试图在没有任何 php 触发的情况下加载数据，但 php工作正常，我尝试打开 data.php 它会输出控制台中没有错误，但我真的不知道为什么它不工作似乎是什么问题？

HTML 是

<table>
   <thead>
      <tr>
         <th>name</th>
         <th>age</th>
         <th>address</th>
      </tr>
   </thead>
   <tbody id = "user_data">
</table>

jQuery 是

$(document).ready(function(){


     function load_data(page)  
      {  
           $.ajax({  
                url:"data.php",  
                method:"POST",  
                data:{page:page},  
                success:function(data){  
                     $('#user_data').html(data);  
                 alert('Successfully called');
            },
            error:function(exception){alert('Exeption:'+exception);}
           })  
      } 

      load_data(1);

      $(document).on('click', '.pagination_link', function(){  
           var page = $(this).attr("id");  
           load_data(page);  
      }); 
});

无需添加 php，它工作正常，它输出我需要的内容，这只是问题，谢谢!

已更新

我尝试使用这些警报，但这不会发出任何警报？ The Response from Network Tab

Console error

cosole中错误引用的行是$('#user_data').html(data);

Answer 1

基本上，您需要确保 HTML 标签正确关闭，并且在通过 ajax 附加/添加 HTML 时维护层次结构或标签。例如，标签期望作为直接子代。

此外，当您将点击事件添加到任何元素(例如在 dom 加载后动态添加的按钮)时，请确保使用 on click 而不是直接点击。

在“.pagination_link”的点击事件函数中，确保您在页面变量中获取 id。我更喜欢使用“page”这样的属性，这样您就可以获得 attr('page')，因为它更具可读性。