基于GOjs的赛事对阵图：如何通过XMLHttpRequest提交数据至Rails数据库

我来帮你把GOjs对阵图的JSON数据提交到Rails后端的流程补全，结合你已经写的代码，咱们一步步来：

一、完善前端的Save函数与请求逻辑 #

你已经有了基础的save函数，现在把XMLHttpRequest的逻辑整合进去，确保数据正确序列化并发送：

function save() {
  // 1. 从GOjs Diagram导出JSON数据
  const diagramJson = myDiagram.model.toJSON();
  const payload = JSON.parse(diagramJson);
  
  // 2. 初始化XMLHttpRequest请求
  const request = new XMLHttpRequest();
  const url = "/tournament_matches"; // 这里替换成你的Rails后端实际路由
  request.open("POST", url, true); // 新建数据用POST，更新已有数据用PUT/PATCH
  
  // 3. 设置请求头，告诉后端数据格式
  request.setRequestHeader("Content-Type", "application/json");
  // Rails默认启用CSRF保护，必须带上令牌才能通过验证
  const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
  request.setRequestHeader("X-CSRF-Token", csrfToken);
  
  // 4. 定义请求完成后的回调处理
  request.onload = function() {
    if (request.status >= 200 && request.status < 400) {
      // 请求成功：重置修改状态+提示用户
      console.log("对阵图数据保存成功！");
      myDiagram.isModified = false;
      alert("对阵图已保存");
    } else {
      // 请求失败：输出错误信息+提示用户
      console.error("保存失败，状态码：", request.status);
      alert("对阵图保存失败，请重试");
    }
  };
  
  // 5. 处理网络层面的异常
  request.onerror = function() {
    console.error("网络错误，无法连接后端");
    alert("网络异常，请检查连接后重试");
  };
  
  // 6. 发送序列化后的JSON数据（包装成Rails期望的参数结构）
  request.send(JSON.stringify({ tournament_match: { payload: payload } }));
}

二、Rails后端的配套处理 #

要让后端正确接收并处理payload字段，你需要完成以下几步：

1. 配置路由 #

在config/routes.rb中添加对应路由（以创建数据为例）：

resources :tournament_matches, only: [:create]
# 如果是更新已有数据，添加:update路由，对应PUT/PATCH请求

2. 控制器处理请求 #

在app/controllers/tournament_matches_controller.rb中实现create动作：

class TournamentMatchesController < ApplicationController
  def create
    @tournament_match = TournamentMatch.new(tournament_match_params)
    
    if @tournament_match.save
      render json: { status: "success", data: @tournament_match }, status: :created
    else
      render json: { status: "error", errors: @tournament_match.errors.full_messages }, status: :unprocessable_entity
    end
  end
  
  private
  
  # 强参数：只允许接收payload字段，确保数据安全
  def tournament_match_params
    params.require(:tournament_match).permit(:payload)
    # 注意：数据库字段需设置为json/jsonb类型，Rails会自动解析JSON数据
  end
end

3. 模型与数据库配置 #

确保你的TournamentMatch模型对应的数据库表有payload字段，推荐用jsonb类型（支持索引和更灵活的查询）。如果还没创建，生成迁移：

rails generate migration AddPayloadToTournamentMatches payload:jsonb
rails db:migrate

三、关键注意事项 #

• CSRF令牌：Rails默认启用CSRF保护，必须在请求头中带上X-CSRF-Token，否则会返回422错误。
• 请求方法匹配：新建数据用POST，更新数据用PUT/PATCH，路由和控制器动作要对应。
• 数据格式一致性：前端必须发送JSON字符串，且请求头Content-Type设置为application/json，否则Rails无法正确解析参数。
• 错误覆盖：前端要处理请求成功、业务失败、网络错误三种场景，提升用户体验。

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