javascript - 在 Rails 中使用 AJAX 发出 DELETE 请求时，如何从表单获取不同的 id 值？

Question

我知道我可以为此使用“remote: true”，但我真的想了解 AJAX 的内部工作原理及其工作原理。这就是这里的问题，我尝试使用表单输入向服务器发送 DELETE 请求，但每次提交操作时，我都会收到一条 404 消息，表示没有与我正在尝试执行的操作相匹配的路由，我知道问题是我没有从表单元素中获取正确的 id 值，这就是抛出错误的原因。如果有人能帮我解决这个问题，那就太好了。这是我的带有表单标签的 HTML 代码:

<div class="pending-study-partners">

   <div id="257">
      <img alt="Default" class="avatar-image" src="/assets/default.png" style="width:70px;">

      <span class="friend-name"><a href="/users/4">Jamil Boykins</a></span>
      - <em>Friendship is pending</em> 

      <form accept-charset="UTF-8" action="/user_friendships/257" class="edit_user_friendship"     id="edit_user_friendship_257" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="_method" type="hidden" value="delete"><input name="authenticity_token" type="hidden" value="lKp0BTPohxbRepgQmXhtwWXfxIMC8JvqpR1VnLSdz5s="></div>
        <input class="button radius tiny" name="commit" type="submit" value="Delete request">
</form> </div>  
    <div id="259">
      <img alt="Default" class="avatar-image" src="/assets/default.png" style="width:70px;">

    <span class="friend-name"><a href="/users/2">jamil shamill</a></span>
    - <em>Friendship is pending</em> 

    <form accept-charset="UTF-8" action="/user_friendships/259" class="edit_user_friendship" id="edit_user_friendship_259" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="_method" type="hidden" value="delete"><input name="authenticity_token" type="hidden" value="lKp0BTPohxbRepgQmXhtwWXfxIMC8JvqpR1VnLSdz5s="></div>
        <input class="button radius tiny" name="commit" type="submit" value="Delete request">
</form> </div>  

现在，使用我的 AJAX 代码，我可以删除此人，并且只有在刷新页面后，他们才会从页面上消失，但是当我单击按钮提交表单时，我收到 404 错误。这是我的 AJAX 代码:

  $(".edit_user_friendship").on("submit", function(event){
    event.preventDefault();
    var _this = $(this);
    var friend = _this.attr('id').split("_");

    $.ajax({
      url: "/user_friendships/"+friend[friend.length-1],
      method: "DELETE",
      dataType: "script",
      success: function(event, data){
        console.log(data);
        $tingzSon = $($(event.target).parent()[0]);
        $tingzSon.remove();
      }
    })
  })

如果有人能找出我哪里出错了，那就太棒了。

非常感谢!

Answer 1

我收到一条 404 消息，表示没有匹配的路由，请检查您的日志请求的去向。显然，网址有问题:“/user_friendships/”+friend[friend.length-1]。如果您添加请求日志和 Controller 代码将会很有帮助。