Question

我有一个谷歌浏览器扩展程序（浏览器操作），可以将弹出窗体输入发送到我的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);

现在，每次都会出现“abort”（transferCanceled）警报。但是，数据仍会偶尔正确发送（即使出现错误提示）。

这有什么注意事项吗？是否有更好的方法来提醒错误？

Answer 1

我猜该请求已中止，因为表单已提交。尝试在单击处理程序中取消默认操作（表单提交）：

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

您可能希望使用表单的submit事件。这允许用户点击 Enter 提交表单而不是单击按钮：

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

从Chrome扩展到Meteor托管网站（meteor.com）的XHR不一致

1 个答案: