XMLHttpRequest 在按钮单击时不起作用答案

【问题标题】：XMLHttpRequest not working on button clickXMLHttpRequest 在按钮单击时不起作用
【发布时间】：2015-02-02 00:37:57
【问题描述】：

我正在开发这个 chrome 扩展，我在 Django 上有后端。我正在做一个 XMLHttpRequest POST 来登录用户。当我在“DOMContentLoaded”上调用该函数时，它可以工作。但是，当我单击按钮时，它不起作用。

这里是javascript代码：

function login(){
    //alert("hello");
    var http = new XMLHttpRequest();
    var url = "someURL";
    //var email = document.getElementById("email").value;
    //var password = document.getElementById("password").value;
    var params = "email=someEmail&password=Password";
    //alert(params);
    //var params = "email=" + email + "&password=" + password;
    http.open("POST", url, true);
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-length", params.length);
    http.setRequestHeader("Connection", "close");
    http.onreadystatechange = function() {
        //alert(http.responseText);
        if(http.readyState == 4 && http.status == 200) {
            alert(http.responseText);
        }
    }
    http.send(params);
}

现在，当我这样做时：

document.addEventListener('DOMContentLoaded', function(){
    login();
});

它有效。单击扩展程序时，我会收到一条成功消息。

但是，当我这样做时：

document.addEventListener('DOMContentLoaded', function(){
    document.getElementById("btn").addEventListener("click", login);
});

它不起作用。

这里是popup.html：

<html>
    <head>
        <script src="popup.js"></script>
    </head>
    <body>
        <div id="content">
            <p id="demo"></p>
            <form>
                <input type="email" id="email">
                <input type="password" id="password">
                <button id="btn">Login</button>
            </form>
        </div>
    </body>
</html>

这是manifest.json

{
  "manifest_version": 2,
  "name": "payback",
  "description": "payback.",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["http://*/", "https://*/"],
      "js": ["popup.js"]
    }
  ],
  "browser_action": {
    "default_popup":"popup.html"
  },
  "permissions": [
    "http://*/", "https://*/"
  ]
}

【问题讨论】：

你能更好地描述发生了什么而不是“它不起作用”吗？考虑您可以通过右键单击浏览器操作按钮并选择“检查弹出窗口”来调试代码
@Xan “它不起作用”我的意思是我没有收到警报。在 if(http.readyState == 4 && http.status == 200) 语句之前放置一个警报(http.responseText)，我得到一个空警报。我尝试了“检查弹出窗口”，但控制台中没有显示任何内容。
不建议在弹出窗口中使用alert()，因为它会使它失去焦点并可能消失。使用console.log()+inspect 进行调试。
@Xan 我尝试使用 console.log()。日志中仍然没有显示任何内容。
很奇怪。我猜login 由于某种原因甚至没有被调用。仔细检查您的元素 ID 是否有拼写错误。

标签： javascript google-chrome-extension xmlhttprequest

【解决方案1】：

删除线

http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");

XMLHttpRequest 不允许设置这些标头，它们是由浏览器自动设置的。 Read this for more information.

也可以使用

<input type="button" id="btn" value="Login"/>

而不是

<button id="btn">Login</button>

因为按钮会自己提交表单。

【讨论】：

【解决方案2】：

默认情况下，单击<button> 将提交表单（因为默认类型是submit）。试试这个

<button id="btn" type="button">Login</button>

【讨论】：