javascript - 如何从返回的响应中获取特定值

Question

我正在尝试使用 laravel 创建购物车。我有一个小问题来更新购物车商品价格 onchange 数量输入。 Ajax 发送值并返回数组。但是这次问题开始了。

这是我的购物车 Blade :

  @extends('user.addons.app')
  @push('customCss')
  <link rel="stylesheet" href=" 
     {{asset('/user/assets/css/numberinput.css')}}">
   @endpush
  @section('content')

  @include('user.modules.header')
  @include('user.modules.lsidebar')
 <div id="cart-page-wrapper" class="pt-86 pt-md-56 pt-sm-46 pb-50 pb-md-20 
  pb-sm-10">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <div class="shopping-cart-list-area">

                     @include('user.modules.cart_data')
                    <div class="cart-coupon-update-area d-sm-flex justify- 
      content-between align-items-center">
                        <div class="coupon-form-wrap">
                            <form action="#" method="post">
                                <input type="text" placeholder="Coupon 
           Code"/>
                                <button class="btn-apply">Apply 
            Button</button>
                            </form>
                        </div>

                        <div class="cart-update-buttons mt-xs-14">
                            <button class="btn-clear-cart">Clear 
        Cart</button>
                            <button class="btn-update-cart">Update 
       Cart</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <!-- Cart Calculate Area -->
                @include('user.modules.cartcalculate')
            </div>
        </div>
    </div>
   </div>
  @include('user.modules.footer')
  @endsection
  @push('customJs')

  @endpush

这是我的cart_data Blade :

  <div class="shopping-cart-table table-responsive">
  <table class="table table-bordered text-center"  >
  <thead>
  <tr>
    <th>Products</th>
    <th>Price</th>
    <th>Quantity</th>
    <th>Total</th>
 </tr>
 </thead>

 <tbody>
 @foreach($carts as $cart)
    <tr>
        <td class="product-list">
            <div class="cart-product-item d-flex align-items-center">
                <div class="remove-icon">
                    <button><i class="fa fa-trash-o"></i></button>
                </div>
                <a href="single-product-sticky.html" class="product- 
     thumb">
                    <img src="{{asset($cart['image'])}}" alt="Product"/>
                </a>
                <a href="single-product-tab-left.html" class="product- 
  name">{{$cart['title']}}</a>
            </div>
        </td>
        <td>
            <span class="price">$ {{$cart['price']}}</span>
        </td>
        <td>
            <input type="hidden" value="{{$cart['id']}}" 
   id="mon{{$cart['id']}}">
            <div class="quantity">
                <input type="number" min="1" max="9" step="1" value=" 
      {{$cart['quantity']}}" id="qty{{$cart['id']}}">

            </div>

        </td>
        <td>

            <span class="price" id="toss{{$cart['id']}}">
           {{$cart['price'] * $cart['quantity']}}
            </span>

        </td>
    </tr>
    @endforeach

    </tbody>
  </table>
 </div>

   <script src="{{asset('/assets/plugins/jquery/jquery.min.js')}}"> 
   </script>
   <script src="{{asset('/user/assets/js/numberinput.js')}}"></script>
  <script>
    @foreach($carts as $cart)
    $("#qty{{$cart['id']}}").change(function(e){
    e.preventDefault();
    var  value = $("#qty{{$cart['id']}}").val();
    var id = $("#mon{{$cart['id']}}").val();
    var inputQuantityElement = $("#x{{$cart['id']}}");
    $.ajax({
        type: 'post',
        url: '/cartupdate',
        data: {_token: '{{ csrf_token() }}',value:value, id:id},
        success : function(response) {
            $(inputQuantityElement).val(response);
        }

          });
     });
    @endforeach
    </script>

这是我在 Controller 中的功能:

public function cartupdate(Request $request)
{
    $cartss = Cart::find($request['id']);
    $quantity = $cartss->quantity;

    if($quantity < $request['value'])
    {
        $update = $cartss->quantity+1;
    }
    else if($quantity > $request['value'])
    {
        $update = $cartss->quantity-1;
    }
    else
    {
        die;
    }

    $cartss->update(['quantity' => $update]);
    $carts = Cart::where('user_id', Auth::user()->id)->get();

    foreach ($carts as $cart)
    {
        $id[] = $cart['id'];
        $pric[] = $cart['price'] * $cart['quantity'];
    }

    return $pric;
}

我想在用户点击数量输入时动态改变价格

Answer 1

在您的 cartupdate() 函数中，return $pric 不会给您结果，因为 $pric 是在 中声明的foreach()。将其更改为:

$pric = 0;
foreach ($carts as $cart) {
   $pric += $cart['price'] * $cart['quantity'];
}
return $pric;

会给你总数。但是，我猜您正在尝试为特定购物车获取新价格。如果是这样，请将您的 cartupdate() 函数更改为:

public function cardupdate(Request $request) {
   $cart = Cart::find($request['id']);
   $quantity = $cart->quantity;
   if($quantity < $request['value'])
   {
      $quantity++;
   }
   else if($quantity > $request['value']){
      $quantity--;
   }

   $cart->update(['quantity' => $quantity]);

   return $quantity*$cart->price;
}

要更新 View 中的价格，您可以使用

document.getElementById("toss{{$cart['id']}}").innerHTML = response;

就个人而言，我建议您尝试使用 Vue.js 来构建您的应用程序。 Laravel + Vue.js 是一个很好的组合。像这样构建复杂的应用程序要容易得多。

抱歉我的英语不好:)