尝试在Codeigniter中使用AJAX和设置视图文件的输出样式

Trying to style output from my view file in Codeigniter with AJAX and

本文关键字：视图 设置 文件 样式 输出 AJAX Codeigniter      更新时间：2023-09-26

型号

<?php if (! defined('BASEPATH')) exit('No direct script access');
class Ajax_model extends CI_Model
{
    public function __construct()
        {
                $this->load->database();
        }

    public function search($data) {
        $this->db->select('title');
        $this->db->select('text');
        $this->db->like('title', $data);
        $query = $this->db->get('news', 10);
        return $query->result_array();
    }
}
?>

控制器

<?php
// application/controller/ajax.php
class Ajax extends CI_Controller 
{
        public function __construct()
        {
                parent::__construct();
                $this->load->model('ajax_model');
        }



        public function getdata($param = '')
           {
            // Get data from db 
            $data['ajaxdata'] = $this->ajax_model->search($param);
            $data['ajaxdata'] = json_encode($data['ajaxdata']);
            $this->load->view('ajax/index', $data);
            //echo $data['ajaxdata'];
           }
}
?>

查看

<!-- application/views/ajax/index.php-->
<p><?=$ajaxdata?></p>

最后，在我的标题中，我的形式在哪里；我有我的JavaScript

<div id="searchresults"></div>

                <script>
   // This is the jQuery Ajax call
   function doSearch()
   {
      $.ajax({
         type: "GET",
         url:"localhost/codeigniter/index.php/ajax/getdata/" + $("#mysearch").val(),
         success:function(data){
         $("#searchresults").html(data);
      }});
   }


</script>

也许我可以采取不同的做法？

我现在的结果是这样的

[{"title":"Cousy","text":"A very comfortable luxury double bed room"},{"title":"Romance","text":"This is a lovely room for couple on honey moon double bed"}]

它显示的记录正确，但在同一行。我希望它单独出现，并以href格式

您可以通过以下两种方式做到这一点：

1） 返回已使用结果格式化的视图文件。这显然在ajax响应中传输了更多的数据，因此速度较慢，但对于10个结果来说，这是可以忽略的，因为服务器上的PHP无论如何都会比JS更快地呈现视图。

2） 返回JSON，然后解析JSON并使用JS格式化响应。

方法1:

您的控制器将变为：

<?php
// application/controller/ajax.php
class Ajax extends CI_Controller 
{
        public function __construct()
        {
                parent::__construct();
                $this->load->model('ajax_model');
        }
        public function getdata($param = '')
        {
            // Get data from db 
            $data['ajaxdata'] = $this->ajax_model->search($param);
            $this->load->view('ajax/index', $data);
        }
}

您的视图文件将变为：

<?php 
    if(!empty($ajaxdata)) {
        foreach($ajaxdata as $item) {
            echo '<h1>'.$item['title'].'</h1>';
            echo '<p>'.$item['text'].'</p>';
        }
    }
?>

你的模型和形式会保持不变。

方法2:

您的控制器将变为：

<?php
// application/controller/ajax.php
class Ajax extends CI_Controller 
{
        public function __construct()
        {
                parent::__construct();
                $this->load->model('ajax_model');
        }
        public function getdata($param = '')
        {
            // Get data from db 
            echo json_encode( $this->ajax_model->search($param) );
        }
}

您可以删除视图文件。您的表格将变为：

function doSearch()
   {
      $.ajax({
         type: "GET",
         url:"localhost/codeigniter/index.php/ajax/getdata/" + $("#mysearch").val(),
         success:function(data){
             var results = $.parseJSON(data);
             var html_str = '';
             $.each( results, function( key, result ) {
                 html_str .= '<h1>'+result.title+'</h1><p>'+html_str+'</p>';
             });
             $("#searchresults").html(html_str);
         }
      });
   }

如果这里有语法错误，我深表歉意。

使用<div>或<span>创建一些html，并使用javascript将结果格式化为正确的格式。一个例子是在显示div元素中javascript函数的结果

相关文章：