Question

我正在将PUT / DELETE链接放在一起，la Rails，点击时创建一个POST表单，其中隐藏的输入标记为_method，用于发送预期的请求类型。我想把它变成DRYer，但我的jQuery知识并不适合它。

HTML：

<a href="/articles/1" class="delete">Destroy Article 1</a>
<a href="/articles/1/publish" class="put">Publish Article 1</a>

jQuery的：

$(document).ready(function() {

  $('.delete').click(function() {
    if(confirm('Are you sure?')) {
      var f = document.createElement('form');
      $(this).after($(f).attr({
        method: 'post',
        action: $(this).attr('href')
      }).append('<input type="hidden" name="_method" value="DELETE" />'));
      $(f).submit();
    }
    return false;
  });

  $('.put').click(function() {
    var f = document.createElement('form');
    $(this).after($(f).attr({
      method: 'post',
      action: $(this).attr('href')
    }).append('<input type="hidden" name="_method" value="PUT" />'));
    $(f).submit();
    return false;
  });

});

Answer 1

好的，所以我终于测试了这个。它做了它在盒子上声称的东西。

$(document).ready(function() {

  $.fn.getClassInList = function(list){
       for(var i = 0; i < list.length; i++)
       {
          if($(this).hasClass(list[i]))
             return list[i];
       }
       return "";
  }

  $('.delete,.put').click(function() {
    if(confirm('Are you sure?')) {
      var f = document.createElement('form');
      $(this).after($(f).attr({
        method: 'post',
        action: $(this).attr('href')
      }).append('<input type="hidden" name="_method" value="' 
            + $(this).getClassInList(['put', 'delete']).toUpperCase() 
            + '" />'));
      $(f).submit();
    }
    return false;
  });

});

Answer 2

如果你想使用ajax，你可以使用表单而不是链接让jQuery form plugin处理提交：

<form class="delete" method="post" action="/articles/1">
    <input type="hidden" name="_method" value="delete"/>
    <button type="submit">Delete</button>
</form>

jQuery的：

$(document).ready(function() {
    $('form.delete').ajaxForm(options);
});

options变量可以包含提交前和提交后的回调。

如果您需要的话，请将链接设置为链接样式。

Answer 3

我刚刚测试了以下内容，它对我有用：

$(function() {
  $('.post, .POST').click(function() {
    $('<form method="POST" style="display:none"><input type="hidden" name="_method" value="POST" /></form>')
      .insertAfter($(this))
      .attr({
        action: $(this).attr('href')
      }).submit();
    return false;
  });
  $('.put, .PUT').click(function() {
    $('<form method="POST" style="display:none"><input type="hidden" name="_method" value="PUT" /></form>')
      .insertAfter($(this))
      .attr({
        action: $(this).attr('href')
      }).submit();
    return false;
  });
  $('.delete, .DELETE').click(function() {
    if(confirm('Are you sure?')) {
      $('<form method="POST" style="display:none"><input type="hidden" name="_method" value="DELETE" /></form>')
        .insertAfter($(this))
        .attr({
          action: $(this).attr('href')
        }).submit();
    }
    return false;
  });
});

你有什么问题？

Answer 4

忘记隐藏的字段，只需更改要放置或删除的方法即可。我会选择表单而不是创建它然后只需更改属性

$（“form”）。attr（“method”，“put”）。submit（）

用于RESTful PUT / DELETE链接的DRY jQuery

4 个答案: