javascript - jquery ajax 按名称发布选择框数组

Question

我想要执行 ajax 请求来更新项目的状态，但针对一个或多个选定的项目。

那么如何将所有选定的复选框项目发布到句柄页面上进行处理呢？

这是我使用的一些代码。但它只会将一个项目发布到流程页面。

<td>
    <input type="checkbox" class="select-all" name="item[]" id="item[78]">
</td>
<td>
    <input type="checkbox" class="select-all" name="item[]" id="item[182]">
</td>

还有 JavaScript

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': "{{ csrf_token() }}}"
    }
});

var formData = {
    item: $('input[name=item\\[\\]]').val(),
}

var type = "POST";
var my_url = "/posturl";

$.ajax({
    type: type,
    url: my_url,
    data: formData,
    success: function (data) {
        console.log(formData);
        console.log(data);
    },
    error: function (data) {
        console.log('Error:', data);
    }
});

Answer 1

1. 为每个复选框分配唯一的名称
2. 将所有复选框放在 form 标记中(所有输入字段都放在一个表单中)。
3. 使用serialize()或serializeArray()用于从表单收集数据
4. 将数据存储在var formData

代码:

<form id="form-name">
    <tr>
        <td>
            <input type="checkbox" name="item[1]">
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="item[32]">
        </td>
    </tr>
</form>

Javascript:

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': "{{ csrf_token() }}}"
    }
});

var formData = $('#form').serializeArray();

var type = "POST";
var my_url = "/posturl";

$.ajax({
    type: type,
    url: my_url,
    data: formData,
    success: function (data) {
        console.log(formData);
    },
    error: function (data) {
        console.log('Error:', data);
    }
});

这会将一系列项目发布到 URL。