将数据数组从表单传递到Ajax,传递到PHP发布文件

时间:2019-02-01 16:24:30

标签: javascript php jquery ajax mysqli

我会尽量保持简短。 我有一个表单,其中的输入字段(其中的54个)自动填充了数据库中的数据。使用PHP while循环为每个输入字段的ID分配ID。用户可以编辑值,然后单击提交。提交表单后,数据将传递到jquery中的数组。我希望能够通过POST将数组从ajax传递到PHP。

表单/提交页面

$settings = array();
$counter = 0;

if(mysqli_num_rows($result) > 0){
    while($row = mysqli_fetch_assoc($result)) {
        $settings[$counter] = $row['value'];

        echo "<tr>
                <td>" . $row[$settings] . "</td>
                <td><input type=\"text\" id=\"" . $counter . "\" value=\"" 
                                 . $settings[$counter] . "\"></td>";
        counter++;
    }
}

mysqli_close($svr_link);

jQuery脚本(在表单/提交页面内部)

    $('#update').click(function(event) {
    event.preventDefault();

    var settings = [];
    for (i=0; i<55; i++) {
        settings[i] = $('#' + i).val();
    }

    $.ajax({
        type: "POST",
        url: "pages/post.php",
        data: {settings:settings},
        success: function(data) {
            $('#message').html(data);
        }
    });
});

我的问题是:

  1. 我是否在ajax调用中正确设置了该数据数组?

  2. 如何提取和处理post.php文件中的数据数组?

让我知道我是否省略了一些相关内容

2 个答案:

答案 0 :(得分:3)

如果您要以JSON格式发送数组数据,建议在客户端设置的ajax中设置dataType

$.ajax({
    type: "POST",
    url: "pages/post.php",
    dataType: 'json',
    data: {settings:settings},
    success: function(data) {
        $('#message').html(data);
    }
});

在服务器端,使用json_decode函数可获得一个数组,这样您就可以轻松处理数据。就像这样:

json_decode($_POST['settings'], true);

答案 1 :(得分:2)

name属性添加到数组形式的所有输入中

while($row = mysqli_fetch_assoc($result)) {
        $settings[$counter] = $row['value'];

        echo "<tr>
                <td>{$row[$settings]}</td>
                <td>
                    <input 
                        type=\"text\" 
                        id=\"{$counter}\" 
                        name=\"settings[{$counter}]\" 
                        value=\"{$settings[$counter]}\"
                        >
                </td>";
        counter++;
    }

然后在表单中添加id(如果您没有表单标签,请将ID放在包含所有输入的HTML元素上,例如table),在jQuery serializeArray()

let data = $('#formId').find(':input').serializeArray();

因此,您的代码变为:

$('#update').click(function(event) {
    event.preventDefault();

    let data = $('#formId').find(':input').serializeArray();

    $.ajax({
        type: "POST",
        url: "pages/post.php",
        data: data,
        success: function(data) {
            $('#message').html(data);
        }
    });
});

jQuery.serializeArray()

  

将一组表单元素编码为名称和值的数组。

from jQuery.serializeArray() documentation