使用AJAX PHP获取数据并显示到多个字段

时间:2015-09-17 20:34:50

标签: javascript php ajax xmlhttprequest

我是AJAX的新手,我无法将获取的数据显示到datepicker startdate和enddate的2个不同元素,但我只能从ajax响应中获取1个值。 我的HTML在下面给出

<div class="control-group" id="startingdatee">
    <label class="control-label" for="form-field-1">
        Start Date
    </label>
    <div class="controls" style="width:265px;" id="startingdate">
       <input class="span10 date-picker" id="startdate" value="" type="text" data-date-format="dd-mm-yyyy" name="startdate">
    </div>
</div>
<div class="control-group">
    <label class="control-label" for="form-field-1">
        End Date
    </label>
    <div class="controls" style="width:265px;">
        <input class="span10 date-picker" id="enddate" type="text" data-date-format="dd-mm-yyyy" name="enddate">
    </div>
</div>

下面给出了Java Script,它用于从dateshow.php文件获取响应,并且只能更新1个仅为startdate的值。我使用了document.getElementById(“startdate”)。value = response ..

function showDate(str) 
{
 if (str=="") 
 {
  return;
 } 
 if (window.XMLHttpRequest) 
 {
   // code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
 } 
 else 
 { 
   // code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
   xmlhttp.onreadystatechange=function() 
 {
   if (xmlhttp.readyState==4 && xmlhttp.status==200) 
   {
    document.getElementById("startdate").value = xmlhttp.responseText;
   }
 };
  xmlhttp.open("GET","dateshow.php?q="+str,true);
  xmlhttp.send();
 };

和php文件是dateshow.php,用于获取最小日期和最长日期。

<?php include('includes/db.php'); 
  $q = $_REQUEST["q"];
  //echo $q;
  //$q = 41;
  $query =  "SELECT MIN(datetime) AS MIN,MAX(datetime) AS MAX
         FROM transactions
         WHERE farm_id = $q";
  $run = mysqli_query($con, $query);
  while($row = mysqli_fetch_array($run))
  {
    $mindate = $row['MIN'];
    $maxdate = $row['MAX'];
  } 
  $mindatefor = strtotime($mindate);
  $startdate = date('d-m-Y',$mindatefor);
  $maxdatefor = strtotime($maxdate);
  $enddate = date('d-m-Y',$maxdatefor);
  echo $startdate;//."#".$enddate;
  ?>

enter image description here

2 个答案:

答案 0 :(得分:0)

尝试在php脚本中创建一个数组,并对其进行json编码。

$returnData = ['start'=> $startDate, 'end'=> $endDate];
echo json_encode($returnData);

然后,当您使用AJAX检索数据时,请执行JSON.parse(xmlhttp.responseText)

这将返回一个看起来像这个

的javascript对象
{
    start: some start data,
    end: some end data
}

答案 1 :(得分:0)

可能在示例中使用json响应实现您的目标假设您的页面在示例中返回了json对象:

<?php 
   /*do some stuff here and implementing you query, iteration and so on so 
   forth then provide a response with the result that you have from your 
   task and suppose in this case in example that $startdate="01-01-2015" and 
   $maxdatefor="02-02-2015"
  */

   header('Content-Type: application/json');
   echo json_encode(array('datepicker1' => $startdate,'datepicker2' => $maxdatefor,));
?>

它会将json对象返回到你的javascript中,如

{datepicker1:01-01-2015,datepicker2=02-02-2015}

现在获取那些数据非常简单,你可以使用jquery ajax请求,在我的personl建议中使用更简单的使用这个模式

//Make your check in your function before make an ajax request in order to
//be sure that all the information, input or any other stuff is in the right
//place as well then make this call below 

$.ajax({
    type:"POST / GET", //IN YOUR CASE GET
    url: "youurl" + "yourparamenter",//DONT FORGET TO ENCODE QUERY STRING
    data: '', //NOT NECESSARY IN YOUR SPECIFIC CASE
    success: function (data) {
    //data is the json returned value within the reponse and you can access in this way
     $("#startdate").val(data['datepicker1']); 
     $("#enddate").val(data['datepicker2']);
    },
    error: function () {
        alert('Something is gone wrong!!!!');
    }
});

不要忘记:在页面标记中添加jquery脚本引用,以便能够调用Jquery函数。

我希望这可以帮到你

此致