Запускать 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. Предупреждение: "получить токен"
3. Оповещение: "Идем в Аякс"
4. Консоль: данные и токен
5. Появляется кнопка
6. я нажимаю кнопку
7. повторяется шаг 2-4

Answer 1

используйте jQuery селекторы вместо var myButton = document.querySelector('button');.Присвойте своей кнопке идентификатор 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 2

Вы вызываете свою функцию, когда страница загружается с 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 3

Я делал это раньше (но это ни в коем случае не хорошая практика). Но вы могли бы просто иметь пустой тег сценария и изменить src тега сценария с помощью

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

, когдакнопка нажата.Я не могу понять, где это можно было вызвать до того, как была нажата кнопка. Не могли бы вы просто использовать атрибут onClick = "" для вызова функции?

Наконец, вы можете создать объект с документом.создатьElement, но это лучше для Google, чем для меня, чтобы объяснить это.

Answer 4

попробуй

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

Плюс, ты можешь проголосовать за меня? Я присоединился вчера, и мои вопросы оценили -7.

: (