Rails 6 使用Ajax提交分类创建表单时页面持续刷新问题求助

问题1：未正确引入Rails UJS导致表单默认走普通HTML提交 #

Rails 6中form_with的Ajax提交能力依赖@rails/ujs库，脚手架生成的项目默认需要手动启用：

1. 打开app/javascript/packs/application.js
2. 确认存在以下两行代码，没有就补上：

import Rails from "@rails/ujs"
Rails.start()

3. 如果是用importmap管理依赖，需要先执行importmap pin @rails/ujs引入依赖包。

当UJS未生效时，表单提交的请求头Accept里不包含text/javascript，控制器会优先匹配format.html触发跳转，这就是页面刷新的核心原因。如果此时删除了format.html配置，就会抛出UnknownFormat错误。

问题2：JS代码存在拼写错误 #

create.js.erb中getElementByID的最后一个字符应为小写d，同时修改原有拼接逻辑，直接替换整个分类列表容器内容，避免出现分类重复的问题：

document.getElementById("category").innerHTML = "<%= j render 'category', categories: @categories %>"

问题3：局部模板渲染逻辑错误 #

1. 首页index.html.erb中渲染分类列表的代码写错，把<%= render @category %>改为：

<%= render 'category', categories: @categories %>

2. 修改_category.html.erb局部模板，去掉实例变量依赖，改用传入的局部变量：
   把第一行<% @categories.each do |category| %>改为<% categories.each do |category| %>

问题4：表单可显式指定Ajax提交避免配置异常 #

修改_form.html.erb的表单定义，显式加上local: false强制走Ajax提交：

<%= form_with(model: category, local: false) do |form| %>

问题5：控制器响应逻辑可优化 #

调整控制器create方法的逻辑，把分类查询放到保存分支中减少无效查询，同时补充失败场景的JS响应支持：

def create
  @category = Category.new(category_params)
  respond_to do |format|
    if @category.save
      @categories = Category.all
      format.js
      format.html { redirect_to action: "index", notice: "Category was successfully created." }
      format.json { render :show, status: :created, location: @category }
    else
      @categories = Category.all
      format.js # 校验失败也走JS格式，后续可以扩展用来渲染错误提示
      format.html { render :"index", status: :unprocessable_entity }
      format.json { render json: @category.errors, status: :unprocessable_entity }
    end
  end
end

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