如何在使用 jquery 进行 axios 响应后更新价格？

Question

我正在编写库存管理系统，我在其中向用户询问 select 产品，并使用 axios 获取产品的相应价格

它是一个多行，用户点击添加产品到select产品并显示相应的价格

jquery 创建了一个新的产品行，它还允许用户 select 一个产品，它使用 axios 从服务器请求价格。

当从服务器请求 returns 价格时，它会更新价格输入字段。

但是它用 0 而不是 axios 的响应更新价格

$("#add-product").click(function(e) {
  e.preventDefault();
  $("#new-field").clone().appendTo("#wrapper");
});
$("#payment-method").change(function() {
  $(".full-payment").css({
    "display": "block"
  });
})

$("#wrapper").on('change', '.product', function(e) {
  e.preventDefault();
  $(this).closest('.row-field').find('.price').html("loading...")

  let price = 0;
  axios.get("/api/get-price/" + $(this).val())
    .then(function(response) {
      console.log(response.data.price)
      $(this).closest('.row-field').find('.price').html(price);
      $(this).closest('.row-field').find('.price').val(price);

    });

})

$("#wrapper").on('keyup', '.quantity', function() {
  var total = 0;
  let price = $(this).closest(".row-field").find(".price").val();
  console.log("price", price)
  if (isNaN(price)) {
    alert("Allow the rpice to load")
  } else {

    total = parseInt($(this).closest(".row-field").find(".price").val()) * parseInt($(this).val());
    if (isNaN(total)) {
      $(this).closest(".row-field").find(".sub-total").html(0.00);
      return;
    }
    $(this).closest(".row-field").find(".sub-total").html(total);
    console.log("total", total);

    var total = 0,
      val;
    $(".sub-total").each(function() {
      vals = parseInt($(this).text());
      console.log("value ", vals)
      val = isNaN(vals) || $.trim(vals) === "" ? 0 : parseFloat(vals);
      total += val;
    })
    $(".total").html(total);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6 offset-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item active">Add New Sales</li>
          </ol>
        </div>
      </div>
    </div>
    <!-- /.container-fluid -->
  </section>

  <!-- Main content -->
  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <!-- left column -->
        <div class="col-md-12">
          <!-- general form elements -->
          <div class="card card-primary">
            <div class="card-header">
              <h3 class="card-title">Add New Sales</h3>
            </div>
            <!-- /.card-header -->

            <!-- form start -->
            <form role="form" action="{{ url('admin/sales/store-sales') }}" method="post">
              @csrf
              <div class="card-body">
                <div class="row">

                  <div class="col-md-12">
                    <div class="form-group">
                      <label>Payment Method</label>
                      <select name="payment_method" id="payment-method" class="form-control">
                        <option value="">Select Payment Method</option>
                        <option value="cash">Cash</option>
                        <option value="bank_transfer">Bank Transfer</option>
                      </select>
                      <!-- @if ($errors->first())
    <span style="font-size: 12px; color: red">{{ $errors->first('payment_method') }}</span>
    @endif -->
                    </div>
                  </div>
                  <div class="col-md-12 right my-3">
                    <a href="#" class="btn btn-danger" id="add-product">Add New Product</a>
                  </div>
                  <div id="wrapper" class="col-md-12">
                    <div id="new-field" class="col-md-12 row-field">
                      <div class="row">

                        <div class="col-md-3">
                          <div class="form-group">
                            <label>Product Name</label>
                            <select name="product[]" class="form-control product">
                              <option value="">Select Product Name</option>
                              @foreach ($products as $product)
                              <option value="{{ $product->id }}" name="product[]">
                                {{ $product->name }}</option>
                              @endforeach
                            </select>
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                            <label>Quantity</label>
                            <input type="text" name="quantity[]" class="form-control quantity" value="{{ old('quantity') }}" placeholder="Enter Quantity">
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                            <label>Unit Price</label>
                            <div class="price form-control">Price</div>
                            <input type="hidden" name="price[]" class="price" />
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                            <label>Sub Total</label>
                            <div class="form-control sub-total">0.00</div>
                          </div>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>

                <!-- /.card-body -->
                <div id="new-field" class="row">
                  <div class="col-md-9">
                    Total
                  </div>
                  <div class="col-md-3 total">
                    N
                    <span>0.00</span>

                  </div>
                </div>
              </div>

              <div class="card-footer">
                <button type="submit" class="btn btn-primary float-md-right">Add Sales</button>
              </div>
            </form>
          </div>
          <!-- /.card -->
        </div>
        <!--/.col (left) -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
  </section>
</div>

Answer 1

您有一个字段和一个具有相同 class 的 div。我会节省

const $priceDiv = $(this).closest('.row-field').find('div.price'); 
$priceDiv.html("loading")
const $priceInp = $(this).closest('.row-field').find('input.price'); 


.then(function(response) {
  console.log(response.data.price);
  $priceDiv.html(response.data.price);
  $priceInp.val(response.data.price);

另外记得多改地方：

$(this).closest(".row-field").find(".price").val();

如何在使用 jquery 进行 axios 响应后更新价格？

how do I update price after in axios response using jquery?

jquery

laravel

laravel-5

axios