javascript - 仅在单击按钮后运行 JavaScript/AJAX

Question

现在，我的脚本在页面加载后立即执行，然后在单击按钮后再次执行。是否可以使脚本空闲/等待，直到我单击按钮，然后运行？据我了解，这段代码是异步的，这很好，但我不希望它在页面加载后立即运行。

我有一个简单的 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();                     
    }

我已经实现了一些警报来可视化流程。事情是这样的:

1. 加载页面
2. 警报:“获取 token ”
3. 警报:“即将使用 ajax”
4. 控制台:数据和 token
5. 出现按钮
6. 我点击按钮
7. 重复步骤 2-4

Answer 1

当页面加载时，您正在调用您的函数 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);                    
    }