如何使用Ajax和JavaScript获取选中日期间的数据库数据并解决参数传递问题

• 前端JS未正确获取日期输入框的值：代码中直接使用start、end变量拼接请求URL，这两个变量对应的是id为start/end的DOM元素对象，不是用户输入的日期值，序列化后就会出现object HTMLInputElement的错误
• 函数逻辑冗余：datefilter定义了接收str参数，但调用时没有传参，开头的空值判断逻辑错误，会导致请求无法正常触发
• 服务端SQL拼接错误：PHP代码中拼接BETWEEN条件的语法错误，同时直接拼接用户输入参数存在严重SQL注入风险

1. 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>

2. Datefilter.js部分 #

function datefilter() {
    // 先阻止表单默认提交行为，避免页面刷新
    event.preventDefault();
    // 主动获取两个日期输入框的value
    let startDate = document.getElementById('start').value;
    let endDate = document.getElementById('end').value;
    // 加校验，必须两个日期都选择才发请求
    if (startDate == '' || endDate == '') {
        document.getElementById('tabledata').innerHTML = '请选择完整的起止日期';
        return;
    }
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById('tabledata').innerHTML = this.responseText;
        }
    };
    // 拼接正确的参数值，encodeURIComponent处理特殊字符
    xmlhttp.open(
        'GET',
        'ajax/datefilter.php?s=' + encodeURIComponent(startDate) + '&e=' + encodeURIComponent(endDate),
        true
    );
    xmlhttp.send();
}

3. datefilter.php部分 #

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

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

// 使用预处理语句防SQL注入，不要直接拼接用户输入参数
$stmt = $connect->prepare("SELECT * FROM `0986` WHERE `date` BETWEEN ? AND ?");
$stmt->bind_param("ss", $s, $e);
$stmt->execute();
$results = $stmt->get_result();

while($row = $results->fetch_assoc()) {
    echo $row['date'];
    echo $row['driver'];
}
$stmt->close();
$connect->close();
?>

内容的提问来源于stack exchange，提问作者tru_shar