使用 Ajax 将数据发布到数据库时刷新从控制器发送的列表答案

【问题标题】：Refreshing a List Sent From a Controller When Posting Data to DB Using Ajax使用 Ajax 将数据发布到数据库时刷新从控制器发送的列表
【发布时间】：2023-04-02 10:01:02
【问题描述】：

我正在尝试添加用户无需使用 Ajax 刷新页面即可将商品添加到购物车的功能。我成功将数据发布到数据库，但我无法自动刷新列表（在数据发布后）。

Ajax

jQuery(document).ready(function(){
  jQuery("#addtocartt{{$one->id}}").on('click',function(e){
     e.preventDefault();
     $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
        }
    });
     jQuery.ajax({
        url: "/addtocart",
        method: 'post',
        data: {
           data: jQuery("#name{{$one->id}}").val(),
           image: jQuery("#image{{$one->id}}").val(),
           price: jQuery("#price{{$one->id}}").val(),
           quantity: jQuery("#quantity{{$one->id}}").val(),
        },
        success: function(result){
          var xs = result.qte;
          swal(xs+"Kgs of {{$one->name}}", "Is Added to Cart !!", "success");
        }});
     });
  });

这是我想要刷新的列表。

@foreach($list as $one)
    <text style="font-family: Poppins-ExtraLight;"> {{$one->cart_item}} : {{$one->quantity}} x {{$one->cart_price}} dh = {{$one->quantity*$one->cart_price}}</text> <br>
@endforeach

控制器

function Add(Request $request){
    $item = new cart;
    $item->user_id = Auth::user()->id;
    $item->cart_number = '0';
    $item->cart_item = $request->data;
    $item->quantity = $request->quantity;
    $item->cart_price = $request->price;
    $item->image = $request->image;
    $item->save();
    $list= cart::all()->where('user_id',Auth::user()->id)->where('state','=','delivering');

    return response()->json(['qte' => $item->quantity]);
}

【问题讨论】：

您将不得不使用 jquery 来更新列表。您当前使用的 php 变量在您的 ajax 请求后不会更改。
@CUGreen 你能告诉我我该怎么做吗？
如果您只是更新数量，那么您可以使用 jQuery 更改数量的值。如果是 {{$one->cart_item}} : {{$one->quantity}} x {{$one->cart_price}} dh = {{$one->quantity*$one->cart_price}} 这个东西，我会将值包装在跨度和类中，以便您可以更轻松地访问它们。像这样<span class="qty">{{$one->quantity}}</span> x <span .... 然后在你的回调中找到被改变的行，取出数字，做数学，把结果放回去。
哦，我明白了，谢谢

标签： php ajax laravel laravel-blade laravel-controller

【解决方案1】：

我尚未对此进行测试，但假设 $list 变量返回购物车，您可以执行以下操作：

你的刀片模板

<div id="some-list-container">
@foreach($list as $one)
    <text style="font-family: Poppins-ExtraLight;"> {{$one->cart_item}} : {{$one->quantity}} x {{$one->cart_price}} dh = {{$one->quantity*$one->cart_price}}</text> <br>
@endforeach
</div>

你的控制器

return response()->json(['list' => $list, 'item' => $item]);

你的 Javascript

...
success: function(result) {
  var item = result.item;
  var list = result.list;
  swal(item.quantity + "Kgs of " + item.name, "Is Added to Cart !!", "success");
  // clear the list
  jQuery("#some-list-container").empty()
  // loop through the response list
  for(var i=0; i < list.length; i++) {
    // add to the list
    var add_item = list[i];
    jQuery("#some-list-container").append('<text style="font-family: Poppins-ExtraLight;"> ' 
        + add_item.cart_item + ' : ' 
        + add_item.quantity + ' x ' 
        + add_item.cart_price + ' dh = ' 
        + (add_item.quantity * add_item.cart_price) 
        + '</text> <br>')
  }
}
...

希望这能让你走上正确的道路

【讨论】：