admin管理员组文章数量:1391934
I am developing this chrome extension and I have the backend on Django. I am doing an XMLHttpRequest POST to login the user. When I call the function on 'DOMContentLoaded', it works. However, when I do it on a button click, it doesn't work.
Here is the javascript code:
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);
}
Now, when I do this:
document.addEventListener('DOMContentLoaded', function(){
login();
});
It works. On clicking the extension, I get a success message.
However, when I do this:
document.addEventListener('DOMContentLoaded', function(){
document.getElementById("btn").addEventListener("click", login);
});
It doesn't work.
Here is the 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>
and this is the 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://*/"
]
}
I am developing this chrome extension and I have the backend on Django. I am doing an XMLHttpRequest POST to login the user. When I call the function on 'DOMContentLoaded', it works. However, when I do it on a button click, it doesn't work.
Here is the javascript code:
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);
}
Now, when I do this:
document.addEventListener('DOMContentLoaded', function(){
login();
});
It works. On clicking the extension, I get a success message.
However, when I do this:
document.addEventListener('DOMContentLoaded', function(){
document.getElementById("btn").addEventListener("click", login);
});
It doesn't work.
Here is the 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>
and this is the 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://*/"
]
}
- Can you give a better description of what happens instead of "it doesn't work"? Consider that you can debug your code by right-clicking the browser action button and selecting "Inspect popup" – Xan Commented Dec 4, 2014 at 7:59
- @Xan By "it doesn't work" I mean I don't get the alert. Placing an alert(http.responseText) just before the if(http.readyState == 4 && http.status == 200) statement, I get an empty alert. I tried the "Inspect popup" thing but nothing shows up in the console. – rahulg Commented Dec 4, 2014 at 8:18
-
It is not advisable to use
alert()in a popup, since it makes it lose focus and potentially vanish. Useconsole.log()+ inspect to debug. – Xan Commented Dec 4, 2014 at 8:19 - @Xan I tried using console.log(). Still nothing shows up in the log. – rahulg Commented Dec 4, 2014 at 8:23
-
Very strange. I guess
loginis not even called for some reason. Double-check your element IDs for typos. – Xan Commented Dec 4, 2014 at 8:24
2 Answers
Reset to default 4Remove lines
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
XMLHttpRequest isn't allowed to set these headers, they are being set automatically by the browser. Read this for more information.
Also use
<input type="button" id="btn" value="Login"/>
instead of
<button id="btn">Login</button>
because button will submit form itself.
By default, a click on a <button> will submit the form (because the default type is submit). Try this
<button id="btn" type="button">Login</button>
本文标签： javascriptXMLHttpRequest not working on button clickStack Overflow
版权声明：本文标题：javascript - XMLHttpRequest not working on button click - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744693934a2620163.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论