popup.js中的Chrome扩展程序POST异步请求

Question

我真的很抱歉不得不再问一次，但有没有人来过这样的案子

我有一个具有登录表单的popup.js，我想向API发送一个请求，该API返回一个包含API密钥的对象，该对象稍后将用于对用户进行身份验证。 我的问题是，如果我发送请求（它是一个POST请求），我设置参数async：false一切正常，但如果我尝试异步，它应该是，因为它毕竟被称为AJAX，我的回调只是执行方式太快，在POST请求完成之前，响应代码为0并且它只是失败。

这是我尝试过的：在我的HTML中，我有一个带有一个带有eventListener的按钮的表单

document.getElementById('login-btn').addEventListener('click', submitLoginForm, false);

以及popup.js文件中的submitLoginForm方法

function submitLoginForm() {
            userEmail = document.getElementById('email').value,
            userPassword = document.getElementById('password').value;

之后我为url设置了一个变量，为postData设置了一个变量，最重要的是为async：false设置了一个变量，然后我就这样设置了这个请求

var request = new XMLHttpRequest();

        request.onload = function() {
            var status = request.status;
            var data = request.responseText;
            console.log('status is ' + status + '\n data is ' + data);
        }

        request.open('POST', 'correct-url-here', true/false);

        request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

        request.send(postData);

postData是我已经组装的东西，所有字段的值都可以，但问题是我说只有在我将async设置为false时才会显示request.onload中的console.log，但每当我设置它时为了它只是甚至没有激活console.log

PS。 我已经尝试过与jQuery完全相同的东西，只是为了测试它，它的行为与这样的代码完全相同：

jQuery.ajax({
            type: "POST",
            url: url,
            data: postData,
            async: false, // if false -> success, if true - doesnt fire the alert..
            success: function(data) {
                console.log(data);
                alert('IMINSUCCESS' + JSON.stringify(data));
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert(JSON.stringify(jqXHR));
            }
        });

我唯一能想到的就是弄清楚它为什么会像这样表现，因为缺乏开发chrome扩展的知识是0而且我遗漏了一些非常明显的东西。

我的清单应该不是真正的问题，它只有工作的基本要素，没有什么特别的，正如我所说，同步请求有效，所以它应该不是一个真正的manifest.json问题

PS。 经过一些测试后，我在网络选项卡中看到，当我设置为异步代码时，我的请求显示（已取消），但没有明显的理由取消或任何错误代码。 我可能需要某个标题吗？

Answer 1

在得到一些好的和知识渊博的人的一些评论后，官方的答案就是Xan发布的。 我实际上是靠自己想出来的，但他提供了关于它为什么实际工作的急需信息，谢谢。

preventDefault有效，因为表单提交按钮的默认操作会导致页面导航 - 这会破坏您的监听器。 一个更简单的修复方法是使用type =“button”进行＃login-btn而不是默认提交。 - Xan 2天前