Jquery 在没有Rails的情况下使用AJAX的最佳实践'；内置助手？

在我的博客应用程序中，有些帖子显示为摘录——例如，用户看到前500个字符，可以单击链接查看整个帖子。以下是相关部分：

<% href = url_for post_path(:id => post) %>

<h1 class="title"><%= post.title %></h1>
<h2 class="published_on"><%= post.author %> wrote this <%= time_ago_in_words(post.published_on)%> ago</h2>
<div class="body">
  <% if defined?(length) %>
    <%= truncate_html(post.body, :length => length, :omission => "&hellip;<h1><a class='more' href=\"#{href}\">Click here for more!</a></h1>") %>
  <% else %>
    <%= post.body %>
  <% end %>
</div>

这显然令人恶心——我不想让我的javascript依赖于链接href中帖子id的位置，但我不知道javascript有什么其他方法可以知道它得到的帖子以及内容应该插入到哪个div中

---

实现这一目标的最佳方法是什么？我应该继续使用rails的AJAX助手吗？

在我看来，对于此类问题，您应该使用rails的助手

HTML应该是这样的：

My post bla bla bla <span id="more_of<%=post.id%>">more</span>

另一种同样好的方法是加载所有内容，然后将其隐藏：

bla bla bla this is my post blah <div style="display:none" onclick="this.style.display='block';">and this is the rest of the article</div>

bla bla bla bla这是我的帖子，这是本文的其余部分

（在div标签上的onclick可能会打断IE，但这是给你的想法）

对我来说，这是最好的方法，除非你有充分的理由避开rails的助手

---

希望对你有所帮助，霍勒斯，你是对的。您根本不需要Rails助手。要实现低调的JavaScript涅磐，最好避免它们（对不起，马克！）

非结构化JS意味着尽可能避免嵌入JS。事实上，试着保持松散耦合，但不要完全解耦。在您给我们的示例中，这很简单，因为我们可以使用HREF中的URL。您的JS不需要“知道”任何关于如何请求的信息

下面是如何盲目地通过HREF的链接发送，并让Rails使用ajax响应（即无布局）进行响应

解决方案：

这还假设您有RESTful路由或类似于handle/post/：id的路由

---

我们完了！我相信这对我们大家都有好处在这种情况下，我认为您根本不应该使用AJAX调用。您已经在post.body中包含了原始帖子的全部内容（您没有从数据库中获取500个字符），而不是使用JQuery进行ajax调用，使用它隐藏超过500个字符的内容，然后当用户单击“更多”链接时，它会显示div的其余部分。您可以完全在客户端完成此操作，并保存ajax

在你的部分：

<div class="body">
  <%= post.body %>
</div>

您的JQuery：

var fullText = $('div.body').html();
$('div.body').html(fullText.slice(0,499) + '<a class="more" href=\"#\">Click here for more!</a>');
$('a.more').live('click', function(event) {
  this.parent().html(fullText);
  return false;
}

var fullText=$（'div.body'）.html（）；
$（'div.body'）.html（fullText.slice（0499）+''；
$（'a.more'）.live（'click'，函数（事件）{
this.parent（）.html（全文）；
返回false；
}

为什么不想使用rails helper？让我的javascript保持低调/远离演示逻辑？另一方面，这可能是最不坏的选择。如果“使用rails helper”答案是什么，那就随它去吧。我给了你两个有或没有rails助手的解决方案谢谢——通过遍历锚点的父对象来获取插入目标是我一直在寻找的技巧。（实际上，你可能想在ajaxSetup调用中做“setRequestHeader”的事情，所以你只需要做一次）.嗨，Horace，我同意你关于ajaxSetup调用的评论，但是在我的应用程序中，它表现不好，所以我把它拿了出来。我将不得不再次研究它。祝你的应用程序也好运，祝你低调的JS万岁！

post = Post.find_by_id(params[:id])
render :text => post.content.slice(100..post.content.size) 

bla bla bla this is my post blah <div style="display:none" onclick="this.style.display='block';">and this is the rest of the article</div>

<!------- Your HTML ------>
<h1 class="title">Schwein Flu Strikes Again</h1>
<h2 class="published_on">B.Obama wrote this 2 seconds ago</h2>
<div class="body">
    SUMMARY SUMMARY
    <h1><a class='more' href="/post/1234">Click here for more!</a></h1>
</div>

/********* Your JavaScript ***********/
$(document).ready(function() {


$("a.more").click(function() {
    $containing_div = $(e).parents('div.body');
    var url = $(this).attr('href');
    $.ajax({
        beforeSend  : function(request) { request.setRequestHeader("Accept", "text/javascript"); },
                        /* Included so Rails responds via "format.js" */
        success     : function(response) { $(containing_div).empty.append(response); },
        type        : 'get',
        url         : url
    });
    return false;
  });


});

########### Your Controller ###########
def show
  @article = Post.find(param[:id])
  respond_to do |format|
    format.html { render :action => "show" and return  }
    format.js { render :partial => "post_content", :layout => false and return }
  end
end

<div class="body">
  <%= post.body %>
</div>

var fullText = $('div.body').html();
$('div.body').html(fullText.slice(0,499) + '<a class="more" href=\"#\">Click here for more!</a>');
$('a.more').live('click', function(event) {
  this.parent().html(fullText);
  return false;
}