Question

我想用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仅删除/产品 ....不包含ID ，,, 即使我在Ajax中的网址像这样

......
  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？请帮助。

Answer 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);
                });
            }
        });
    });
});

找不到Ajax呼叫路线Laravel

1 个答案: