使用 Ajax 和 JavaScript 从数据库中获取所选日期之间的数据

Posted 2023-05-08

【中文标题】使用 Ajax 和 JavaScript 从数据库中获取所选日期之间的数据

【英文标题】：get data between selected dates using Ajax and JavaScript from database

【发布时间】：2021-12-30 18:38:06

【问题描述】：

我正在使用 Ajax 根据选择获取数据。我需要创建一个过滤器来检索选定日期之间的数据。

html

<form method="POST">
 <label for="start">start:</label>
 <input type="date" id="start" name="start">
 <label for="end">end:</label>
 <input type="date" id="end" name="end">
 <input type="submit" value="Get Data" name="submit" onchange="datefilter(this.value)">
</form>

现在的问题是，如何从两个日期选择器中获取输入值并将它们传递给 AJAX 变量，如下面的 AJAX 代码。因为 onchange 事件只会返回单个输入字段的值。

下面，我使用了一个选择标签来获取选择标签中的特定数据。

HTML

<select name="truck" onchange="selectVehicle(this.value)">
 <option value="All">All</option>
 <option value="GJ XX T 1234">GJ XX T 1234</option>
 <option value="GJ XX T 1234">GJ XX T 1234</option>
 <option value="GJ XX T 1234">GJ XX T 1234</option>
</select>

AJAX

function selectVehicle(str) 
 if (str == '') 
   document.getElementById('tabledata').innerHTML = '';
   return;
   else 
   var xmlhttp = new XMLHttpRequest();
   xmlhttp.onreadystatechange = function () 
   if (this.readyState == 4 && this.status == 200) 
    document.getElementById('tabledata').innerHTML =
    this.responseText;
   
  ;
  xmlhttp.open('GET', 'ajax/filter.php?q=' + str, true);
  xmlhttp.send();

服务器

<?php

include("../partials/connect.php");

$q = $_GET['q'];

$sql="SELECT * FROM `0986`  WHERE `vehicle` = '".$q."'";
    
$results=$connect->query($sql);  
    
while($row=$results->fetch_assoc()) 

 echo $row['date'];
 
 echo $row['driver'];

更新 更改为提交按钮上的 onclick 事件。但是输入值不会使用 Ajax 传递给 datefilter.php 文件。

HTML

<form method="POST">
 <label for="start">start:</label>
 <input type="date" id="start" name="start">
 <label for="end">end:</label>
 <input type="date" id="end" name="end">
 <input type="submit" value="Get Data" name="submit" onclick="datefilter()">
</form>

在下面的代码中使用变量 s 和 e 传递输入日期。 日期过滤器.js

function datefilter(str) 
    if (str == '') 
        document.getElementById('tabledata').innerHTML = '';
        return;
     else 
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () 
            if (this.readyState == 4 && this.status == 200) 
                document.getElementById('tabledata').innerHTML =
                    this.responseText;
            
        ;
        xmlhttp.open(
            'GET',
            'ajax/datefilter.php?s=' + start + '&e=' + end,
            true
        );
        xmlhttp.send();

        event.preventDefault();
    

echo $s 和 $e 输出 object HTMLInputElement][object HTMLInputElement] 日期过滤器（）

<?php

include("../partials/connect.php");

// $v = $_GET['v'];

$s = $_GET['s'];
echo $s;

$e = $_GET['e'];   
echo $e;

$sql="SELECT * FROM `0986` WHERE `date` BETWEEN '.$s.' AND  '.$e.'";
    
$results=$connect->query($sql);  

while($row=$results->fetch_assoc()) 

 echo $row['date'];
 
 echo $row['driver'];


  

?>

【问题讨论】：

使用提交按钮而不是 onchange，否则用户在将数据发送到服务器并获得响应之前将没有机会正确选择日期。这对用户来说可能很烦人和困惑，而且也很浪费，因为您正在使用资源来发出可能没有必要的请求。如果您处理按钮的“单击”事件，则可以编写 javascript 从您感兴趣的所有字段中获取值

@ADyson 是的，我使用 PHP 代码使用了提交按钮。这也将选择标签中的值取消选择为默认值。但是我不想在单击按钮时刷新页面。我想要选择第二个日期时的数据。还有其他方法吗？

再读一遍我说的。您需要使用 JavaScript 处理提交按钮的“点击”事件。然后，您可以为 Ajax 请求选择所需的值。仅仅因为您使用了提交按钮并不意味着您必须进行完整的回发。

@ADyson 正如你所建议的，我使用了提交按钮。但是这些值没有传递给 SQL 查询。

@ADyson 已解决。谢谢。

【参考方案1】：

HTML

<label for="start">start:</label>
<input type="date" id="start" name="start">
<label for="end">end:</label>
<input type="date" id="end" name="end">
<input type="submit" value="Get Data" name="submit" onclick="datefilter(this.value)">

变量可以使用标签 id 传递。确定您是否为每个输入标签添加了id。

Ajax datefilter.js

function datefilter(str) 
    if (str == '') 
        document.getElementById('tabledata').innerHTML = '';
        return;
     else 
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () 
            if (this.readyState == 4 && this.status == 200) 
                document.getElementById('tabledata').innerHTML =
                    this.responseText;
            
        ;
        xmlhttp.open(
            'GET',
            'ajax/datefilter.php?s=' +
                start.value +
                '&e=' +
                end.value,              
            true
        );
        xmlhttp.send();

        event.preventDefault();
    

使用id.value，在上面将是start.value。哪些是将传递给数据库查询的输入值。 s= 是第一个变量，&e= 是第二个用于传递的变量。

datefilter.php

<?php

include("../partials/connect.php");

$sdate = date_create($_GET['s']);
$s = date_format($sdate,"Y/m/d");

$edate = date_create($_GET['e']);
$e = date_format($edate,"Y/m/d");

$sql="SELECT * FROM `0986` WHERE `date` BETWEEN '".$s."' AND  '".$e."'";
    
$results=$connect->query($sql);  
while($row=$results->fetch_assoc()) 

 echo $row['date'];
 
 echo $row['driver'];


    

?>