Php 在Codeigniter中使用AJAX显示图像列表 导言：

我有一个存储文件名列表的数据库，这些文件名对应于文件夹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
);

数据库如下：

-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的新手，不知道如何正确构建模型和控制器来实现这一点

---

非常感谢您的帮助

在您的

查看页面上尝试以下操作：

但是首先在
头文件中或在
视图中添加
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);
          }
       })
    });
});

$（文档）.ready（函数（）
$（“#更新”）。在（'click'，function（）上{
$.ajax({
url:'yourpagecontroller'，
类型：'GET'，
成功：功能（数据）{
//让数据如：，等等
$（'#gallery'）.html（数据）；
}
})
});
});
没有时间把它全部写出来，但像这样的东西应该可以：

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

          }
       })
    });
});

非常感谢。我将如何为此构建控制器？我是否应该在我的创建控制器中创建一个新函数，例如名为“public function update_gallery（）”的函数，然后在ajax url调用Create/update_gallery？您可以从
controller
获取
json
，然后在
ajax jquery成功回调函数
中遍历它。谢谢。我会在回家后试试这个，并告诉大家最新进展。