Laravel - 来自复选框的 AJAX POST 选项数组答案

【问题标题】：Laravel - AJAX POST Array of Choices from CheckboxesLaravel - 来自复选框的 AJAX POST 选项数组
【发布时间】：2018-06-01 03:29:21
【问题描述】：

我有一个 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 获得一些帮助，我相信我可以解决其余的问题。

【问题讨论】：

在 .val() 的 jQuery 文档中，它说“获取匹配元素集中第一个元素的当前值”。注意“第一个元素”。听起来你想要一个数组中的所有值，所以检查this question的答案

标签： javascript jquery ajax laravel laravel-5

【解决方案1】：

试试这个-

  billtoemail = $('input[name='billToEmail[]']:checked").map(function () {
      return this.value;
  }).get();

或

billtoemail= new Array();
$("input[name='billToEmail[]']").each(function(){
  billtoemail.push(this.value);
 });

现在发送这个变量billtoemail，就像你的ajax中的其他变量一样。在您的控制器中，您可以通过简单的foreach($request->billTo as $billtoemail) 获取所有值

【讨论】：

【解决方案2】：

首先，您不需要[] 符号。因此，您的复选框 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 可以获取数组，您需要先在控制器中使用 json_decode 解码 billToEmails 字符串。

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

【讨论】：