gpt4 book ai didi

javascript - XMLHttpRequest 在按钮单击时不起作用

转载 作者:行者123 更新时间:2023-11-28 12:26:59 25 4
gpt4 key购买 nike

我正在开发这个 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://*/"
]
}

最佳答案

删除行

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

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

也可以使用

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

而不是

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

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

关于javascript - XMLHttpRequest 在按钮单击时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27288837/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com