腾讯云

文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用AJAX请求显示代码触发器模型中的数据

问如何使用AJAX请求显示代码触发器模型中的数据
EN

Stack Overflow用户

提问于 2016-07-28 13:52:05

回答 1查看 1.9K关注 0票数 1

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

单击female按钮时，主页URL is http://localhost/main/userinfo/allusers URL is 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>');                       
                });                         
            }

        }
    });          
}

jquery

ajax

codeigniter

codeigniter-2

php

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-07-28 15:58:11

这个答案将使main在初始时加载两个性别。性别按钮将返回所选性别的html，并动态更改页面的html，而不是使用几个性别特定的URL。

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},

我们正在将数据“发布”到控制器，这些数据将通过在AJAX响应函数中使用$this->input->post("gender");来检索。

模型不应该做任何事情，只应该返回数据供控制器使用。控制器的工作是根据返回的数据确定发生了什么。因此，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()将向ajax success函数返回所需性别的html。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“以外的值，数据库将只返回男性信息。没有用户输入直接呈现到数据库中，所以我看不到任何漏洞。

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38638501

复制

相似问题

问如何使用AJAX请求显示代码触发器模型中的数据
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用AJAX请求显示代码触发器模型中的数据EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用AJAX请求显示代码触发器模型中的数据
EN