Rails框架中HotWire如何与JS/Ajax表单协同工作？

1. Stimulus/Turbo（Hotwire）是否支持返回转义后的html/partial作为响应？ #

• 完全支持，这属于Hotwire的原生核心能力。Turbo默认处理服务端返回的HTML片段时，会自动执行安全转义，规避XSS注入风险，无需额外配置。
• 你可以直接在控制器中返回partial作为Turbo Stream响应，示例代码如下：

  # app/controllers/items_controller.rb
  def create
    @item = Item.new(item_params)
    if @item.save
      # 直接渲染partial插入页面指定节点，内容自动转义
      render turbo_stream: turbo_stream.append(:items_container, partial: "items/item", locals: { item: @item })
    else
      render :new, status: :unprocessable_entity
    end
  end
  

• 如果你确认内容安全、需要输出未转义的HTML，可通过Rails自带的raw或html_safe方法标记对应内容即可。

2. 基于Hotwire实现的dynamic/ajax/remote表单具体是什么形态？ #

• 不需要手动编写任何Ajax请求代码，Rails 7及以上版本默认生成的表单已经原生适配Turbo，普通写法就自动具备异步提交能力，不需要再加旧版Rails的remote: true参数：

  # app/views/items/new.html.erb
  <%= form_with model: @item do |form| %>
    <div class="form-group">
      <%= form.label :title %>
      <%= form.text_field :title, class: "form-control" %>
      <%= form.error_message :title %>
    </div>
    <%= form.submit "创建条目", class: "btn btn-primary" %>
  <% end %>
  

• 表单提交后默认由Turbo接管发送异步请求，全页不会刷新。服务端可以根据业务逻辑返回三种响应：
  • 返回Turbo Stream指令，直接操作页面DOM完成新增、替换、删除元素等交互
  • 返回重定向响应，Turbo会自动执行页面局部跳转，无全页刷新
  • 校验失败时返回带错误信息的表单页面，Turbo会自动替换当前页面的表单区域展示错误
• 如果需要自定义提交前后的行为（比如加加载状态、前置校验），可以配合Stimulus监听Turbo提供的turbo:submit-start、turbo:submit-end等表单事件实现。

以上方案同时适配旧版本Rails，Hotwire是Rails 7的官方默认首选前端技术方案。

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