如何通过 AJAX 从Laravel控制器传递这个数组并创建一个基于数据的按钮

9njqaruj  于 2023-02-25  发布在  其他
关注(0)|答案(2)|浏览(120)

首先我选择颜色按钮:

<form class="form form-variant">
{{ csrf_field() }}
    
                                                    
    <button type="submit" class="btn btn-success checkbox_click" id="colorChange"  style="colors: purple !important"> Color </button> 
    </form>

我的javascript

<script type="text/javascript">
      $(document).ready(function(){
        $('#myForm{{$skuItemVariant_colorJs->SkuColorId}}').submit(function(e){
          e.preventDefault();
          $.ajax({
            url: "{{ url('product-detail/getsize') }}",
            type: "POST",
            data: $('.form-variant{{$skuItemVariant_colorJs->SkuColorId}}').serialize(),
            success: function(data){
              //alert("Form submission success!");
            },
            error: function(){
              alert("Form submission failed!");
            }
          });
        });
      });

然后我的Json回应:

{Id: 18, SkuItemId: 19, SkuSizeId: 17, SkuColorId: 18, SkuVariantStock: 1, Barcode: "000018",…},…]
0
: 
{Id: 18, SkuItemId: 19, SkuSizeId: 17, SkuColorId: 18, SkuVariantStock: 1, Barcode: "000018",…}
1
: 
{Id: 20, SkuItemId: 19, SkuSizeId: 18, SkuColorId: 18, SkuVariantStock: 1, Barcode: "000020",…}

我想通过 AJAX 传递它,并根据大小SkuItemId的可用数据创建一个新按钮。我有以下JS代码:
因此,如果选择颜色,则会显示数据大小

bmp9r5qi

bmp9r5qi1#

步骤1.将此代码写入主布局的head标签中

`<meta name="csrf-token" content="{{ csrf_token() }}">`

步骤2.在表单中使用@csrf
步骤3.在 AJAX 代码之间编写代码

`headers: {
   'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  },
url: "{{ url('product-detail/getsize') }}",
type: "POST",
`
5lwkijsr

5lwkijsr2#

您可以使用JavaScript遍历数组,并为每个唯一的SkuItemId值生成一个按钮。

<script type="text/javascript">

$(文档). ready(函数(){变量skuItems ={!! json_encode($你的数组)!!};//假设$yourArray包含您提供的数组

// loop through the array to find unique SkuItemId values
var skuItemIds = [];
for (var i = 0; i < skuItems.length; i++) {
  var skuItemId = skuItems[i].SkuItemId;
  if (skuItemIds.indexOf(skuItemId) === -1) {
    skuItemIds.push(skuItemId);
  }
}

// generate a button for each unique SkuItemId value
for (var j = 0; j < skuItemIds.length; j++) {
  var skuItemId = skuItemIds[j];
  var buttonHtml = '<button type="button" class="btn btn-success" style="colors: purple !important">' + skuItemId + '</button>';
  $('#button-container').append(buttonHtml); // assuming there is a container element with id="button-container"
}

// handle form submission for each button
$('.btn-success').click(function() {
  var skuItemId = $(this).text();
  var skuItemVariant = skuItems.find(function(item) {
    return item.SkuItemId === skuItemId;
  });
  if (skuItemVariant) {
    // submit the form using Ajax
    var form = $('.form-variant' + skuItemVariant.SkuColorId);
    $.ajax({
      url: "{{ url('product-detail/getsize') }}",
      type: "POST",
      data: form.serialize(),
      success: function(data){
        //alert("Form submission success!");
      },
      error: function(){
        alert("Form submission failed!");
      }
    });
  }
});

});

相关问题