javascript - Laravel - 来自复选框的 AJAX POST 选择数组

Question

我有一个要修复的 AJAX 帖子，但由于输入中有大量复选框，我被卡住了。

此刻，假设我有这个:

<input type="checkbox" name="billToEmail[]" value="email1@email.com">email1@email.com
<input type="checkbox" name="billToEmail[]" value="email2@email.com">email2@email.com

我有一个名为“发送通知”的按钮，它会启动以下脚本:

<script>
$('.modal-footer').on('click', '.sendNotificationNow', function() {
    $.ajax({
        type:'POST',
        url: '/shipments/sendNotifications',
        data: {
            'billTo': $('.billToEmail:checked').val(),
            'shipTo': $('.shipToEmail:checked').val(),
            'shipFrom': $('.shipFromEmail:checked').val(),
            '_token': $('input[name=_token]').val(),
        },
        success: function(data) {
            $('.errorTitle').addClass('hidden');
            $('.errorContent').addClass('hidden');

            if ((data.errors)) {
                setTimeout(function () {
                    $('#sentNotifications').modal('show');
                    toastr.error('Validation error - Check your inputs!', 'Error Alert', {timeOut: 5000});
                }, 500);

                if (data.errors.title) {
                    $('.errorTitle').removeClass('hidden');
                    $('.errorTitle').text(data.errors.title);
                }

                if (data.errors.content) {
                    $('.errorContent').removeClass('hidden');
                    $('.errorContent').text(data.errors.content);
                }
            } else {
                toastr.success('Successfully Sent Notifications!', 'Success Alert', {timeOut: 5000});
                $('div.notificationssent').fadeOut();
                $('div.notificationssent').load(url, function() {
                    $('div.notificationssent').fadeIn();
                });
            }
        },
    });
});
</script>

现在，我确定我的问题出现在顶部附近，我正在尝试将多个值“转换”为数据变量。除了 .val() 之外，我还应该放些什么吗？

我还有一些像这样的字段需要处理多个复选框，但如果我能单独为 billToEmail 获得一些帮助，我相信我可以解决其余部分。

Answer 1

首先，您不需要[] 符号。因此，您的复选框 html 将如下所示:

<input type="checkbox" name="billToEmail" value="email1@email.com">email1@email.com
<input type="checkbox" name="billToEmail" value="email2@email.com">email2@email.com

其次，您需要使用 foreach 将复选框上的选定值推送到 javascript 数组变量中:

var billToEmail= [];

$("input:checkbox[name=billToEmail]:checked").each(function(){
  billToEmail.push($(this).val());
});

第三，您需要使用 JSON.stringify() 将 javascript 数组转换为字符串。

billToEmails= JSON.stringify(billToEmail);

然后，将 billToEmails 变量传递到 AJAX 中的数据中。所以，它看起来像这样:

var dataString = "billTo="+billToEmails+"&shipTo="+$('.shipToEmail:checked').val()+"&shipFrom="+$('.shipFromEmail:checked').val()+"&_token="$('input[name=_token]').val();
$.ajax({
        type:'POST',
        url: '/shipments/sendNotifications',
        data: dataString,

为了 PHP 可以获取数组，您需要先在 Controller 中使用 json_decode 解码 billToEmails 字符串。

$variable = json_decode($request->billTo,true);