如何获取同一class输入框的所有值并通过AJAX发送至脚本？

我来帮你搞定这个功能，咱们一步步调整代码，实现收集所有.date输入框的值并通过AJAX发送到后端的需求：

1. 完善showHint()函数，收集所有日期输入值 #

首先得把页面上所有class为date的输入框的值都捞出来，整理成数组（或者后端好接收的格式）。这里用数组存储，之后可以转成JSON或者表单数据发送。

2. 补全AJAX请求逻辑 #

你原来的AJAX代码只写了初始化部分，咱们把请求配置、数据发送和响应处理的逻辑补全。

完整代码示例 #

<!-- 你的表单部分 -->
<input type="text" class="date" name="date[]" onkeyup="showHint()" />
<input type="text" class="date" name="date[]" onkeyup="showHint()" />
<input type="text" class="date" name="date[]" onkeyup="showHint()" />

<script>
function showHint() {
    // 1. 收集所有.date输入框的值
    const dateInputs = document.querySelectorAll('.date');
    const dateValues = Array.from(dateInputs).map(input => input.value.trim());
    
    // 2. 初始化AJAX对象
    let xmlhttp;
    if (window.XMLHttpRequest) {
        // 兼容IE7+、Firefox、Chrome等现代浏览器
        xmlhttp = new XMLHttpRequest();
    } else {
        // 兼容IE6、IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    // 3. 处理AJAX响应
    xmlhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            // 这里可以处理后端返回的内容，比如提示用户或者更新页面
            console.log("后端返回结果:", this.responseText);
            // 示例：如果需要显示提示，可以把结果放到页面元素里
            // document.getElementById("hint-container").innerHTML = this.responseText;
        }
    };
    
    // 4. 配置并发送请求（两种格式二选一）
    // --- 格式一：JSON格式发送（适合现代后端框架）
    xmlhttp.open("POST", "你的后端脚本路径.php", true);
    xmlhttp.setRequestHeader("Content-Type", "application/json");
    xmlhttp.send(JSON.stringify({ dates: dateValues }));

    // --- 格式二：表单数据格式发送（兼容传统PHP/ASP后端）
    // const formData = new FormData();
    // dateValues.forEach(value => {
    //     formData.append(`date[]`, value);
    // });
    // xmlhttp.open("POST", "你的后端脚本路径.php", true);
    // xmlhttp.send(formData);
}
</script>

关键说明 #

• 收集值的逻辑：document.querySelectorAll('.date')会获取所有匹配的输入框，Array.from()把NodeList转成数组，再用map()提取每个输入框的内容（trim()用来去除首尾多余空格）。
• AJAX请求配置：
  • 这里用POST请求更适合发送数据，记得把"你的后端脚本路径.php"换成你实际的后端接口地址。
  • 两种发送格式可选：JSON格式适合Spring Boot、Node.js这类现代框架；表单数据格式适合传统PHP/ASP后端，后端可以直接通过$_POST['date']拿到数组。
• 响应处理：onreadystatechange函数会在请求状态变化时触发，当readyState=4（请求完成）且status=200（请求成功）时，就可以处理后端返回的内容了。

后端示例（PHP） #

如果用表单数据格式发送，后端可以这样接收：

<?php
$dates = $_POST['date'];
// 这里写你的业务逻辑，比如验证日期格式、存入数据库等
echo "收到的日期数组：" . print_r($dates, true);
?>

如果用JSON格式发送，后端需要先解析JSON：

<?php
$json = file_get_contents('php://input');
$data = json_decode($json, true);
$dates = $data['dates'];
// 后续业务逻辑
echo "收到的日期数组：" . print_r($dates, true);
?>

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