现在,我的脚本在页面加载后立即执行,然后在单击按钮后再次执行。是否可以使脚本空闲/等待,直到我单击按钮,然后运行?据我了解,这段代码是异步的,这很好,但我不希望它在页面加载后立即运行。
我有一个简单的 HTML 按钮:
<button type="submit">Log in</button>
这是我的脚本:
var myButton = document.querySelector('button'); //I realize theres an easier jQuery for this
var token;
function getToken(){
alert("get token");
var settings = {
"async": true,
"crossDomain": true,
"url": "...",
"method": "POST",
"headers": {
"Content-Type": "application/json",
"cache-control": "no-cache"
},
"processData": false,
"data": "{ \r\n\"Username\":\"username123\",\r\n\"Password\":\"password123\"\r\n}"
}
alert("going to ajax");
return $.ajax(settings);
}
function handleData(data){
console.log(data);
token = data.access_token;
console.log(token);
}
getToken().done(handleData);
myButton.onclick = function(e){
e.preventDefault();
getToken();
}
我已经实现了一些警报来可视化流程。事情是这样的:
- 加载页面
- 警报:“获取 token ”
- 警报:“即将使用 ajax”
- 控制台:数据和 token
- 出现按钮
- 我点击按钮
- 重复步骤 2-4
最佳答案
当页面加载时,您正在调用您的函数 getToken().done(handleData);
。将其移至按钮单击事件处理程序中,而不是 getToken()
。
代码:
var myButton = document.querySelector('button'); //I realize theres an easier jQuery for this
var token;
function getToken(){
alert("get token");
var settings = {
"async": true,
"crossDomain": true,
"url": "...",
"method": "POST",
"headers": {
"Content-Type": "application/json",
"cache-control": "no-cache"
},
"processData": false,
"data": "{ \r\n\"Username\":\"username123\",\r\n\"Password\":\"password123\"\r\n}"
}
alert("going to ajax");
return $.ajax(settings);
}
function handleData(data){
console.log(data);
token = data.access_token;
console.log(token);
}
myButton.onclick = function(e){
e.preventDefault();
getToken().done(handleData);
}
关于javascript - 仅在单击按钮后运行 JavaScript/AJAX,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55776250/