<%= form_for @post, remote: true do |f| %>
  <%= f.text_field :title %>
  <%= f.submit "Save" %>
<% end %>

$("#post-form").on("submit", function(e) {
  e.preventDefault();
  
  $.ajax({
    type: "POST",
    url: $(this).attr("action"),
    data: $(this).serialize(),
    dataType: "json",
    success: function(response) {
      // 处理成功响应
      alert("保存成功");
    },
    error: function(xhr) {
      // 处理错误
      alert("保存失败: " + xhr.responseJSON.errors.join(", "));
    }
  });
});

document.getElementById("post-form").addEventListener("submit", async (e) => {
  e.preventDefault();
  
  try {
    const response = await fetch(e.target.action, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-CSRF-Token": document.querySelector("[name='csrf-token']").content
      },
      body: JSON.stringify({
        post: {
          title: document.getElementById("post_title").value
        }
      })
    });
    
    const data = await response.json();
    
    if (response.ok) {
      alert("保存成功");
    } else {
      throw data;
    }
  } catch (error) {
    alert("保存失败: " + error.errors.join(", "));
  }
});

def create
  @post = Post.new(post_params)
  
  respond_to do |format|
    if @post.save
      format.html { redirect_to @post }
      format.json { render json: @post, status: :created }
    else
      format.html { render :new }
      format.json { render json: @post.errors, status: :unprocessable_entity }
    end
  end
end

error: function(xhr) {
  const errors = xhr.responseJSON.errors;
  let errorHtml = "<ul>";
  for (const [field, messages] of Object.entries(errors)) {
    messages.forEach(message => {
      errorHtml += `<li>${field} ${message}</li>`;
    });
  }
  errorHtml += "</ul>";
  $("#error-container").html(errorHtml);
}