ajax - 如何测试ajax页面

Question

我创建了一个 codeigniter 应用程序，其中包含一个带有一些 ajax 的页面。我试图向自己证明 ajax 页面确实有效。也就是说，我的页面只有一部分正在更新，其余部分保持原样。

这是我在 Controller 中的代码:(index 是初始页面加载时调用的方法。index2() 在单击刷新按钮时调用)

       public function index()
       {
           $this->load->model('locations_model');
           $data['clienthistory'] = $this->locations_model->get_locations();
           $data['main_content'] = 'dashboard';
           $this->load->view('includes/template', $data);
       }


       public function index2()
       {
          $this->load->model('locations_model');
          $data['clienthistory'] = $this->locations_model->get_locations();
          return json_encode($data['clienthistory']);                                                                     
       }

这是我的观点:

 <h2>timer test</h2>
    <?php echo now();?>

<h2>Latest Client Status</h2>
            <?php echo form_open('Dashboard/index');          
            echo form_submit('submit', 'Refresh Client Data', 'id="clientsubmit" class="btn-primary"');
            ?>
      <div class="row-fluid">
             <div class="span12" id="ajaxcontainer">
               <table class="table table-bordered table-striped">
                <thead>
                 <tr>
                   <th>IP</th>                                                                                                          
                   <th>Name</th>                                                                           
                   <th>Last Updated</th>
                 </tr>
                 </thead>
                <tbody>
               <?php foreach ($clienthistory as $histitem): ?>
                    <tr>
                        <td><?php echo $histitem['network'] ?></td>
                        <td><?php echo $histitem['name'] ?></td>
                        <td><?php echo $histitem['lastupdated'] ?></td>
                    </tr>
               <?php endforeach ?>

                </tbody>
               </table>
       </div>

     <?php echo form_close();  ?>
     <script type="text/javascript">
        $('#clientsubmit').click(function() {                   
               $.ajax({                                
                    url:"<?php echo site_url('Dashboard/index2'); ?>",
                    type: 'POST',
                    dataType: 'html'
                    success: function(returnDataFromController) {
                          $('#ajaxcontainer').html(returnDataFromController)
                    }
                  });

       return false;      
     });
    </script>

我的想法是在页面上显示当前时间，该区域不应被我的 ajax 调用更新。但是当我点击我的刷新按钮时，除了更新表数据之外，时间也在更新。我不确定我明白为什么会这样。任何帮助，将不胜感激。提前为补救问题道歉 - 只是 codeigniter 和 ajax 的新手。谢谢。

Answer 1

您的按钮是 submit所以它会在点击时刷新页面。

您需要将其更改为其他内容，例如 <a></a>并向其附加一个 Action ，如下所示:

<a href="#" id="clientsubmit" class="btn btn-primary">Refresh Client Data</a>

由于您使用的是 Twitter Bootstrap ，因此添加 btn 的链接不会扰乱您的布局。上课。

没有 submit按钮，您的页面将不会刷新，您的日期功能将完好无损。

并且为了预防起见，单击时禁用该链接/按钮，直到返回请求为止。

$('#clientsubmit').click(function() {
$(this).attr("disabled", "disabled");
...
$('#ajaxcontainer').html(returnDataFromController);
$(this).removeAttr("disabled");
...

在您的 ajax 调用中，您只需更新 ajaxcontainer元素。

希望对您有所帮助。