jQuery AJAX分页不起作用

时间:2017-05-07 05:56:20

标签: javascript php jquery ajax twitter-bootstrap

我在HTML的标题处添加了ajax库,并且twitter-bootstrap library我试图加载数据而没有来自php的任何触发器但是php工作正常我尝试打开数据。 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);  
      }); 
});

没有必要添加它的工作正常它输出我需要的这只是问题谢谢!

已更新

我尝试使用那些警报,这不警告任何事情? The Response from Network Tab

Console error

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

1 个答案:

答案 0 :(得分:0)

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

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

在&#34; .pagination_link&#34;的点击事件功能中,确保您在页面变量中获取了ID。我更喜欢使用&#39; page&#39;等属性。这样你就可以将attr(&#39; page&#39;)更具可读性。