来自同一页面上的mysql的Ajax加载表无法正常工作

I am trying to load a table from mySql on the same page and not be redirected to a different page. I have the user select the date range and then by pressing submit it should show up in the designated div id tag. However it does not seem to be working. I have tested the query php page already by itself and it works. Thanks for your help.

html

<script>
$(document).ready(function(){
    //AJAX CALL
    function fireAjax(){
        var data1=document.getElementByID("from");
        var data2=document.getElementByID("to");

        if(data1 && data2){
            $.ajax({
                url:"chartRetrieve.php",
                type:"POST",
                data:{
                    range1:date1,
                    range2:date2,
                    },
                    success: function (response)
                    {
                    $('#chartDiv').html(response);
                    }
            });
        }
        else{
            $('#chartDiv').html("No Range Given");
        }

    }
});
</script>
      <div id ="form">
        <div id="date1">
          <form id="form1" name="form1" method="post" action="">
            <label for="from">From</label>
            <input type="text" id="from" name="from" />
            <label for="to">to</label>
            <input type="text" id="to" name="to" />
            <input type="button" id="btnLoad" name="btnLoad" value="Submit" onclick="fireAjax();"/>
          </form>
        </div>
      </div>
      <div id="chartDiv">Test</div>

php

<?php

    include("dbconnect.php");   

    $link=Connection();

    if(isset($_POST['range1']) && $_POST['range2'])
    {
    $data1 = $_POST['range1'];
    $data2 = $_POST['range2'];
    //$data1 = '2016-04-21 06:26:11';
    //$data2 = '2016-04-24 06:30:11';
    $result = mysql_query(
                          "
                          SELECT DISTINCT Date, Count
                          FROM testLocation 
                          WHERE Date 
                          BETWEEN '$data1%' AND '$data2%'
                          "
                          ,$link
                          );


      if($result!==FALSE){
             echo '<table cellpadding="0" cellspacing="0" class="db-table">';
             echo '<tr><th>Date</th><th>Count</th></tr>';
             while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
                   echo '<tr>';
                   foreach($row as $key=>$value1){
                   echo '<td>', $value1,'</td>';
                   }
                   echo '<tr>';
             }
             echo '</table><br />';
             mysql_free_result($result);
             mysql_close();
          }
    }
    else{
        echo 'No Data';
    }
?>

Did not close the <tr> inside while after foreach() update the echo. it should be echo '<\tr>'

There were some type errors in your code:

• var data1=document.getElementByID("from"); var data2=document.getElementByID("to");

should be

`var date1=document.getElementById("from");
    var date2=document.getElementById("to");`

and also move your fireAjax() function out of the $(document).ready(function(){})

Hope it works. Best Regards