Rails XHR 导致错误:语法错误:JSON.parse:JSON 数据第 1 行第 1 列处的意外字符

Question

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

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

爪哇语

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

Answer 1

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

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