在laravel中使用ajax将多个数组发送到控制器

Posted 2023-03-14

【中文标题】在laravel中使用ajax将多个数组发送到控制器

【英文标题】：Sending multiple array to controller with ajax in laravel

【发布时间】：2019-06-27 11:55:27

【问题描述】：

我的视图中附加了自定义表单，当我向控制器发送数据时，我无法获得超过 1 个表单数据，我需要发送数据数组。

DD

这是我目前发送的内容：

array:7 [
  "_token" => "ZMyuEaT3SJpdwo7toCUA95zNxjSfzDn9G6xSm7G0"
  "title" => "ujykuyl"
  "type" => "color"
  "vals" => "fgj"
  "sku" => "gj"
  "price" => "47"
  "color" => "547457"
]

应该是这样的：

array:7 [▼
  "_token" => "ZMyuEaT3SJpdwo7toCUA95zNxjSfzDn9G6xSm7G0"
  "title" => "ujykuyl"
  "type" => "color"
  "vals" => array:2 [▼
    0 => "fgj"
    1 => "hstghtrh"
  ]
  "sku" => array:2 [▼
    0 => "gj"
    1 => "36457"
  ]
  "price" => array:2 [▼
    0 => "47"
    1 => "676484"
  ]
  "color" => array:2 [▼
    0 => "547457"
    1 => "537637"
  ]
]

代码

所有部分都在下面的代码中进行了注释，因此您可以了解每个部分的含义 部分可以。

<div id="buildyourformaddtitl">
    // title
    <div class="col-md-4 mt-20">
        Form::label('opttitle', 'Group Title')
        Form::text('opttitle', null, array('class' => 'form-control'))
    </div>
    // group type
    <div class="col-md-4 mt-20">
        Form::label('opttype', 'Group Type')
        <select name="opttype" id="opttype" class="form-control">
            <option value="">-- Select --</option>
            <option value="dropdown">DropDown</option>
            <option value="radio">Radio</option>
            <option value="color">Color/Texture</option>
        </select>
    </div>
</div>
<div class="col-md-4 mt-20">
    Form::label('addtitl', 'Add Values')
    <br>
    //adding value inputs to view (unlimited)
    //PS: this values must be send as array
    <input type="button" value="Add values" class="btn btn-success addtitl" id="addtitl" />

    //saving data
    <button type="button" class="optsave btn btn-danger">
        Save
    </button>
</div>

javascript

注意：我已经通过在每个数组中添加 [] 将这些数据设置为数组 字段名称。唯一的问题是通过 JavaScript 获取所有这些。 （目前我的 JS 代码只有第一行）

<script>
    $(function()
        // add values to view (unlimetd)
        $("#addtitl").click(function() 
            var lastField = $("#buildyourformaddtitl div:last");
            var intId = (lastField && lastField.length && lastField.data("idx") + 1) || 1;
            var fieldWrapper = $("<div class=\"col-md-8 mt-20\" id=\"field" + intId + "\"/>");
            fieldWrapper.data("idx", intId);
            var fName = $("<label for=\"optvals\">Value</label><input type=\"text\" name=\"optvals[]\" class=\"form-control optvals\" />");
            var fSku = $("<label for=\"optsku\">SKU</label><input type=\"text\" name=\"optsku[]\" class=\"form-control optsku\" />");
            var fPrice = $("<label for=\"optprice\">Price</label><input type=\"text\" name=\"optprice[]\" class=\"form-control optprice\" />");
            var fColor = $("<label for=\"optcolor\">Color</label><input type=\"text\" name=\"optcolor[]\" class=\"form-control optcolor\" />");
            var removeButton = $("<button type=\"button\" class=\"btn btn-danger\"><i class=\"fa fa-minus\"></i></button>");
            removeButton.click(function() 
                $(this).parent().remove();
            );
            fieldWrapper.append(fName);
            fieldWrapper.append(fSku);
            fieldWrapper.append(fPrice);
            fieldWrapper.append(fColor);
            fieldWrapper.append(removeButton);
            $("#buildyourformaddtitl").append(fieldWrapper);
        );
        // send data to controller
        $(".optsave").on("click", function(e)
            e.preventDefault();
            var form = $(this).closest('form');
            $.ajax(
              type: "post",
              url: " url('admin/optionsStoreAjax') ",
              data: 
                '_token': $('input[name=_token]').val(),
                'title': $(this).closest('form').find('#opttitle').val(),
                'type': $(this).closest('form').find('#opttype').val(),
                'vals': $(this).closest('form').find('.optvals').val(),
                'sku': $(this).closest('form').find('.optsku').val(),
                'price': $(this).closest('form').find('.optprice').val(),
                'color': $(this).closest('form').find('.optcolor').val(),
              ,
              success: function (data) 
                alert(data);
              ,
              error: function (data) 
                console.log('Error!', data);
              
            );
        );
        //end sending data
    );
</script>

问题

如何获取所有附加字段的数组？

【参考方案1】：

您可以使用 JQuery 映射函数来执行此操作，如下所示，

var arrOptvals = $(this).closest('form').find('input[name="optvals[]"]').map(function ()
    return this.value; // $(this).val()
).get();