Ajax 调用路由 laravel 未找到答案

【问题标题】：Ajax call route laravel not foundAjax 调用路由 laravel 未找到
【发布时间】：2019-07-10 22:26:17
【问题描述】：

我想用 Modal 进行删除确认 laravel，我在ajax中调用路由laravel，但是为什么找不到路由。

这是我在 laravel 中的路线

Route::delete('delete-product/{productId}', 'StoreController@hapus')->name('product.delete');

这是我的 ajax 删除..

$(document).on('click', '.delete-modal', function() {
        $('.modal-title').text('Delete');
        $('#id_delete').val($(this).data('productId'));
        $('#deleteModal').modal('show');
        productId = $('#id_delete').val();
    });
    $('.modal-footer').on('click', '.hapus', function() {
        $.ajax({
            type: 'DELETE',
            url: 'delete-product/' + productId,
            data: {
                '_token': $('input[name=_token]').val(),
            },

当我点击图标垃圾时，会显示模态，但是当我点击删除按钮然后在浏览器中检查元素时，我的路径未找到

这是检查元素

Request URL: http://localhost:8000/delete-product/
    Request Method: DELETE
    Status Code: 404 Not Found
    Remote Address: 127.0.0.1:8000
    Referrer Policy: no-referrer-when-downgrade

为什么 URL 只是 delete/product .... 不包括 ID ,, 即使我在 ajax 中的 url 是这样调用的

......
  url: 'delete-product/' + productId,
.....

这是我的刀片代码

    @if(sizeof($resp->content) > 0)
    <ul class="the-product">
        @foreach($resp->content as $item)
            <li>
                @if(isset($store) && $store->storeId == $item->store->storeId)
                <a href="#" class="like"><i class="icofont-ui-love"></i></a>
                @else
                <a class="btn btn-danger delete-modal"><i class="fa fa-trash" data-id="{{$item->productId}}"></i></a>
                <a class="btn btn-danger" onclick="return myFunction();" href="{{url('edit.product', $item->productId)}}"><i class="icofont-ui-edit"></i></a>
                {{-- <a href="edit-product/{{$item->productId}}" class="icon-product"><i class="icofont-ui-edit"></i></a> --}}
                {{-- <a href="{{route('product.delete',$item->productId)}}" class="icon-product"><i class="icofont-ui-delete"></i></a> --}}
                @endif
                {{-- onclick="ajaxContent(event, this);" --}}
                <a href="productDetail/{{ $item->productId }}" class="the-item @if($item->discount > 0)on-promo @endif">

                    @if($item->discount > 0)
                        <div class="prod-rib">{{ $item->discount }}% Off</div>
                    @endif
                    <img data-src="@if($item->imageId != null){{ config('constant.showImage').$item->imageId }}@else{{ asset('images/no-image-available.png') }}@endif"
                        src="@if($item->imageId != null){{ config('constant.showImage').$item->imageId }}@else{{ asset('images/no-image-available.png') }}@endif"
                        alt="{{ $item->productNm }}">
                    <div class="prod-name">{{ $item->productNm }}</div>
                    <div class="prod-rev">
                        @for($i=0; $i<5;$i++)
                            @if($i<$item->reviewRate)
                            <img src="{{asset('img/kopi-on.svg')}}" />
                            @else
                            <img src="{{asset('img/kopi.svg')}}" />
                            @endif
                        @endfor
                        <span>{{ $item->reviewCount }} ulasan</span>
                    </div>
                    <div class="prod-price">
                            @if($item->discount > 0)
                            <span>Rp. {{ number_format($item->price,0,',','.') }}</span> Rp. <i>{{ APIHelper::discountPrice($item->discount, $item->price) }}</i>
                            @else
                            Rp. <i>{{ APIHelper::discountPrice($item->discount, $item->price) }}</i>
                            @endif
                    </div>
                </a>
                <a href="#" class="add-cart" onclick="addToCart({{ json_encode($item) }})">Add to cart <i class="icofont-cart"></i></a>
                {{-- //onclick="ajaxContent(event, this);" --}}
                <a href="{{url('/store-detail/'.$item->store->storeId)}}"  class="the-store">
                    <img src="@if($item->store->storePic != null){{ config('constant.showImage').$item->store->storePic }}@else{{ asset('images/no-image-available.png') }}@endif" />
                    {{ $item->store->storeNm }}
                    <span>{{ $item->store->percentFeedback }}% ({{ $item->store->totalFeedback }}
                            feedback)</span>
                </a>
            </li>
        @endforeach
    </ul>
    <ul class="pagination">
        <li class="disabled">
            <span><i class="icofont-rounded-double-left"></i></span>
        </li><li class="disabled">
            <span><i class="icofont-rounded-left"></i></span>
        </li>
        {{-- active --}}
        @for ($i = 0; $i < $resp->totalPages && $i < 5; $i++)

        <li class="" onclick="ajaxContent(event, this,null,{'key':'page','value':{{$i+1}} })">
            <span>{{$i + 1}}</span>
        </li>
        @endfor
        <li>
            <a href="#"><i class="icofont-rounded-right"></i></a>
        </li>
        <li>
            <a href="#"><i class="icofont-rounded-double-right"></i></a>
        </li>
    </ul>
@else
    <div class="container clearfix">
        <div class="style-msg errormsg mt-5">
            <div class="sb-msg"><i class="icon-remove"></i><strong>Maaf</strong>, pencarian anda tidak cocok dengan
                produk apapun. Silahkan coba lagi
            </div>
        </div>
    </div>
@endif

    <!-- Modal form to delete a form -->
    <div id="deleteModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <h3 class="text-center">Are you sure you want to delete the following post?</h3>
                    <br />
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="id">ID:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="id_delete" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="title">Title:</label>
                            <div class="col-sm-10">
                                <input type="name" class="form-control" id="title_delete" disabled>
                            </div>
                        </div>
                    </form>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger hapus" data-dismiss="modal">
                            <span id="" class='glyphicon glyphicon-trash'></span> Delete
                        </button>
                        <button type="button" class="btn btn-warning" data-dismiss="modal">
                            <span class='glyphicon glyphicon-remove'></span> Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).on('click', '.delete-modal', function() {
            $('.modal-title').text('Delete');
            $('#id_delete').val($(this).data('productId'));
            $('#deleteModal').modal('show');
            productId = $('#id_delete').val();
        });
        $('.modal-footer').on('click', '.hapus', function() {
            $.ajax({
                type: 'DELETE',
                url: 'delete-product/{productId}',
                data: {
                    '_token': $('input[name=_token]').val(),
                },
                success: function(data) {
                    toastr.success('Successfully deleted Post!', 'Success Alert', {timeOut: 5000});
                    $('.item' + data['id']).remove();
                    $('.col1').each(function (index) {
                        $(this).html(index+1);
                    });
                }
            });
        });
</script>

如何在 ajax 中编写 URL？请帮助..

【问题讨论】：

你能分享你的刀片代码吗？
上面已经添加了
您是否将productId 登录到正在进行ajax 调用的函数内的控制台？它在那里显示吗？
请尝试手动运行您的 ajax 请求，例如。 delete-product/3 以查看它是否正常工作。如果删除 id 为 3 的产品，则意味着您传递给 ajax 请求的 productId 有问题。如果不是，那么其他东西是错误的。例如像路线

标签： laravel

【解决方案1】：

在您的情况下，在以下代码中：

$(document).on('click', '.delete-modal', function() {
    $('.modal-title').text('Delete');
    $('#id_delete').val($(this).data('productId'));
    $('#deleteModal').modal('show');
    productId = $('#id_delete').val();
});

ProductId 是一个具有作用域函数作用域的局部变量。除非您在顶部全局声明它，否则您不能将其引用到外部。

当您稍后尝试直接引用它时，它将没有任何值（未定义）。

其次，你需要改变

url: 'delete-product/{productId}'

与

url: '/delete-product/' + productId,

下面是代码：

jQuery(document).ready(function($){

    $(document).on('click', '.delete-modal', function() {
        $('.modal-title').text('Delete');
        $('#id_delete').val($(this).data('productId'));
        $('#deleteModal').modal('show');
    });

    $('.modal-footer').on('click', '.hapus', function() {

        var productId = $('#id_delete').val();
        $.ajax({
            type: 'DELETE',
            url: '/delete-product/' + productId,
            data: {
                '_token': $('input[name=_token]').val(),
            },
            success: function(data) {
                toastr.success('Successfully deleted Post!', 'Success Alert', {timeOut: 5000});
                $('.item' + data['id']).remove();
                $('.col1').each(function (index) {
                    $(this).html(index+1);
                });
            }
        });
    });
});

【讨论】：