使用jQuery AJAX请求CodeIgniter从Controller显示数据库中的数据到View而不刷新页面

Posted 2023-02-24

【中文标题】使用jQuery AJAX请求CodeIgniter从Controller显示数据库中的数据到View而不刷新页面

【英文标题】：Displaying data from database from Controller to View using jQuery AJAX request CodeIgniter without refreshing the page

【发布时间】：2016-05-15 21:54:20

【问题描述】：

如何在 Codeigniter 中加载页面的特定部分？ Ajax 正在工作，但它通过调用控制器名称（如页眉、正文、页脚）重新加载所有视图，但我只想重新加载正文，如何分离代码才能正常工作。

它的 Ajax 代码

$('label#showdata').click(function()

          var fromdate =document.getElementById('fromdate').value;
          var todate = $(this).val();
          var dataString = 'fromdate='+ fromdate+'todate='+todate;

            $.ajax(
        type: "POST",
        url: "https://chotigaadi.com/myadmin/references",
        data: dataString,
        cache: false,
        success: function(html)
        
        $("div#result").html(html).show();
        //alert(dataString);
        
        );
      );

这是我的观点

<div class="col s12 m12">
    <form action="<?php echo base_url();?>myadmin/ExportCSV" method="POST">
        <div class="col s12 m3">
            <h5 class="center" style="color:green;font-weight:bold;">Registered Members List</h5>
        </div>
        <div class="col s12 m2">
            <div class="input-field col s12">
                <label for="date"> <i class="fa fa-calendar"></i> Select from date below:</label>
                </br>
                <input name="fromdate" id="fromdate" type="date" class="datepicker" required>

            </div>
        </div>
        <div class="col s12 m3">
            <div class="input-field col s12">
                <label for="date"> <i class="fa fa-calendar"></i> Select to date below:</label>
                </br>
                <input name="todate" id="todate" type="date" class="datepicker" required>

            </div>

        </div>
        <div class="col s12 m4">
            <div class="col s6">
                <label id="showdata" class="btn waves-effect waves-light orange right" value="Show">Show Results</label>
            </div>
            <div class="col s6">
                <input type="submit" id="datesubmit" class="btn waves-effect waves-light green right" value="Export Data" />
            </div>
        </div>
    </form>
    <div id="result">
        <table class="highlight">
            <thead>
                <tr style="background-color:#ccc;">
                    <th data-field="name">ID</th>
                    <th data-field="name">Referee</th>
                    <th data-field="rname">Reference</th>
                    <th data-field="email">Email</th>
                    <th data-field="phone">Phone</th>

                </tr>
            </thead>
            <tbody>
                <?php 
                      foreach ($results as $row)
                      ?>
                    <tr style="">

                        <td>
                            <?php echo $row->firstname;?>
                        </td>
                        <td>
                            <?php echo $row->name; ?>
                        </td>
                        <td>
                            <?php echo $row->email; ?>

                        </td>
                        <td>
                            <?php echo $row->phone; ?>
                        </td>
                    </tr>
                    <?php ?>
            </tbody>
        </table>
    </div>
</div>

我的控制器代码：

function references()
        if (!$this->check_user()) 
            redirect('myadmin/login/');
        
        else
        
            if(isset($_POST['fromdate']) && isset($_POST['todate']))
                
                $fromdate=new DateTime(str_replace("-","",$_POST['fromdate']));
                $fromdate=$fromdate->format('Y-m-d H:i:s');
                $todate=new DateTime(str_replace("-","",$_POST['todate']));
                $todate=$todate->format('Y-m-d H:i:s');
               
               else
                
                $fromdate=new DateTime('2015-12-10 14:28:27');
                $fromdate=$fromdate->format('Y-m-d H:i:s'); 
                $todate=new DateTime(date("Y-m-d"));
                $todate=$todate->format('Y-m-d H:i:s');
                


            $config = array();
            $config["base_url"] = base_url() . "myadmin/references";
            $config["total_rows"] = $this->myadmin_model->record_count($fromdate, $todate);
            $config["per_page"] = 8;
            $config["uri_segment"] = 3;

            $this->pagination->initialize($config);

            $page = ($this->uri->segment(3)) ? $this->uri->segment(3) : 0;
            $data["results"] = $this->myadmin_model->fetch_userdata($config["per_page"], $page, $fromdate, $todate);
            $data["links"] = $this->pagination->create_links();



        $this->load->view('/admin/myadminheader');
        $this->load->view('/admin/myadmin',$data);
        $this->load->view('/admin/myadminfooter');
        
    

我只想重新加载视图 $this->load->view('/admin/myadmin',$data);通过 ajax 我怎么能做到这一点？

【参考方案1】：

如果您只想更改中间部分而不是在 ajax 调用函数中加载页眉和页脚。

删除这两行：

$this->load->view('/admin/myadminheader'); 
$this->load->view('/admin/myadminfooter');

只是：

$this->load->view('/admin/myadmin',$data); 

这只会在 ajax 响应中返回中间部分而不是页眉页脚。

旁注：

如果您直接从某个地方使用此函数，则需要从 ajax 请求中传递任何参数以检查是否来自 ajax 的请求。

【讨论】：

我之前试过，但是页面只显示正文的内容，没有页眉菜单和页脚。

但是重新加载所有脚本文件和样式表呢？那么ajax有什么用呢？ @devpro

@suresh-shinde 我想页眉和页脚已经加载，并且 CSS 脚本文件包含在页眉中。

我们如何在控制器中加载页眉和页脚？以及我想从 Ajax 调用哪个控制器。所以它可以作为页面正常工作，无需重新加载页眉和页脚。

@suresh-shinde 你可以调用任何函数确保页眉或页脚不是 div#result 的一部分

【参考方案2】：

不要在控制器函数中加载视图。只需在控制器函数中打印结果，然后编写 die() 函数。在加载 html 之前清除 javascript 函数中的结果 div。