Question

我是使用AJAX和PHP的详细Javascript的新手，并且已经进行了大量的阅读，并且在这个阶段主要是试错，但我遇到了一个我没有找到Javascript和Ajax的情况信息正在推动我朝着正确的方向发展，因此我产生了一些不好的代码。

我家里有2个太阳能逆变器，每个逆变器上都有一个RS232数据端口，现在通过IP转换器连接到我的家庭网络，将数据上传到每小时逆变器的电源MySQL表，并在我制作的一个简单的网站上显示数据，这样我就可以看到我在工作的白天时间里发生了什么。

我创建了一个带有JQuery Datepicker的网页来生成信息报告。我正在尝试使用DatePicker作为工具来选择我想要查看电源生成时间的“开始”和“结束”日期，然后从MySQL表中调用该信息，然后在网页上生成表单/表格我可以看到并打印。

我一直在尝试使用AJAX来请求PHP执行此操作而没有结果。

我有一个基本的MySQL表......

+---------+----------+------------+---------+------------+----------+ 
| UNIT ID |  Date    |    Time    |  Power  |  Volts     |  Current | 
+---------+----------+------------+---------+------------+----------+ 
|    1    |YYYY-MM-DD|  12:00:00  |  560    |   XXXX     |   XXXX   | 
+---------+----------+------------+---------+------------+----------+ 
|    1    |YYYY-MM-DD|  13:00:00  |  560    |   XXXX     |   XXXX   | 
+---------+----------+------------+---------+------------+----------+ 
|    1    |YYYY-MM-DD|  12:00:00  |  490    |   XXXX     |   XXXX   | 
+---------+----------+------------+---------+------------+----------+

等...

HTML头代码是......

//DatePicker
<script type="text/javascript"> 
$(function(){
$('input').daterangepicker({dateFormat: 'M d, yy', posX: 25, posY: '6.8em'}); 
});
</script>

//Ajax XML connect to the PHP to MySQL and back
<script type="text/javascript">
function makeReport(str)
{
if (str=="")
  {
  document.getElementById("start1").innerHTML="";
  document.getElementById("end1").innerHTML="";
  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("txtText").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","report.php"+str,true);

xmlhttp.send();
}
</script>

在页面正文中我有......

//The DatePicker
<div id="calsw"><label>
      From:   
      </label>
      <input type="text" id="start1" onchange="makeReport(this.value)"/>       
      <label>
        To:
      </label><input type="text" id="end1" onchange="makeReport(this.value)"/></div>

//Where the Report will show
<div id="textHint" align="center">Report Data will list here</div>

PHP（report.php）写成......

<?php
$start1=strtotime('start1');
$end1=strtotime('end1');

$con = mysql_connect('localhost', 'XXXX', 'XXXXXXXX');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("inverters", $con);

$sql='select * date, time, power, amp, current ' 
.'FROM feed AS textHint '
.'ORDER BY date,time'
.'WHERE DATE BETWEEN [start1] and [end1]';

$res = mysql_query($sql);
while ($row = mysql_fetch_assoc($res))
echo $row['textText'];
echo "<table border='1'>
<tr>
<th>Date</th>
<th>Hour</th>
<th>Power</th>
<th>Volt</th>
<th>Current</th>
</tr>";

while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['Date'] . "</td>";
  echo "<td>" . $row['Time'] . "</td>";
  echo "<td>" . $row['Power'] . "</td>";
  echo "<td>" . $row['Volt'] . "</td>";
  echo "<td>" . $row['Current'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

mysql_close($con);
?>

我读的越多，我对代码的不同处理越多，我觉得我根本不会前进。对此的任何帮助，或者我可以阅读和教育自己使用日期选择器进行数据调用的链接都会很精彩。

谢谢。

艾伦

Answer 1

从headerblock中的代码看，您似乎正在尝试手动完成所有AJAX工作并自行管理所有crossbrowser实现。在您开始尝试学习AJAX之前，我建议您了解一些可以管理所有适合您的JavaScript框架。

本网站上最常引用的是jQuery，因为它有一个非常活跃的社区并且发展良好。否则，我知道维基百科有很多各种框架的选项。

使用框架的关键在于它为您管理所有跨浏览器的内容，并让您专注于手头的任务，在这种情况下发出AJAX请求。

另一点，AJAX的名称以X for XML结尾，但现在JSON被认为是首选的有线格式，因为它更轻松，更容易在javascript中操作。只是要考虑的事情，如果你还没有，你可以学习新东西。

Answer 2

请尝试以下内容，因为您的代码已经使用了基于datepicker插件的jQuery ...

的Javascript

 
$(function(){
$('#start1').daterangepicker({
    dateFormat: 'M d, yy',
    posX: 25, posY: '6.8em',
    onSelect: function(dateText,inst) {
        $.post("report.php",{dt_start:dateText},function(data){
            $("#textHint").html(data);
        });
    }
});


$('#end1').daterangepicker({
    dateFormat: 'M d, yy',
    posX: 25, posY: '6.8em',
    onSelect: function(dateText,inst) {
        $.post("report.php",{dt_end:dateText},function(data){
            $("#textHint").html(data);
        });
    }
}); 
});

php side

$start1 = (isset($_POST['dt_start'])) ? date("Y-m-d",strtotime($_POST['dt_start'])) : date("Y-m-d");
$end1   = (isset($_POST['dt_end'])) ? date("Y-m-d",strtotime($_POST['dt_end'])) : date("Y-m-d");

    //code so on...

Answer 3

我已经重新完成了2个日期选择器，但仍然无法使POST运行。但至少我已将结束日期设定为大于开始......

这是没有POST功能的工作......

<script type="text/javascript">         
    $(function () {

        var start1 = $('#start1');
        var end1 = $('#end1');

        start1.datepicker({ onClose: clearEndDate });
        end1.datepicker({ beforeShow: setMinDateForEndDate });

        function setMinDateForEndDate() {
            var d = start1.datepicker('getDate');
            if (d) return { minDate: d }
        }
        function clearEndDate(dateText, inst) {
            end1.val('');
        }
    })

无论我如何编写GET或POST函数，它都不起作用......我该怎么做才能让它工作？

以下是在页面正文中显示日期选择器的新表单。

<body>

开始日期：结束日期：

Datepicker将生成一个报告

3 个答案: