JQuery. each() не сохраняет данные на форме

214

20 февраля 2019, 15:40

Я не знаю JQuery но пытаюсь его понять и научится. Я делаю веб-форму для себя . У меня есть свое Spring Boot приложение которое отдает json значения с базы MySql . В этом куске кода я пытаюсь получить запросом ajax этот json(приблизительно такой [{songName: "song1",songName: "song2",songName: "song3",}]) и разместить его на странице вызовом цикла each () .Если глянуть в дебаггер в хроме то все отрисовывается После того как я получаю последнее значение страница как будто перезагружается и данные не записываются. Скажите где я ошибся?

Дебаггер

После окончания цикла

Мой код

function getSongsListArtists() { 
    var artist = document.getElementById("artist1").textContent; 
    var artistUrl = 'http://localhost:8080/songs/' + artist; 
    $.ajax({ 
        type: 'GET', 
        url: artistUrl, 
      async: false, 
        dataType: 'json', 
        success: songReturn 
    }); 
} 
 
function songReturn(json) { 
    $("#content").html("<span style='color: blue;font-size: 17px'>Песни артиста: </span>" + 
                "<pre id='listSong'></pre>"); 
    $.each(json, function (idx, topic) { 
    var song=topic.songName; 
    jQuery("#listSong").append("<a id='songId" + idx +"' href=''>"+song+"</a>"+"</br>"); 
    }); 
}

Answer 1

Логично. Вы пишете

<a id='artist1' href='' onclick='getSongsListArtists()'>"+data.artistName+"</a>

т.е. при клике на ссылку вначале произойдет вызов функции getSongsListArtists() а потом произойдет переход по ссылке href='', т.е. произойдет перезагрузка страницы.

Решения два:

Либо добавьте в функцию getSongsListArtists последней строкой return false

function getSongsListArtists() {
    var artist = document.getElementById("artist1").textContent;
    var artistUrl = 'http://localhost:8080/songs/' + artist;
    $.ajax({
        type: 'GET',
        url: artistUrl,
        async: false,
        dataType: 'json',
        success: songReturn
    });
    return false;
}

что скажет браузеру отменить переход по ссылке.

Либо перейдите на саму эту функцию

<a id='artist1' href='javascript:getSongsListArtists()'>"+data.artistName+"</a>

Создание интернет-магазина игрушек в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не могу могу удалить объект объекта из localStorage

Не могу понять в чем проблема, поискал в гугле инфу, самое близкое это было заменить объектВроде получилось, но удаляются все элементы из localStorage

215

javascript

Получить часы и минуты в часовом поясе UTC

В переменной thisx содержится timestamp в миллисекундах

145

javascript

chrome.tabs.onUpdated.addListener is not a function

Консоль выдает такую ошибку, как исправить?

201

javascript

Почему не срабатывает плагин jQuery Zoom?

делаю карточку товара, в которой для картинок использую слайдер, а к слайдеру пытаюсь еще зум подключить, но уже несколько часов все безуспешноHtml...

158