如何通过ajax到php处理多个表单数据答案

【问题标题】：How to handle multiple form data via ajax to php如何通过ajax到php处理多个表单数据
【发布时间】：2021-08-20 09:08:19
【问题描述】：

<input type="text" value="2021-05-01" class="date" name="date">                     
<input type="text" value="10:00" class="starttime" name="starttime">                        
<input type="text" value="17:00" class="endtime" name="endtime">                        
<input type="text" value="7" class="hours" name="hours">

通常我会如下处理这些数据：

var date $('.date');val();
var starttime $('.starttime');val();
var endtime $('.endtime');val();
var hours $('.hours');val();

$.ajax({
        url: 'process.php',
        data: {             
                date: date,
                starttime: starttime,
                endtime: endtime,
                hours: hours,                               
        },
        type: "POST",       
        success: function (data) {          
            $('.response').html(data); // echo success in div .response                                                             
        },
                                    
});

还有我的 php：

$maydata = [];
$maydata['date'] = $_POST['date'];
$maydata['starttime'] = $_POST['starttime'];  
$maydata['endtime'] = $_POST['endtime'];
$maydata['hours'] = $_POST['hours'];

$id = 'id_'.$maydata['date'].str_replace('-','',$maydata['date']); // stirp out hyphens from date
$file = 'data/'.$id.'.json';
$jsonData = json_encode($maydata, JSON_NUMERIC_CHECK | JSON_PRETTY_PRINT);
file_put_contents($file, $jsonData);
echo 'data stored succesfully!';

我的 json 文件 (id_20210501.json) 如下所示：

{
    "date": "2021-05-01",
    "starttime": "10:00",
    "endtime": "17:00",
    "hours": 7
}

上述表格仅包含 5 月 1 日及其开始时间、结束时间和小时数。

我怎样才能在五月的所有日子里轻松做到这一点（例如）？

所以我的表单看起来像：

<input type="text" value="2021-05-01" class="date" name="startdate">                        
<input type="text" value="10:00" class="starttime" name="starttime">                        
<input type="text" value="17:00" class="endtime" name="endtime">                        
<input type="text" value="7" class="hours" name="total">

<input type="text" value="2021-05-02" class="date" name="startdate">                        
<input type="text" value="11:00" class="starttime" name="starttime">                        
<input type="text" value="17:00" class="endtime" name="endtime">                        
<input type="text" value="6" class="hours" name="total">

// and so on till 2021-05-31

【问题讨论】：

标签： php html jquery ajax

【解决方案1】：

要在 HTML 表单中提交多个同名字段，您需要在名称属性中使用数组语法：

<input type="text" value="2021-05-01" class="date" name="startdate[]">                        
<input type="text" value="10:00" class="starttime" name="starttime[]">                        
<input type="text" value="17:00" class="endtime" name="endtime[]">                        
<input type="text" value="7" class="hours" name="total[]">

<input type="text" value="2021-05-02" class="date" name="startdate[]">                        
<input type="text" value="11:00" class="starttime" name="starttime[]">                        
<input type="text" value="17:00" class="endtime" name="endtime[]">                        
<input type="text" value="6" class="hours" name="total[]">

然后在 jQuery 中，而不是单独拉出每个字段，只需让 jQuery serialize 自动为您提供整个表单：

data: $("#form").serialize()

（显然将“#form”选择器替换为您的表单的真实 ID - 它在您的问题中不可见，因此我无法在此处使用它。）

这将为您在服务器端的$_POST 中获得一个多维值数组。

【讨论】：

【解决方案2】：

在 javascript 中为每个输入编写一个变量非常耗时。

我建议您实现可以在整个表单上调用的 .serialize()。例如下面的例子。如果您希望添加更多值，可以在末尾附加它们。

假设您在某处有一个

。

$.ajax({
    url: 'process.php',
    data : $('#form').serialize() + "&variable=value",
    type: "POST",       
    success: function (data) {          
        $('.response').html(data); // echo success in div .response                                                             
    },                                
});

在后端，不要忘记清理来自前端的值以避免安全漏洞。

【讨论】：