Question

我的Sinatra webapp有一个文章列表，可供用户删除。我添加了一个jQuery动画，使被删除的文章在Sinatra路由执行实际（DB）删除之前逐渐消失。代码是基本的：

# script.js
$(".lnk-delete").click(function()
  {
    var id = $(this).closest("article").attr("id");
    $("#"+id).fadeToggle(1000);
  });

# app.rb
get '/delete/articles/:id' do
    Articles.get(params[:id]).destroy
    redirect to('/')
end

问题是，代码重新路由到同一页面，由于删除的文章不再显示，现在这是不必要的。不仅重新路由会产生不必要的负载，它还会将用户带回到页面顶部（使体验变得混乱和恼人）。

我环顾四周，尝试返回HTTP代码，尝试停止（ing），尝试了request.xhr功能以及我在网上找到的任何其他内容，但都无济于事......

有没有办法让路由“不路由”，即执行db.destroy并让实际页面“未刷新”？

更新

以下代码，@ exobrain答案的略微修改版本，解决了我的问题。

# script.js
$(".lnk-delete").click(function(clicked) {
    clicked.preventDefault();
    var id = $(this).closest("article").attr("id"); $("#"+id).fadeToggle(1000); 
    $.get($(this).children("a").attr("href"));
});

我的原始代码改变了三件事：

在脚本中添加了preventDefault，以防止跟踪链接;
链接请求现在由jQuery使用get;
修改了Sinatra路线，因此不再重定向到'/'。

以下是代码：

# app.rb
get '/delete/articles/:id' do
    Articles.get(params[:id]).destroy
end

作为初学者的注释（就像我自己），这条get路线与最佳做法不一致。它应该是delete路线。我最终会解决这个问题。

谢谢，@ exobrain＆amp; @Amadan，答案。

P.S：

修正了get路线。所需要的只是改变

$.get($(this).children("a").attr("href"));

到

$.ajax({ url: $(this).children("a").attr("href"), type: "delete"});

然后get '/delete/articles/:id' do到delete '/delete/articles/:id' do。

Answer 1

如果您通过AJAX提交/delete/articles/...，实际页面将保持未刷新状态。（您尚未显示提交代码。）您只需从控制器返回""，而不是重定向空白正文。

如果你没有使用AJAX，那么淡出是多余的;你需要重定向。

Answer 2

使用get请求删除资源有点奇怪，但不过，你可以使用ajax来做到这一点。我假设.link-delete是a标记，并且href属性指向Sinatra端点。以下代码将阻止浏览器（preventDefault）跟踪链接，然后对链接指向的URL执行AJAX get请求。当请求完成并返回时，将在回调中执行淡出。

$(".lnk-delete").click(function(e) {
  e.preventDefault();
  $.get(this.href, function() {
    var id = $(this).closest("article").attr("id");
    $("#"+id).fadeToggle(1000);
  }
});

Answer 3

而不是重定向，请使用halt在路径末尾使用correct status code。你应该在你被告知的时候摆脱那个GET。

get '/delete/articles/:id' do
    Articles.get(params[:id]).destroy
    redirect to('/')
end

变为

get '/articles/:id' do
  # get the article here
end

delete '/articles/:id' do
  Articles.get(params[:id]).destroy
  halt 200
  # I'd also return a representation of the deleted article
  # or perhaps it's ID
  # but maybe that's just me
end

HTTP有动词是有原因的。不要使用$.get，使用$.ajax并传递正确的动词，即删除。请参阅链接中的类型。

请注意，动词不再需要也在URL中。

Sinatra：不路线的路线

更新

3 个答案: