Rails XHR 导致错误：SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data答案

【问题标题】：Rails XHR causes error: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON dataRails XHR 导致错误：SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
【发布时间】：2019-12-09 23:10:59
【问题描述】：

我正在开发一个 Rails 应用程序并实现一个上传图像的表单。我正在使用XMLHttpRequest 对象来提交表单。当我导航到该页面并尝试提交表单时，我收到以下错误：SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data。

我检查了 xhr.responseText 并且它是空的，即使正确的控制器操作被命中并呈现 json 响应（我已经验证了这一点）。如果我刷新页面然后尝试使用它可以正常工作的表单。我猜这可能与涡轮链接有关，但我不确定。代码如下：

Javascript

document.addEventListener("DOMContentLoaded", function() {
  const uploadImage = document.getElementById("upload_image");
  uploadImage.addEventListener("submit", function(event) {
    var formData = new FormData(uploadImage);

    event.preventDefault();
    xhr = new XMLHttpRequest();
    xhr.open("POST", "/upload_image", true);

    xhr.onreadystatechange = function() {
      if (xhr.readyState == XMLHttpRequest.DONE) {
        const uploadedImage = document.getElementById("uploaded_image");
        uploadedImage.innerHTML = xhr.responseText;
        uploadImage.reset();
      }
    };

    xhr.send(formData);
  });
});

控制器

def upload_image
    uploaded_io = params[:file]

    if uploaded_io
      File.open(Rails.root.join('public', 'uploads', uploaded_io.original_filename), 'wb') do |file|
        file.write(uploaded_io.read)
      end

      render json: "File successfully uploaded: #{File.join(root_url, 'uploads', uploaded_io.original_filename)}", status: 200
    else
      render json: "No file uploaded", status: 400
    end
  end

【问题讨论】：

问题似乎是您在正文中发送表单编码数据，这只是一堆看起来像 foo=bar&baz=bar 但请求具有 JSON 内容类型的键值对。当然不能解析为 JSON。您可能只想看看 ActiveStorage 而不是重新发明轮子。

标签： ruby-on-rails ajax ruby-on-rails-5

【解决方案1】：

问题是我正在监听DOMContentLoaded 事件而不是turbolinks:load。这解决了问题：

document.addEventListener("turbolinks:load", function() {
...
})

【讨论】：