javascript - 从 Chrome 扩展程序到 Meteor 托管网站 (meteor.com) 的 XHR 不一致

Question

我有一个 Google Chrome 扩展程序(浏览器操作)，可将弹出表单输入发送到我的 Meteor 网站/应用程序数据库。 (基于Log in to a meteor app from a Google chrome extension。)

popup.js 上的 XHR 代码:

$(document).ready(function() {
  $('#form').on('click','#submitForm',function () {
    var xhr = new XMLHttpRequest();
    var data =  {
                  "field1": $('#input1').val(),
                  "field2":$('#input2').val(),
                };
    xhr.open("POST", "http://MYAPPNAME.meteor.com/extension/post", true);
    xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
    xhr.send(JSON.stringify(data));
  });
});

该代码的工作非常零散。通常在第四次尝试时(即四次提交表单)。

什么可能导致这种不一致？这只是meteor.com 上免费托管缓慢的一个方面吗？ 我可能会切换到自定义域(在付费服务器上)，但理想情况下希望在付款前确保功能。

编辑

按照 Xan 的建议，我添加了 XHR 错误的事件监听器(来自 https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest )。

xhr.addEventListener("progress", updateProgress, false);
xhr.addEventListener("load", transferComplete, false);
xhr.addEventListener("error", transferFailed, false);
xhr.addEventListener("abort", transferCanceled, false);

现在每次都会出现“中止”(transferCanceled)警报。但是，偶尔数据仍然可以正确发送(即使有错误警报)。

这有什么值得注意的吗？有更好的方法来提醒错误吗？

Answer 1

我猜测请求已中止，因为表单已提交。尝试取消点击处理程序中的默认操作(表单提交):

$('#form').on('click', '#submitForm', function(event) {
    event.preventDefault();
    ....
});

您可能想改用表单的 submit 事件。这允许用户按 Enter 来提交表单，而不是单击按钮:

$('#form').on('submit', function(event) {
    event.preventDefault();
    ....
});