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

时间:2016-04-28 03:51:40

标签: javascript php jquery mysql ajax

我正在尝试在同一页面上从mySql加载一个表,而不是重定向到另一个页面。我让用户选择日期范围,然后按提交它应显示在指定的div id标签中。但它似乎没有起作用。我已经测试了查询php页面本身,它的工作原理。谢谢你的帮助。

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

2 个答案:

答案 0 :(得分:0)

在foreach()更新<tr>后,未关闭while内的echo。它应该是echo '<\tr>'

答案 1 :(得分:0)

您的代码中存在一些类型错误:

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

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

并将您的fireAjax()功能移出$(document).ready(function(){})

希望它有效。最诚挚的问候