通过 Ajax 将多个 HTML 表单字段转换为 PHP 数组

Question

我需要一些帮助。我有下面的 HTML 表单字段，我希望将它们发送到 PHP 页面的各个 PHP 数组。

HTML

<input class="form-control" type="date" onchange="reportSave()" name="testreportname[]">
<input class="form-control" type="date" onchange="reportSave()" name="testreportdate[]">
<input class="form-control" type="date" onchange="reportSave()" name="testreportissue[]">

Javascript

<script>
    function reportSave() {
        //Test Report Name
        //get the data from test report name
        var testreport=document.getElementsByName('testreportname[]');
        var testreportdate=document.getElementsByName('testreportdate[]');
        var testreportissue=document.getElementsByName('testreportissue[]');
        var data1 = $(this).serializeArray();
            
        //for each item in the array
        for(key=0; key < testreport.length; key++)  {        
                    
        data1.push({
        testreport: $("#testreport").val(), testreportdate: $("#testreportdate").val(), testreportissue: $("#testreportissue").val(),
        });
        console.log("key: ", key)
        console.log(testreport)
        }
        
    //send to PHP via ajax
        $.ajax({
            type: "post",
            url: "draftsave.php",
            dataType: "json",
            data: data1,
            success: function(result) {
                console.log(result)
                }
            });
    }
</script>

PHP

<?php
$stestreport=$_POST['testreport'];
$stestreportdate=$_POST['testreportdate'];
$stestreportissue=$_POST['testreportissue'];

for($i=0;$i<count($stestreport);$i++)
        { code here, etc};
?>

编辑，删除已经尝试过的代码。

Answer 1

jQuery 提供了

serialize()

函数，该函数提供了一种非常简单的方法来从表单或一组特定字段中获取所有数据，并将它们转换为通常传输的表单 URL 编码格式如果您提交了常规表单（没有 AJAX）。这是 PHP 识别的格式，并将自动转换为其

$_POST

数组中的数据。

这个小演示展示了

a）serialize() 输出什么

b) 使用类名选择您感兴趣的特定字段的方法（注意 HTML 中每个输入字段上的额外类）

c) 一种更好的方式，使用选择器来不引人注意地处理“更改”事件，而不是在 HTML 中添加

onchange

属性。

$(".reportField").change(function() {
  var formFields = $(".reportField").serialize();
  console.log(formFields);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="form-control reportField" type="date" name="testreportname[]">
<input class="form-control reportField" type="date" name="testreportdate[]">
<input class="form-control reportField" type="date" name="testreportissue[]">

因此，如果您想在 AJAX 中使用它，您最终会得到如下结果：

$(".reportField").change(function() {
  var formFields = $(".reportField").serialize();
  console.log(formFields);
});

$.ajax({
    type: "post",
    url: "draftsave.php",
    data: formFields,
    success: function(result) {
        console.log(result)
    }
});