Rails中用jQuery .load()加载link_to内容至div的问题求助

我来帮你搞定这个问题！你遇到的核心问题有两个：一是$.load()默认用GET请求，没法带上link_to的POST方法和Rails需要的CSRF验证；二是之前没正确阻止链接的默认行为，导致触发了Rails UJS的表单提交，从而打开新标签页。下面给你两种靠谱的解决方案：

方案一：用Rails UJS的AJAX事件（更符合Rails习惯） #

这种方式利用Rails内置的UJS功能，不需要手动构造POST请求，更简洁：

1. 修改link_to代码 #

给链接加上remote: true，让Rails自动用AJAX发送请求，同时保留data-method: :post：

<% @users.each do |other_user| %>
  <div>
    <%= link_to other_user.name, chat_path(other_user), 
                class: "user-chat-link", 
                data: { method: :post, remote: true } %>
  </div>
<% end %>

2. 编写JS监听AJAX回调 #

当AJAX请求成功返回时，把聊天视图渲染到指定的.chat div里：

// 监听AJAX成功事件
$(document).on('ajax:success', '.user-chat-link', function(event, responseData) {
  $('.chat').html(responseData);
});

// 可选：处理请求失败的情况
$(document).on('ajax:error', '.user-chat-link', function() {
  alert('加载聊天窗口失败，请重试');
});

这种方式会自动带上Rails需要的CSRF token，不需要手动处理，而且完全避免了新标签页跳转的问题。

方案二：手动构造POST请求（更灵活） #

如果需要更自定义的请求逻辑，可以手动发送POST请求，同时必须阻止链接的默认行为：

1. 同样给link_to加标识class #

<% @users.each do |other_user| %>
  <div>
    <%= link_to other_user.name, chat_path(other_user), 
                class: "user-chat-link", 
                data: { method: :post } %>
  </div>
<% end %>

2. 编写点击事件处理代码 #

$(document).on('click', '.user-chat-link', function(e) {
  // 必须阻止默认跳转和Rails UJS的表单提交行为
  e.preventDefault();
  e.stopPropagation();

  const $this = $(this);
  const chatUrl = $this.attr('href');
  // 获取Rails CSRF token，POST请求必须带上这个
  const csrfToken = $('meta[name="csrf-token"]').attr('content');

  // 发送POST请求
  $.post(chatUrl, { authenticity_token: csrfToken })
    .done(function(responseHtml) {
      $('.chat').html(responseHtml);
    })
    .fail(function() {
      alert('加载聊天失败，请检查网络或重试');
    });

  return false;
});

关键注意点 #

• 确保你的路由是POST类型：在routes.rb里应该有类似post '/chat/:user_id', to: 'chats#show', as: :chat的配置，这样chat_path(other_user)才会生成正确的POST路由。
• 之前出现新标签页跳转，本质是没阻止link_to的默认行为和Rails UJS的表单提交，所以e.preventDefault()和e.stopPropagation()（或return false）是必须的。
• Rails的POST请求必须携带CSRF token，不然会返回422错误，上面两种方案都处理了这个问题。

内容的提问来源于stack exchange，提问作者keith