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();                     
    }

我实施了一些警报以可视化流程。它是这样的：

加载页面
警告：“获取令牌”
警告：“去ajax”
控制台：数据和令牌
按钮出现
我点击按钮
第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);                    
    }

Answer 2

使用jQuery选择器代替var myButton = document.querySelector('button');。给您的按钮一个ID id="loginBtn"，并将其用作选择器，如下所示。

    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);
    }

    $('#loginBtn').on('click', () => {
      getToken()
        .done(handleData)
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<button id="loginBtn" type="submit">Log in</button>

Answer 3

尝试

<button class="a class" id="a id" onclick="function"></button>

加上，你能投票给我吗？我昨天加入，问题的评分为-7。

：（

Answer 4

我之前已经做过（但这绝不是一个好习惯），但是您可以拥有一个空的script标签，并使用

更改script标签的src。

document.getElementById("script").src="thing.js";

按下按钮时。我真的看不到在按下按钮之前可能在何处调用了该函数，您能不能仅使用onClick =“”属性来调用该函数？

最后，您可以使用document.createElement创建一个，但是对Google而言，比让我解释它更好。

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

4 个答案: