删除 http://localhost:8000/product/[object%20Object] 500（内部服务器错误）

Posted 2023-03-14

【中文标题】删除 http://localhost:8000/product/[object%20Object] 500（内部服务器错误）

【英文标题】：DELETE http://localhost:8000/product/[object%20Object] 500 (Internal Server Error)

【发布时间】：2019-12-22 14:46:15

【问题描述】：

我正在为这样的删除方法设置 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

这是我的ajaax方法

    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] 

【问题讨论】：

尝试将$(this).data(id);更改为$(this).data("id");

【参考方案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]。