rails link_to 删除没有 ujs，只使用 jQuery答案

【问题标题】：rails link_to delete without ujs, using only jQueryrails link_to 删除没有 ujs，只使用 jQuery
【发布时间】：2015-12-15 18:40:50
【问题描述】：

我正在尝试做 jquery_ujs 正在做的事情，但是没有 ujs。我有一个链接应用程序，只有一个，它发布到销毁操作。我想避免出于性能目的使用 ujs。当单击使用ajax提交的链接时，我尝试使用jQuery生成表单。问题是，该操作将浏览器重定向到注销。我能够很好地点击控制器，但浏览器端没有任何反应。我知道 button_to 也可以解决这个问题，但我不能使用按钮。为了清楚起见，我对表单数据进行了硬编码

$(document).ready(function() {
  var csrf_token = $('meta[name=csrf-token]').attr('content');
  var form = $("<form action='/app/logout' class='logout-form' method='post' accept-charset='UTF-8'></form>")
  var input1 = $("<input name=_method' type='hidden' value='delete'>")
  var input2 = $("<input name=authenticity_token' type='hidden'>").val(csrf_token)
  form.hide().append(input1)
  form.submit(logout)
  $("a[data-method]").click(function(event){
    event.preventDefault()
    form.submit()
  })

  function logout(event) {
    $.ajax({
      url: '/app/logout',
      type: 'POST',
      data: {_method:"delete", authenticity_token: csrf_token, action: "destroy", controller: "internal/logins" }
    })
    event.preventDefault()
  }
});

上面的代码构造了一个表单，在点击事件上提交

link_to("Logout", logout_path, :method => :delete)

【问题讨论】：

标签： javascript jquery ruby-on-rails ajax

【解决方案1】：

对重定向到另一个站点的销毁操作的 ajax 发布会导致 CORS 错误。解决方案是构造一个表单，与 button_to 一样，只使用 jquery 提交。

    var link = $("a[data-method]");
    function submitForm(){
       var csrfToken = $('meta[name=csrf-token]').attr('content');
       var csrfParam = $('meta[name=csrf-param]').attr('content');
       var form = $('<form method="post" action="' + link.attr('href') + '" type="hidden" class="logout-form"</form>');
       var metadataInput = '<input name="_method" value="' + link.data('method') + '" type="hidden" />';
       metadataInput += '<input name="' + csrfParam + '" value="' + csrfToken + '" type="hidden" />';
       form.append(metadataInput).appendTo('body');
       form.submit()
    }
      link.click(function(event) {
        event.preventDefault();
        submitForm()
      });

我意识到我最初将我的 link_to 功能远程选项设置为 true，但它不起作用。保持原样，添加一个点击监听器并在点击时提交表单，然后阻止默认

link_to("Logout", logout_path, :method => :delete, class: 'logout')

【讨论】：

【解决方案2】：

我无法评论，但第一个答案是正确的，但有一个错误：submitForm 中使用的link 只会是第一个匹配的链接。这是我的版本的样子：

$('a[data-method]').click(function() {
   var $link = $(this);
   var csrfToken = $('meta[name=csrf-token]').attr('content');
   var csrfParam = $('meta[name=csrf-param]').attr('content');
   var $form = $('<form method="post" action="' + $link.attr('href') + '" class="u-hiddenVisually"></form>');
   var metadataInput = '<input name="_method" value="' + $link.data('method') + '" type="hidden" />';
   metadataInput += '<input name="' + csrfParam + '" value="' + csrfToken + '" type="hidden" />';
   $form.append(metadataInput).appendTo('body');
   $form.submit();
   return false;
});

将class: 'u-hiddenVisually' 替换为您用来隐藏表单的任何内容。

【讨论】：