使用 AJAX 获取具有不同按钮的不同 html

Posted 2023-05-09

【中文标题】使用 AJAX 获取具有不同按钮的不同 html

【英文标题】：Get different html with different buttons with AJAX

【发布时间】：2017-09-01 15:06:27

【问题描述】：

我的网站上有这个菜单

%button.dropdown-button
  .current-useronclick:'showMenu()'
    %img.current-user-imagesrc:current_user.picture_url
    = current_user
    %i.fa.fa-bars'aria-hidden':true
  .dropdown-content
    .menu-optiononclick:'showFilters()'
      Filter Transactions
      %i.fa.fa-paper-plane'aria-hidden':true
    .transaction-filters
      .filter-option
        My Transactions
        %i.fa.fa-square-o
    %ahref:'#'
      .menu-option
        Balance History
        %i.fa.fa-history'aria-hidden':true
    %ahref:destroy_user_session_path
      .menu-option
        Sign Out
        %i.fa.fa-sign-out'aria-hidden':true

我得到了这个交易时间表

.timeline-container
  - @transactions.each do |transaction|
    .transaction-container
      .transaction-header-container
        .transaction-kudos-container
          = "+#transaction.amount"
          %span.currency
            ₭
        .transaction-avatar-container
          %div
            = image_tag transaction.receiver_image, class:'avatar'
      .transaction-body-container
        .transaction-content
          %span
            = "#transaction.sender.name:"
          %span.highlighted
            = "+#transaction.amount ₭"
          %span
            to
          %span.highlighted
            = transaction.receiver_name_feed
          %span
            for
          %span.highlighted
            = transaction.activity_name_feed
      %div
        -#%button#like-button
        -#  Like
        %span.post-time-stamp
          = "#distance_of_time_in_words(DateTime.now, transaction.created_at) ago"
  = paginate @transactions

它们都呈现在我的index.html.haml

所以当我点击 div .filter-option.sent 时，我想从

更改代码更改

- @transactions.each do |transaction|

到

- @all_transactions.each do |transaction|

在不重新加载页面的情况下过滤掉当前用户的事务。

这些变量是在我的控制器中定义的

@transactions = Transaction.order('created_at desc').page(params[:page]).per(20)
@all_transactions = Transaction.all_for_user(current_user)

在我的模型中使用方法all_for_user

def self.all_for_user(user)
    Transaction.where(sender: user).or(Transaction.where(receiver: user)).order('created_at desc').page.per(20)
end

我用 AJAX 尝试了很多东西，但似乎没有什么能让我满意。有人可以帮助我吗？

【问题讨论】：

另外我不推荐使用 ( .menu-optiononclick:'showFilters()' ) onclick html 选项。我个人认为组织你的 html 和 javascript 代码很混乱，更难。但每个人都有自己的。

【参考方案1】：

因此，如果您想用 AJAX 替换 @transactions 列表，您需要做一些事情..

1) 将@transactions 块移动到采用局部变量的部分中。

#transactions-wrapper
  = render partial: 'transactions/list', locals: transactions: @transactions

2) 创建一个提交到路由的链接，该链接以 #js ('data-remote': true ) 形式触发控制器操作（或编写触发 $.ajax 请求的 javascript 函数：https://www.w3schools.com/jquery/ajax_ajax.asp

%a.transaction-filterhref: "/transactions/#transaction_type", 'data-remote': true

或前..

%a.studyhref: "/transactions/recent", 'data-remote': true
%a.studyhref: "/transactions/past", 'data-remote': true

3) 定义路线

get '/transactions/:type' => 'transactions#filter'

4) 根据过滤器重新分配变量，并使用视图目录中的 filter.js.erb 文件中的新数据重新渲染该部分 -> 应用程序/视图/事务

def filter
  @filtered_transactions = Transactions.where(type: params[:type] ).order('created_at DESC')

  respond_to do |format|
    format.html
    format.js  render :action => 'filter.js.erb', :layout => false
  end
end

---

$("#transactions-wrapper").html("<%= j render(:partial => 'transactions/list'', :locals =>  transactions: @filtered_transactions  ) %>");
alert('Transactions have been filtered, yo')

让我知道这是否有意义！除了请不要在最后发出 javascript 警报 ;)

【讨论】：

那么第一步应该添加到.timeline-container之外还是应该替换.timeline-container和- @transactions.each？以前从来没有做过这样的事情

有几个问题：A) %a.study 应该添加到哪个文件中？ B) def services_show 应该添加到哪个文件中？

A) %a.study（重命名为 %a.transaction-filter ）链接应该在菜单中代替 .menu-optiononclick:'showFilters()' // & B) services_show （重命名的 def 过滤器以匹配路由），应该在 TransactionsController 中。这有意义吗？

所以我说添加部分可能是 ajax 最好的主意的原因是，你不必尝试通过一堆难以管理的 jquery 函数来删除整个页面。你可以提交一个带有 javascript 的链接.. 告诉哪个控制器动作要命中.. 重新获取数据.. 并告诉视图重新渲染那个小部分，使用您从数据库中查询的新事务集..如果您还有其他问题，请联系我。

A) .menu-optiononclick:'showFilters()' 只是滑出.filter-option，您可以在其中单击My Transactions。因此，在那次点击中，我希望过滤交易。那么%a.transaction-filter 不应该代替.filter-option 吗？ B）我仍然不知道将= render partial 部分放在哪里：/ 以及它是否替换了.timeline-container 或做其他任何事情