同一页面上的 mysql 中的 Ajax 加载表不起作用

Ajax loading table from mysql on same page not working

本文关键字:Ajax 加载 不起作用 中的 mysql 一页      更新时间:2023-09-26

>我正在尝试在同一页面上从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';
    }
?>

在 foreach() 更新 echo 后没有关闭 while 内部的<tr>。 应该是echo '<'tr>'

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

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

应该是

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

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

希望它有效。此致敬意