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

Question

I have been new to AJAX and i am unable to display the fetched data to 2 different elements of datepicker startdate and enddate but i was able to fetch only 1 value from ajax response. My HTML is given below

<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 is given below which is used to get the response from the dateshow.php file and could update only 1 value that is startdate only. I used 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();
 };

and php file is dateshow.php used to get minimum date and maximum date.

<?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;
  ?>

Answer 1

Try creating an array in the php script and json encoding it.

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

Then, when you retrieve the data using AJAX, do JSON.parse(xmlhttp.responseText)

This will return a javascript object that should look like this

{
    start: some start data,
    end: some end data
}

Answer 2

Is possibile achieve your goal using json response in example suppose that you have your page which return a json object in example :

<?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,));
?>

it will return a json object into your javascript like

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

Now get those data is really simple and you can use jquery ajax request which, at my personl advice is more simple to use which use this schema

//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!!!!');
    }
});

Don't Forget: add jquery script reference in your page in head tag in order to be able to call Jquery function.

I hope that this could help you

Regards