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

在view page：

上试试这个

但首先在jquery或header file

中添加your view

<强> 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);
          }
       })
    });
});

Answer 2

没有时间全力以赴，但这样的事情应该有效：

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

          }
       })
    });
});

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

简介：

我想要实现的目标：

到目前为止我的代码：

2 个答案: