如何使用 AJAX 请求显示来自代码点火器模型的数据

Question

我的 Codeigniter 站点有侧面板，当我单击或 select 侧面板中的任何选项时，适当的内容将出现在主面板中。

主页 URL 是 http://localhost/main/userinfo/allusers 当我点击女性按钮时 URL 是 http://localhost/main/userinfo/female

当我发出 Ajax 请求时，我有以下输出。我哪里做错了？

控制器(main.php)

class Main extends CI_Controller {
public function __construct() {
    parent::__construct();           
    $this->load->model('userinfo_model'); 
}
public function index() {}   
public function userinfo($gender) {
    $this->load->view('home/inc/header_view');        
    $usermain_data['user_info'] = $this->userinfo_model->get_data($gender);
    $this->load->view('home/main_view', $usermain_data);
}

型号(userinfo_model.php)

class Userinfo_model extends CI_Model {
function __construct() {
    // Call the Model constructor
    parent::__construct();
}
function get_data($gender) {      
    $this->db->select('*'); 
    if($gender == 'female'){
        $this->db->where('gender', 0); 
    }
    elseif($gender == 'male'){
        $this->db->where('gender', 1); 
    }
    elseif($gender == 'allusers'){
        $gNames = array(0, 1);             
        $this->db->where_in('gender', $gNames);
    } 
    else {
        redirect(base_url() . 'main/userinfo/allusers');
    }
    $query = $this->db->get('tble_userinfo');
    //return $query->result();
    echo(json_encode($query->result())); 
}}

查看(main_view.php)

<div class="container">  
<div class="row">
    <div class="col-md-3 side_menu">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default gender-label" id="lbl-female" onclick="displayfemale()">
                <input type="radio" name="options" id="option1" autocomplete="off">
                <span>Female</span>
            </label>
            <label class="btn btn-default gender-label" id="lbl-male" onclick="displaymale()">
                <input type="radio" name="options" id="option2" autocomplete="off">
                <span>Male</span>
            </label>
        </div> <br> <br> 
        <label class="label nav-label">Age</label>
        <select class="btn nav-age-select" id="ageSelect1" autocomplete="off">
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>       
            <option value="21"  selected="selected">21</option>
            <option value="22">22</option>
            <option value="23">23</option>       
            <option value="24">24</option>
            <option value="25">25</option>

        </select>
        <label class="label nav-label label-to">To</label>
        <select class="btn nav-age-select" id="ageSelect2" autocomplete="off">
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>       
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>       
            <option value="24">24</option>
            <option value="25" selected="selected">25</option>
        </select>

    </div>
    <div class="col-md-8 main-body">
        <div id="userdata">
            <?php
            //foreach ($user_info as $info) {
                //confuse of adding date here with ajax
                //echo $info->content . '<br />' . $info->added_date .'<br />'; 
            //}
            ?>
        </div>         
    </div>
</div>

<script type="text/javascript"> 
$(document).ready(function () {
    var ajaxUrl     = '<?php echo base_url(); ?>' + 'main/userinfo';        
    var gender      = 'allusers'; // defual 1 for female and male both together

    getAjax(ajaxUrl, gender); 

    $("#lbl-female").click(function () {   
        gender = 'female';
        getAjax(ajaxUrl, gender);  
    });
    $("#lbl-male").click(function () {   
        gender = 'male';
        getAjax(ajaxUrl, gender);  
    });
});     
function getAjax(ajaxUrl, gender){       
    ajaxUrl = ajaxUrl + '/' + gender;                
    $.ajax({
        url: ajaxUrl,
        dataType: "JSON",
        type: "POST",
        success: function (retdata) { 
            $("#userdata").html('');                 
            if(retdata.hasOwnProperty("error")){
                $("#userdata").html('<div">' + retdata.msg + '</div>');  
            }  
            else{    
                $.each(retdata, function(i){    
                    $("#userdata").append(retdata[i].content + '<br>');                       
                });                         
            }

        }
    });          
}

Answer 1

这个答案最初会 main 加载两种性别。性别按钮不会使用多个特定于性别的 URL，而是 return 所选性别的 html 并动态更改页面的 html。

main_view.php（包括 Javascript）

<div class="container">  
  <div class="row">
    <div class="col-md-3 side_menu">
      <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default gender-label" id="lbl-female">
          <input type="radio" name="options" id="option1" autocomplete="off">
          <span>Female</span>
        </label>
        <label class="btn btn-default gender-label" id="lbl-male">
          <input type="radio" name="options" id="option2" autocomplete="off">
          <span>Male</span>
        </label>
      </div> <br> <br> 
      <label class="label nav-label">Age</label>
      <select class="btn nav-age-select" id="ageSelect1" autocomplete="off">
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>       
        <option value="21"  selected="selected">21</option>
        <option value="22">22</option>
        <option value="23">23</option>       
        <option value="24">24</option>
        <option value="25">25</option>

