javascript - 无法从 Javascript addEventListener 方法调用 jQuery POST 请求

Question

我有一个 Javascript 文件，用于处理 html 页面上的按钮单击。它运行良好并检测按钮点击，但是我无法使 POST 请求在 addEventListener 方法内工作。我的浏览器控制台没有收到任何错误，它只是不起作用。我的问题是缺少什么？根据 POST 请求，我检查了此实现应该可以正常工作。

//我的 .js 文件:

(function(){
const btnSignUp = document.getElementById('btnSignUp');
const txtEmail= document.getElementById('txtEmail');

btnSignUp.addEventListener('click', e => {

    const email = txtEmail.value;
    console.log('test log');

    if (email.length < 4) {
          $.ajax({
          type: "POST",
          contentType: "application/json",
          url: "/signup/",
          data: JSON.stringify({title: email}),
          success: function (data) {
            console.log(data.title);
          },
          dataType: "json"
        });
    }
});
}());

Answer 1

从您的对象中删除警报调用，这是一个语法错误，因此您的代码片段将不会运行。

另外，不确定这是否会产生影响，但您可以用 jquery onload 函数替换自执行函数(IIFE)，两者都提供封装范围...下面的示例

(function () {

//...

})();

成为

$(function () {

//...

});

哪里

//...

是你的代码。

我还会向您的 jquery Ajax 调用添加一个错误字段，这样您就可以记录任何错误。

error: function (err) {

    console.log(err);

} 

鉴于您的问题中有语法错误，这就是我所能提供的建议。

与浏览器开发工具成为 friend ，特别是控制台和网络选项卡，当询问“端点是否被击中”时，控制台选项卡会发现您的语法错误，而网络选项卡将产生您正在寻找的答案，以及“端点给出什么响应”。

最后，我会在 if 之后添加任何其他语句，该语句检查电子邮件的长度，一个简单的日志就可以了，可能是您获取了错误的电子邮件字段，或者它不长足够的。