jquery - 删除 http ://localhost:8000/product/[object%20Object] 500 (Internal Server Error)

Question

我正在为这样的删除方法设置ajax，但链接中出现了一些错误，例如 500 内部服务器错误，我已经完成了所有教程，但有点沮丧，所以请更正我的代码

这是 laravel 5.8 和 jquery 3.3

<section class="section">
  <div class="section-header">
    <h1>Our Products</h1>
    <div class="section-header-button">
      <button id="createProduct" class="btn btn-primary">Add New</button>
    </div>
  </div>
  <div class="section-body">
    <div class="row mt-4">
      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <h4>All Items</h4>
          </div>
          <div class="card-body">
            <div class="clearfix mb-3"></div>
            <div class="table-responsive">
              <table id="itemList" class="table table-striped">
                <thead>
                  <tr>
                    <th>Product Code</th>
                    <th>Product Name</th>
                    <th>Categories</th>
                    <th>Price</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody id="dataTable">
                  @include('product.table')
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<!-- Modal  -->
<div class="modal fade" id="tambahProductModalLong" tabindex="-1" role="dialog" aria-labelledby="tambahProductModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="tambahProductModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form id="addProductForm">
        @csrf
        <input type="hidden" name="id" id="id">
        <input type="hidden" name="product_code" id="productCode">
        <div class="modal-body">
          <div class="form-group">
            <div class="section-title">Product Name</div>
            <input required id="name" type="text" name="name" class="form-control">
          </div>
          <div class="form-group">
            <div class="section-title">Categories</div>
            <select name="categories" class="form-control select2">
              @foreach($categories as $c)
              <option value="{{$c->id}}">{{$c->name}}</option>
              @endforeach
            </select>
          </div>
          <div class="form-group">
            <div class="section-title">Price</div>
            <div class="input-group">
              <div class="input-group-prepend">
                <div class="input-group-text">
                  IDR
                </div>
              </div>
              <input required id="price" type="number" name="price" class="form-control currency">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="submit" id="saveButton" class="btn btn-primary"></button>
        </div>
      </form>
    </div>
  </div>
</div>

@foreach($products as $p)
<tr>
    <td>{{$p->code}}</td>
    <td>{{$p->name}}</td>
    <td>{{$cat = App\Category::where('id', $p->categories_id)->first()->name}}</td>
    <td>IDR {{number_format($p->price)}}</td>
    <td>
        <a id="editProduct" data-id="{{$p->id}}" href="#" class="btn btn-icon edit btn-sm btn-primary">
            <i class="far fa-edit"></i>
        </a>
        <a id="deleteProduct" data-id="{{$p->id}}" href="#" class="btn btn-icon delete btn-sm btn-danger">
            <i class="far fa-trash-alt"></i>
        </a>
    </td>
</tr>
@endforeach

这是我的ajax方法

    function load() {
      $.ajax({
        url: "{{route('product.load')}}",
        success: function(response) {
          $('#dataTable').html(response);
        }
      });
    }

    $.ajaxSetup({
      headers: {
        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
      }
    });

     //delete
    $('.delete').click(function(e) {
      e.preventDefault();
      // console.log(1);
      var id = $(this).data(id);
      // console.log(id);
      confirm("Are you sure want to delete?");

      $.ajax({
        type: "DELETE",
        data: {
          "id": id,
          "_token": "{{csrf_token()}}"
        },
        url: "/product/" + id,
        success: function(data) {
          if (data.status == "sukses") {
            alert("data berhasil dihapus");
            load();
          } else {
            alert("data gagal dihapus");
          }
        }
      });
    });

路线

Route::delete('/{id}', ['as' => 'destroy', 'uses' => 'ProductContntroller@destroy']);

    public function destroy($id)
    {
        Product::destroy($id);
        $response['status'] = "sukses";

        return Response::json($response);
    }

我在控制台中遇到这样的错误

localhost::8000/product/[Object%20object] 

Answer 1

id的值这是undefined .

var id = $(this).data(id);

解决方案:您希望使用以下内容:

var id = $(this).data("id");

在你的原始代码中，从id开始(如变量中所示)是 undefined ，你会得到类似的东西:

var id = $(this).data(undefined);

而你没有像 data- 这样的东西在你的元素上。自 $(element).data(dataVar)返回一个对象，你得到你的 DELETE请求序列化为[object Object] .