在 Codeigniter 中使用 AJAX 显示图像列表

Question

简介：

我有一个存储文件名列表的数据库，这些文件名对应于文件夹 user_data 中的图像。

我的 Codeigniter 目录结构如下所示：

-application
-system
-assets
-user_data

和这样的数据库：

CREATE TABLE `files` (
  `id` int NOT NULL AUTO_INCREMENT PRIMARY KEY,
  `filename` varchar(255) NOT NULL,
  `title` varchar(100) NOT NULL
);

---

我想要达到的目标：

我想使用 Ajax 异步获取数据库中的所有文件名，然后使用文件名在一个小画廊中显示所有图像。重要的是要在没有任何页面刷新的情况下完成此操作。

---

到目前为止我的代码：

控制器

class Create extends CI_Controller {

    public function __construct()
    {
        parent::__construct();
    }

    public function index()
    {
        $this->load->view('create', $data);
    }

}

查看

<div id='gallery'> <!-- images will be displayed in here -->                

</div>

<!-- gallery should be updated when submit is clicked -->
<button id="update">Click to load images</button>

我想要的是当用户单击更新时，数据库中表示的所有图像都显示在图库中。

我应该如何开始构建一个 JS 函数来处理这个问题？我想执行此操作并尊重 MVC 模式。

我是 Codeigniter 和 MVC 的新手，不确定如何正确构建模型和控制器来执行此操作。

非常感谢任何帮助。

Answer 1

没有时间把它全部写出来，但这样的东西应该可以工作：

class Create extends CI_Controller {
        public function __construct()
    {
        parent::__construct();
        $this->load->model('files');
    }

    public function index()
    {
        $this->load->view('create', $data);
    }

    public function get_files()
    {
        echo json_encode($this->files->get_files());
    }
}

class Files extends CI_Model
{
    public function get_files()
    {
        return $this->db->query("SELECT * FROM files")->result_array();
    }
}


$(document).ready(function()
    $('#update').on('click',function(){
       $.ajax({
          url:'/create/get_files',
          type:'GET',
          success:function(result){
             var data = jQuery.parseJSON(result);

            // Loop through 'data' and append to the DOM

          }
       })
    });
});

Answer 2

在您的 view page 上试试这个：

但首先在您的header file 或your view 中添加jquery

PHP

<?php
class Model_name extends CI_Model {

    public function __construct()
    {
        parent::__construct();
    }
    /* Model code */
    function get_image_list(){
        $sql = sprintf("SELECT * FROM <table>");
        $query = $this->db->query($sql);
       return $query->result();
    }
 }

/*  Controller Code */

function update_gallery()
{
    $this->load->model('Model_name');
    $result = $this->Model_name->get_image_list();
    $str='';
    foreach($result as $row){
        $str.='<img src="'.$row['filepath'].'" alt="'.$row['title'].'" />';
    }
    echo $str;  
}

?>

JAVASCRIPT

$(document).ready(function()
    $('#update').on('click',function(){
       $.ajax({
          url:'yourpagecontroller',
          type:'GET',
          success:function(data){
          // let data comes like: <img src="path.jpg" alt="Name of image" /><img .../>, etc
             $('#gallery').html(data);
          }
       })
    });
});