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 ，但每当我将其设置为true时，它甚至不会触发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而且我错过了一些非常明显的东西。

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

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

Answer 1

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

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

popup.js

1 个答案: