检索输入元素数组并将其附加到 FormData

Question

假设我有以下 HTML 输入元素：

<input type="text" name="textinput[300]">
<input type="text" name="textinput[450]">
<input type="text" name="textinput[248]">

我想检索这些字段的值以将它们附加到 FormData 对象，以便通过 Ajax 将它们发送到服务器端。每个数组元素中的键都非常重要，因为它表示与每个输入字段关联的唯一 ID。我将文本字段名称设置为具有唯一键的数组的原因是因为我按以下方式设置了服务器端代码：

<?php
if(isset($_POST['textinput'])){
    $IDs = array_keys($_POST['textinput']);

    foreach($IDs as $index => $ID){

        $field_value = $_POST["textinput"][$ID]);

        $query = "UPDATE `tablename` SET fieldname = $field_value WHERE `ID` = $ID";

        try{
            $stmt = $db->prepare($query);
            $result = $stmt->execute();
        }
        catch(PDOException $ex){
            die("UPDATE Failed ".$ex->getMessage());
        }

    }
}
?>

以下 JS 对我不起作用，显然这不仅仅是检索输入字段，将其附加到 Formdata 对象并通过 ajax 将其发送到服务器端处理中：

<script>
        var textinput = document.getElementsByName('textinput');

        var data = new FormData();

        data.append('textinput[]', textinput);

        $.ajax({
            type: "POST",                
            url: "ajax-processing.php",
            processData: false,
            contentType: false,
            cache: false,
            data: data,
            success: function(data) {
                alert("Success!!!");
            },
            error: function(xhr, textStatus, errorThrown) {
                alert('Failed to save data');
            }
        });
}
</script>

Answer 1

尝试改变

var textinput = document.getElementsByName('textinput');
var data = new FormData();
data.append('textinput[]', textinput);

至

var data = new FormData();
var textinputs = document.querySelectorAll('input[name*=textinp‌ut]');
for( var i = 0; i < textinputs.length; i++ )
    data.append(textinputs[i].name, textinputs[i].value);

检索输入元素数组并将其附加到 FormData

Retrieve and append array of input elements with keys to FormData

javascript

jquery

form-data