jQuery ajax call не открывает запрошенный сайт

Question

Я получил

<button id="myid">

в своем HTML-коде.В моем JS-файле я пытаюсь отловить событие click и вызвать конкретный URL-адрес - так же, как щелкнуть по обычной HTML-ссылке.

Вот что я сделал:

$('#myid').on('click', function () {
    doSomething();
});

var doSomething = function () {
    $.ajax({
        url: "/targetURL",
        type: "GET",
        cache: false,
        async: true,
        error: function (error) {
            console.log(error);
        }
    });
}

Итак -URL вызывается, но ответ не отображается - наверное, потому что это ajax-вызов.Но как я могу справиться с этим?

Answer 1

Весь смысл Ajax в том, что он не вызывает навигацию, а дает ответ на JavaScript вместо этого.

Если вы хотите перейти к новомустраница, не используйте Ajax.

Используйте ссылку.

Если вы хотите, чтобы она выглядела как кнопка, примените к ней CSS.

Answer 2

Чтобы перехватить данные ответа, вам нужно добавить функцию успеха, например функцию ошибки.

var doSomething = function () {
$.ajax({
    url: "/targetURL",
    type: "GET",
    cache: false,
    async: true,
    success: function(response){
        console.log(response);
    },
    error: function (error) {
        console.log(error);
    }
});

}

Или, если вы хотите открыть только другой URL-адрес, такой как обычный HTML,Вы должны использовать окно JS objet

var doSomething = function () {
    window.open('/targetURL');
}

Answer 3

Точно так же, как при работе с функцией error, вы должны обрабатывать функцию success(), которая срабатывает, если вызов ajax успешен.

Также вы этого не делаетенеобходимо установить async: true, поскольку по умолчанию установлено значение true.

Добавьте функцию .preventDefualt() к click, чтобы убедиться, что при нажатии кнопки происходит только функция, котораяВы хотите запустить.

$('#myid').on('click', function(e) {
    e.preventDefault();
    doSomething();
});

var doSomething= function(){
    $.ajax({
        url: "/targetURL",
        type: "GET",
        cache: false,
        success: function(data) {
            console.log(data);
        }
        error: function(error) {
            console.log(error);
        }
    });
}

Параметр data в функции success() возвращает данные, которые возвращает ajax.Поэтому, когда вы входите в консоль, вы можете видеть структуру, чтобы вы знали, что с ней делать позже.