Вызвать Java SpringBoot серверный метод из JavaScript скрипта на сайте

Question

Я работаю над подменю на моем сайте, в котором есть 5 опций, каждая из которых - название игры. Когда пользователь выбирает опцию, я хочу, чтобы мой сервер печатал название игры, которую выбрал этот пользователь. Здесь у меня две проблемы:

1. Я не знаю, почему после выбора опции подменю я всегда получаю первое имя игры.
   
2. Я не знаю, как отправить запрос из JS в мое приложение Spring Boot, которое является сервером.
   Вы можете мне помочь? Вот мой код:

<ul class="collapse list-unstyled" id="selectGameSubmenu">
    <li data-option="League of Legends">
        <a href="#"><img src="../../../static/images/league_of_legends/leagueoflegends_icon.png"
                         alt="" style="width:16px;height:16px"> League of Legends</a>
    </li>
    <li data-option="Teamfight Tactics">
        <a href="#"><img src="../../../static/images/teamfight_tactics/teamfighttactics_icon.png"
                         alt="" style="width:16px;height:16px"> Teamfight Tactics</a>
    </li>
    <li data-option="Legends of Runterra">
        <a href="#"><img src="../../../static/images/legends_of_runterra/legendsofruneterra_icon.png"
                         alt="" style="width:16px;height:16px"> Leagends of Runterra</a>
    </li>
    <li data-option="Valorant">
        <a href="#"><img src="../../../static/images/valorant/valorant_icon.png"
                         alt="" style="width:16px;height:16px"> Valorant</a>
    </li>
    <li data-option="Counter Strike">
        <a href="#"><img src="../../../static/images/counter_strike/counterstrike_icon.png"
                         alt="" style="width:16px;height:16px"> Counter Strike</a>
    </li>
</ul>

$("#selectGameSubmenu").click(function(e){
    e.preventDefault();
    var option = $("#selectGameSubmenu li").data("option");
    console.log(option);
});

@PostMapping("/change-game")
public String changeGame(@RequestParam String game){
    System.out.println("Selected option: " + game);
    return "index";
}

Answer 1

Ваша первая проблема связана с вашим прослушивателем событий щелчка. Поэтому всякий раз, когда вы нажимаете на элементы ul, он срабатывает, но когда вы определяете такой селектор $("#selectGameSubmenu li") , он всегда будет возвращать вашего первого дочернего элемента ul, который равен League of Legends.

Чтобы исправить это, вы должны немного его изменить. Прежде всего, вместо добавления прослушивателя событий в ul вы должны добавить прослушиватель событий в li, а затем получить указанный элемент c, выбранный нажатием, используя $(this), вывод должен выглядеть примерно так:

$("li").click(function (e) {
  e.preventDefault();
  var option = $(this).data('option');
  console.log(option);
});

Ваша вторая проблема проста, для связи между вашим бэкэндом и внешним приложением вы должны использовать что-то вроде ajax. Запрос ajax поможет получить и отправить данные между приложениями. Для получения дополнительной информации о нем вы можете прочитать любую из следующих статей: JQuery документация , Точка сайта или Бесплатный код лагеря .

Ваш запрос будет примерно таким:

$.ajax({
  type: "POST",
  url: url, // Your end point address 
  data: data, // Your data
  success: success // Your actions after data send successfully 
});