如何在单击onclick =“ confirm（''）”消息的OK按钮之前阻止ajax请求？

Question

$(document).ready(function(){
            $(document).on('click', '.dlt', function () {
                var id = $(this).attr('data-id');
                var token= '{{ csrf_token() }}';
                $.ajax({
                   method: 'post',
                   url: '{{route('product.delete')}}',
                   data: {id:id, _token:token},
                   success: function (response) {
                       location.reload();
                   }
                });

            });

        });

<tbody>
@if($products->count()>0)
    @foreach($products as $product)
      <tr>
          <td class="p_name">{{$product->name}}</td>
          <td class="p_details">{{$product->details}}</td>
          <td class="p_price">{{$product->price}}</td>
          <td><a class="add" data-id="{{$product->id}}" title="Add" data-toggle="tooltip" style="display: none"><i class="fa fa-book"></i></a>
              <a class="edit" title="Edit" data-toggle="tooltip"><i class="fa fa-edit"></i></a>
              <a class="dlt" onclick="confirm('Are you sure to delete it?')" title="Delete" data-toggle="tooltip" data-id="{{$product->id}}"><i class="fa fa-trash"></i></a>
          </td>
      </tr>
    @endforeach
@else
    <tr>
        <td colspan="4" class="text-center bg-danger">No Product Data Found</td>
    </tr>
@endif
</tbody>

虽然我单击Confirm（）消息的“取消”按钮，但是onclick ajax请求已经完成。

Answer 1

在函数内部，您必须使用此脚本-

var result = confirm("Want to delete?");
if (result) {
    //Logic to Ajax
}

在您的代码中

    $(document).ready(function() {
        $(document).on('click', '.dlt', function() {
            var result = confirm("Want to delete?");
            if (result) {
                //logic to AJAX
                var id = $(this).attr('data-id');
                var token = '{{ csrf_token() }}';
                $.ajax({
                    method: 'post',
                    url: '{{route('
                    product.delete ')}}',
                    data: {
                        id: id,
                        _token: token
                    },
                    success: function(response) {
                        location.reload();
                    }
                });
            }
        });
    });