javascript - 删除 Laravel 表单之外的请求

Question

我是 Laravel 新手，我正在使用这个 Jeffrey Way script提交DELETE无需表格的请求。

我的链接:

<a class="btn btn-danger btn-sm delete" href="files/<?=$file->id?>" data-method="delete">
    <i class="fa fa-check"></i> Yes I&#39;m sure
</a>

目前位于 View 文件中的脚本如下:

   $(document).on("click", ".delete", function() {

      var laravel = {
        initialize: function() {
          this.methodLinks = $('a[data-method]');

          this.registerEvents();
        },

        registerEvents: function() {
          this.methodLinks.on('click', this.handleMethod);
        },

        handleMethod: function(e) {
          var link = $(this);
          var httpMethod = link.data('method').toUpperCase();
          var form;

          // If the data-method attribute is not PUT or DELETE,
          // then we don't know what to do. Just ignore.
          if ( $.inArray(httpMethod, ['PUT', 'DELETE']) === - 1 ) {
            return;
          }

          // Allow user to optionally provide data-confirm="Are you sure?"
          if ( link.data('confirm') ) {
            if ( ! laravel.verifyConfirm(link) ) {
              return false;
            }
          }

          form = laravel.createForm(link);
          form.submit();

          e.preventDefault();
        },

        verifyConfirm: function(link) {
          return confirm(link.data('confirm'));
        },

        createForm: function(link) {
          var form = 
          $('<form>', {
            'method': 'POST',
            'action': link.attr('href')
          });

          var token = 
          $('<input>', {
            'type': 'hidden',
            'name': 'csrf_token',
              'value': '<?=csrf_token();?>' // hmmmm...
            });

          var hiddenInput =
          $('<input>', {
            'name': '_method',
            'type': 'hidden',
            'value': link.data('method')
          });

          return form.append(token, hiddenInput)
                     .appendTo('body');
        }
      };

      laravel.initialize();

    });

这是从要点中提取的确切脚本，我所做的唯一更改是添加了触发器 $(document).on("click", ".delete", function() 。

我遇到的问题是，当我单击要删除的链接时，我会被发送到另一个页面(例如/files/6或任何文件ID)。它正在治疗<a>像常规链接一样标记，而不是 DELETE请求，正如我希望发生的那样。有谁知道为什么会发生这种情况？

Answer 1

anchor 的默认操作是导航，您需要在点击处理程序中阻止它。

 $(document).on("click", ".delete", function(e) {
    e.preventDefault();
    ...