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>

该脚本现在位于视图文件中，如下所示：

   $(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();

    });

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

我遇到的问题是，当我点击要删除的链接时，我会被发送到另一个页面（例如/files/6或文件ID）。正如我想要的那样，它将<a>标记视为常规链接而不是DELETE请求。有谁知道为什么会这样？

Answer 1

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

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

Answer 2

我找到了解决方案 - 我有两个问题。

首先 - 您可能需要在href中添加一个额外的斜杠，对我来说，我必须更改

href="files/<?=$file->id?>"至href="/files/<?=$file->id?>"

其次，我遇到了问题，因为我的链接位于Bootstrap popover内（data-content内），这使问题更加复杂。我将脚本恢复为Jeffrey Way提供的原始脚本（使用$(function() {代替$(document).on("click", ".delete", function() {）。然后我在popover之外创建了一个隐藏的链接元素：

<a href="/files/<?=$file->id?>" class="delete-file hidden" data-method="delete"></a>

然后我使用jQuery触发了对该链接的点击（两个元素都在父<div class="panel-body">下：

$(document).on("click", ".delete", function(){ 
    $(this).closest(".panel-body").find(".delete-file").trigger("click");
});

在表单Laravel之外删除请求

2 个答案: