如何使用Ajax调用在视图页面加载的下拉列表中显示数据库中的内容

时间:2013-06-25 14:58:09

标签: php jquery ajax codeigniter post

您好我使用核心PHP开发了所有这些功能,一切运行良好。现在主要的是我想在CodeIgniter中使用这个,所以我试图将核心PHP代码转换为CI代码。

我的目标是在codeIgniter的视图页面中有两个日期字段,分别称为开始日期和结束日期。在页面加载中将包含两个字段中的当前日期。这两个日期字段将用于选择日期范围。这两个日期将使用名为view.php

的视图页面中的以下代码显示
<!doctype html> 
<html lang="en">
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script>
$(function() {
    $( "#start_date" ).datepicker({
      defaultDate: "+1w",
      dateFormat: "yy-mm-dd",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#end_date" ).datepicker( "option", "minDate", selectedDate );
      }
    }).datepicker("setDate", "0");
    $( "#end_date" ).datepicker({
      defaultDate: "+1w",
      dateFormat: "yy-mm-dd",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#start_date" ).datepicker( "option", "maxDate", selectedDate );
      }
    }).datepicker("setDate", "0");
});
</script>
</head>
<body>
<div id="main">
    <div id="dates">
        <label for="start_date">start date:</label>
        <input type="text" id="start_date" name="start_date" />
        <label for="end_date">end date:</label>
        <input type="text" id="end_date" name="end_date" />
    </div>
</div>

</body>
</html>

现在这个视图页面将从这个名为show.php的控制器中调用。

<?php if(! defined('BASEPATH') ) exit("NO Direct Script Access Allowed");

class Show extends CI_Controller{

        public function __construct()
        {
            parent::__construct();
                    $this->load->model('view_model');
            }

            public function view()
            {
                 $this->load->view('view');
            }
}

现在,我们可以在视图页面中看到正确CI配置中的两个日期字段。我可以看到这一点。现在我想发送这两个日期字段来查询数据库中的内容,获取它们并使用Ajax调用在下拉列表中显示它。所以我试着用以下方式做到这一点。

$(document).ready(function(){

var from_date = $("#start_date").val();
var to_date = $("#end_date").val();

$.ajax({
  type: 'POST',
  async: false,
  url: '<?php echo base_url().'show/get_ros';?>',
  data : { from: from_date , to: to_date },
  success : function(res){
    $('#ro').html(res);
  }
}); 

});

上面的函数添加到视图文件中,另一个div标记将添加到视图文件中,以显示此Ajax调用的结果。

<div id="result">
    <select name="ro" id="ro">

    </select>
</div>

但是在我在模型方面实现某些功能之前,我正在检查是否有来自控制器方法get_ros的调用,但是它还没有到来。我在中间而不知道如何继续任何一个帮助它会很棒。

3 个答案:

答案 0 :(得分:1)

首先,您需要在控制器中创建一个新函数,该函数将从ajax调用中接收数据

<?php
    public function get_ros(){
        if($this->input->post(null)){
            //print_r($this->input->post());die;              #just to check if the values alerted in the success function of the ajax call or else commnet this line.
            echo $result = $this->your_model->your_function();  #call the model function to return the result in HTML markup or whatever   
        }else{
            echo '0';                                       #if no post submission is found just echo 0
        }
    }
?>

在您的模型中,您将获得帖子变量:

<?php
    function your_function(){
        ### dump the post variables into local variables ###
        $from   = $this->input->post('from_date', true);
        $to     = $this->input->post('to_date', true);
        #query your database as you like and "return " the data         
    }
?>

答案 1 :(得分:0)

尝试在"

中的单引号内使用双引号ajax url
url: '<?php echo base_url()."show/get_ros";?>',

OR

url: '<?php echo site_url("show/get_ros");?>',

希望它有意义

此外,您应该将焦点中的ajax来自第二个日期字段

$(document).ready(function(){
$("#end_date").focusout(function(){

var from_date = $("#start_date").val();
var to_date = $("#end_date").val();

$.ajax({
type: 'POST',
async: false,
url: '<?php echo base_url()."show/get_ros";?>',
data : { from: from_date , to: to_date },
success : function(res){
$('#ro').html(res);
}
}); 
});
});

答案 2 :(得分:0)

很少,

为您的ajax请求添加errorHandler,例如

error:function(XMLHttpRequest,textStatus,errorThrown){console.log('status: '+textStatus+'error: '+errorThrown}});

这样您就可以在控制台中看到响应状态,如果没有错误,请记录您的回复

我对PHP没有太多但是javascript不认为“show / get_ros”是一个js变量吗? 所以一定是

url: '<?php echo base_url()."show/get_ros";?>',

并且我对ajax调用不是太多但是数据选项不能是对象或字符串吗?所以相反

data :  "from="+from_date+"&to="+to_date ,