jQuery AJAX 分页不起作用

Question

我在 HTML 和 twitter-bootstrap library 的标题处添加了 ajax 库，我试图在没有来自 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 加载后动态添加的按钮）添加点击事件时，请确保使用点击而不是直接点击。

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