      </select>
      <label class="label nav-label label-to">To</label>
      <select class="btn nav-age-select" id="ageSelect2" autocomplete="off">
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>       
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>       
        <option value="24">24</option>
        <option value="25" selected="selected">25</option>
      </select>
    </div>
    <div class="col-md-8 main-body">
      <div id="userdata">
        <?php
        foreach($user_info as $info)
        {
          echo $info->content.'<br />'.$info->added_date.'<br />';
        }
        ?>
      </div>         
    </div>
  </div>
</div>
<script>
  $(document).ready(function () {
  var ajaxUrl = '<?php echo base_url(); ?>' + 'main/userinfo';

  $("#lbl-female").click(function () {
    getAjax(ajaxUrl, 'female');
  });
  $("#lbl-male").click(function () {
    getAjax(ajaxUrl, 'male');
  });
});
function getAjax(URL, gender) {
  $.ajax({
    url: URL,
    data: {gender: gender},
    dataType: "html",
    type: "POST",
    success: function (retdata) {
      $("#userdata").html(retdata);
    }
  });
}
</script>

请注意，在 $.ajax 选项中，

data: {gender: gender},

我们是 "posting" 控制器的数据，将通过在 AJAX 响应函数中使用 $this->input->post("gender"); 检索。

模型除了 return 供控制器使用的数据之外不应做任何事情。根据 returned 数据确定发生的情况是控制器的工作。因此 redirect() 调用已被删除。

Userinfo_model.php

class Userinfo_model extends CI_Model
{
  function __construct()
  {
    // Call the Model constructor
    parent::__construct();
  }

  // Note the default value for argument $gender. 
  // This means you do not have to pass an argument.
  // If you don't pass one, then !empty($gender) === FALSE
  function get_data($gender = NULL)
  {
    $this->db->select('*');

    //select based on gender. 
    //If no $gender then a "where" clause is not needed and both genders are selected
    if(!empty($gender)) 
    //an argument was provided
    {
      if($gender == 'female')
      {
        $this->db->where('gender', 0);
      }
      else
      {
        $this->db->where('gender', 1);
      }
    }

    $query = $this->db->get('tble_userinfo');
    return $query->result();
  }
}

最后，我们到了控制器。 index() 将通过调用 get_data() 而不向模型传递参数来显示两种性别。之后 AJAX 响应者 userinfo() 将 return html 所需性别的 ajax success 功能。 success 函数将用 userinfo() 的新 html 替换现有的 html。

class Main extends CI_Controller
{
  public function __construct()
  {
    parent::__construct();
    $this->load->model('userinfo_model');
  }

  public function index()
  {
    $usermain_data['user_info'] = $this->userinfo_model->get_data();
    $this->load
        ->view('home/inc/header_view')
        ->view('home/main_view', $usermain_data);
  }

  //Only used to respond to an AJAX request
  public function userinfo()
  {
    $gender = $this->input->post('gender');

    if(empty($gender))
    {
      $out =  "No Users Found";
    }
    else
    {
      $user_info = $this->userinfo_model->get_data($gender);
      $out = "";

      foreach($user_info as $info)
      {
        $out .= $info->content.'<br />'.$info->added_date.'<br />';
      }
    }
    echo $out;
  }

}

到目前为止，这似乎相当安全。唯一的用户输入是性别值。（永远不要相信用户输入）如果有人试图传递字符串 "female" 以外的值，数据库将 return 只有男性信息。没有用户输入直接提交给数据库，所以我没有发现任何漏洞。

如何使用 AJAX 请求显示来自代码点火器模型的数据

How to display data from code igniter model with AJAX request

php

ajax

jquery

codeigniter

codeigniter-2