使用CodeIgniter/MVC通过AJAX加载文件

我目前正在重写我的一本书，使之与CI兼容。一般来说，我对CI和MVC模式比较陌生。我遵循这一点，为MVC模式的视图部分制作了一个相当不错的模板。问题是，我的很多网站都使用jQuery/AJAX使其更具动态性。例如，在我的站点上的所有页面上，我都有一个输入字段，它使用jQuery在键入时加载PHP文件

<script type="text/javascript">
    $("#search_bar").keyup(function(){
        var search = $("#search_bar").val();
        var url = "search_bar.php";
        var data = "q="+ search;

        $('#livesearch').load(url, data);
        $("#livesearch").slideDown("fast");
    });
</script>

<input type='text' maxlength='30' id='search_bar' autocomplete='off' placeholder='Browse Teams' />
<div id='livesearch' style='display:none;'></div>

$（“#搜索栏”）.keyup（函数（）{
var search=$（“#search_bar”）.val（）；
var url=“search\u bar.php”；
var data=“q=”+搜索；
$（'#livesearch'）.load（url，数据）；
$（“#livesearch”）。向下滑动（“快速”）；
});

加载结果所需的所有后端工作都发生在通过jQuery（search_bar.PHP）加载的PHP文件中。那么，“搜索栏”应该是它自己的视图，由它自己的控制器触发，然后由一个称为“搜索栏”的模型建模吗？同样，我对MVC模式非常陌生，不太确定如何将AJAX与面向对象框架（如CI）正确集成

---

谢谢

您应该从视图转到控制器：

<script type='text/javascript' language='javascript'>
    $('#search_bar').keyup(function(){
        $.ajax({
                url: 'search_bar.php',
                type:'GET',
                data: {q: search,
                success: function(result){
                        //Insert code here
                    } // End of success function of ajax form
                }); // End of ajax call
    });
    </script>

---

在

ajax

请求中直接调用视图并不是一种好的做法，调用加载视图的控制器或直接在控制器的函数中执行操作

<script type='text/javascript'>
    $('#search_bar').keyup(function(){
        $.ajax({
                url: 'yourcontrollername/search_bar_yourfunction',
                type:'POST',
                data: {q: search,
                success: function(result){
                 $("#livesearch").html(result);
                 $("#livesearch").slideDown("fast");
                    } 
                }); 
    });
    </script>

---

我找到了一种在CodeIgniter 3中加载ajax（jquery）的方法。例如

文件夹的结构：

controllers/Upload.php

view/admin/ajax\u view/ajax\u images.php

控制器/上传：

public function process()
{
    $data['my_picture'] = array(
        'pic_id' => '1', 
        'pic_path' => 'http://example.com/images', 
        );

    $this->load->view('admin/ajax_view/ajax_images', $data);
}

查看/管理/ajax\u查看/ajax\u图像：

<?php foreach($my_picture as $key => $row): ?>
<td><?php echo $my_picture['pic_path']; ?></td>
<?php endforeach; ?>

查看/管理/表单上传：

<tbody>
  <tr class="trbody">
    <th scope="row">1</th>
    <!-- <td></td> --> <!--comments this because appends element jquery-->
  </tr>
 </tbody>

<script type="text/javascript">
 $(document).ready(function(){
  $('#my_button').click(function(e){
   e.preventDefault;
    $.ajax({
      url: 'upload/process',
      dataType: 'text',
      type: 'post',
      success: function(data){
      $('.trbody')
      .append(
        '<td>'+ data + '</td>'
        );
      },
      error: function(errorThrown){
        console.log(errorThrown);
      }
    });
  });
});
</script>

1.
$（文档）.ready（函数（）{
$（“#我的按钮”）。单击（函数（e）{
e、 防止违约；
$.ajax({
url:“上载/处理”，
数据类型：“文本”，
键入：“post”，
成功：功能（数据）{
$（“.trbody”）
.附加(
''+数据+''
);
},
错误：函数（抛出错误）{
console.log（错误抛出）；
}
});
});
});

这样，我将整个页面的ajax视图分离，并在需要时加载ajax视图

---

事件触发器。

无法理解问题……您希望实现什么？您的代码似乎还可以，如果您需要Ajax的基础知识，请尝试谷歌搜索；）

<?php foreach($my_picture as $key => $row): ?>
<td><?php echo $my_picture['pic_path']; ?></td>
<?php endforeach; ?>

<tbody>
  <tr class="trbody">
    <th scope="row">1</th>
    <!-- <td></td> --> <!--comments this because appends element jquery-->
  </tr>
 </tbody>

<script type="text/javascript">
 $(document).ready(function(){
  $('#my_button').click(function(e){
   e.preventDefault;
    $.ajax({
      url: 'upload/process',
      dataType: 'text',
      type: 'post',
      success: function(data){
      $('.trbody')
      .append(
        '<td>'+ data + '</td>'
        );
      },
      error: function(errorThrown){
        console.log(errorThrown);
      }
    });
  });
});
</script>