在 Codeignitor 中使用 Ajax 过滤表数据

Question

我无法使用Ajax过滤表数据。当我从下拉列表中选择银行信贷时，它应该使用支付模式(表列(作为"银行信贷"获取员工详细信息，当我选择 NEFT 时，它应该显示员工详细信息，并将模式支付(表列(显示为"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>

Answer 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();
}

现在在控制台中检查响应

Answer 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>

尝试此脚本而不是以前的脚本

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