在 Codeigniter 中使用 Ajax 过滤表数据答案

【问题标题】：Filter Table data using Ajax in Codeignitor在 Codeigniter 中使用 Ajax 过滤表数据
【发布时间】：2018-09-26 05:17:40
【问题描述】：

我无法使用 Ajax 过滤表数据。当我从下拉列表中选择 BANK CREDIT 时，它应该使用 modeofpay(table column) 作为“BANK CREDIT”获取员工详细信息，当我选择 NEFT 时，它应该显示 modeofpay(table column) 作为“NEFT”的员工详细信息。截至目前，当我选择下拉菜单时，什么也没有发生。

控制器：

public function filter($key = '')
{
  $this->load->helper('url');

  if ( $key == 'BANK CREDIT' ) {
    $this->load->model('JcMeetingExpense_model');
    $data = $this->JcMeetingExpense_model->getCredit($key);
  } 
  else 
  {
    $this->load->model('JcMeetingExpense_model');
    $data = $this->JcMeetingExpense_model->getNeft($key);
  }
  echo json_encode($data);
}

型号：

public function getCredit($key)
{
  $sql = "SELECT * FROM employee WHERE modeofpay = '$key'";
  $data = $this->db->query($sql);
  return $data->result_array();   
}

public function getNeft($key)
{
  $sql = "SELECT * FROM employee WHERE modeofpay = '$key'";
  $data = $this->db->query($sql);
  return $data->result_array();   
}

查看：

<script type="text/javascript">
  var paymode = $("#mode").change(function(){
    $.ajax({
      type:"POST",
      url:url:'<?php echo base_url("JcMeetingExpense/filter/key/") ? 
               >'+paymode,
      data:"key="+paymode,
      dataType:'json',
      success:function(data){
        $("#viewjcexpense").html(data);
      },
      error:function(XMLHttpRequest){
        alert(XMLHttpRequest.responseText);
      }
    });
  });
</script>

<select name="mode" id="mode" >
  <option value="BANK CREDIT">CREDIT</option>
  <option value="NEFT">NEFT</option>
</select>

【问题讨论】：

你在控制台遇到了什么错误？
我没有收到任何错误。即使选择后，表格仍为空白。 @Rp9
你试过替换html()函数吗？
你可以尝试使用url直接访问函数，这东西可能有助于调试
不，我没有，replaceWith() 如何处理这个？ @ShubhamAzad

标签： php ajax codeigniter

【解决方案1】：

您的onchange 活动是否有效？让我们检查一下

$("#mode").change(function(){
alert(1);
});

如果当你选择一个选项时会显示警报，这意味着你的事件正在工作，

现在如果一切正常，让我们尝试使用 ajax 并进行少量重新编码，这里我使用了 post 方法

[查看]

$("#mode").change(function(){
     $.ajax({
                type  : 'POST',
                url   : '<?=base_url(); ?>JcMeetingExpense/filter/',
                data  : { key : $("#mode").val() },
                success : function(data){
                       console.log(data);//let's check on console what's response is 
                    }
                });
 })

[控制器]

public function filter()
{
  $this->load->helper('url');


    $this->load->model('JcMeetingExpense_model');
    $dataKey = $this->JcMeetingExpense_model->get_data_by_key();


  echo json_encode($datadataKey);
}

[型号]

 public function get_data_by_key()
    {
     //do post here let's say
     $key = $this->input->post("key");
// i looked your query is vulnerable to SQL Injection 
/*      $sql = "SELECT * FROM employee WHERE modeofpay = '$key'"; 
      $data = $this->db->query($sql);
      return $data->result_array();   */
      //so let's use query builder 
      $this->db->select("*");
      $this->db->from("employee");
      $this->db->where("modeofpay",$key);
      $q = $this->db->get();
      return $q->result_array();
    }

现在检查控制台中的响应

【讨论】：

嘿，我被 onchange 事件困住了。它不起作用。我没有收到警报消息@Aiden
我在我的脚本中做了一些更正，在这样做之后我得到了警报，所以事件现在工作正常......但我没有在控制台上得到响应。
好的，控制台没有响应？ var_dump($key);死（）;将模型放入get_data_by_key方法中，按f12>进入网络查找并点击filter/

【解决方案2】：

<script type="text/javascript">
  $("body").on('change','#mode',function(){
    $.ajax({
      type:"POST",
      url:url:'<?php echo base_url("JcMeetingExpense/filter/key/") ? 
               >'+paymode,
      data:"key="+paymode,
      dataType:'json',
      success:function(data){
        $("#viewjcexpense").html(data);
      },
      error:function(XMLHttpRequest){
        alert(XMLHttpRequest.responseText);
      }
    });
  });
</script>

试试这个脚本而不是你以前的脚本

我已将$("#mode").change(function(){}); 更改为$("body").on('change','#mode',function(){});

【讨论】：