Как получить доступ и сохранить скрытое поле ввода на странице jsp, которое динамически изменяется при нажатии кнопки?

Question

вот сценарий, который на странице jsp

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#trno=${track.track_no}" class="album-poster" data-switch="${count}" data-value="${track.track_no}">Play Button</a>

<input type="hidden" id="trnum" name="trnum" value="">

вот сценарий js, который я написал

$(".album-poster").on('click', function(e) {

  var dataSwitchId = $(this).attr('data-switch');
  var datavalue = $(this).attr('data-value');

  //Add value to hidden field.
  $('#trnum').val(datavalue);
  
  //Show hidden field value
  console.log($('#trnum').val())

  ap.list.switch(dataSwitchId);

  ap.play();

  $("#aplayer").addClass('showPlayer');
});

здесь тег привязки находится в foreach l oop, так что разные значения будут присутствовать в атрибуте значения данных в теге привязки

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

$(".album-poster").on('click', function(e) {

  var dataSwitchId = $(this).attr('data-switch');
  var datavalue = $(this).attr('data-value');

  //Add value to hidden field.
  $('#trnum').val(datavalue);
  
  //Show hidden field value
  console.log($('#trnum').val())
  ****<%System.out.println(request.getParameter("trnum"));%>****

  ap.list.switch(dataSwitchId);

  ap.play();

  $("#aplayer").addClass('showPlayer');
});

в выделенном коде, который я печатаю в консоли, он печатает null Мне нужны эти значения, которые щелкают, чтобы сохранить их в базе данных, и как я могу получить к ним доступ и сохранить в java список.

как это сделать?

Answer 1

Вам необходимо отправить свои данные на сервер, чтобы получить доступ к объекту request. Один из способов добиться этого - использовать ajax. Вы можете отправить datavalue, по которому пользователь щелкает мышью в бэкэнд, и сохранить его. Итак, ваш jquery код будет выглядеть следующим образом:

 $(".album-poster").on('click', function(e) {
    
      var dataSwitchId = $(this).attr('data-switch');
      var datavalue = $(this).attr('data-value');
 //chcking if datavalue is not null
      if (datavalue != null) {
        $.ajax({
          url: "your_backend_url", //url or servlet
          type: "GET",
          data: {
            trnum: datavalue
          }, //pass data to backend access same using request.getParameter("trnum") in doGet method servlet
          success: function(data) {
            console.log("done");//this will print on success in browser console
          }
        });
    
      }
      ap.list.switch(dataSwitchId);
    
      ap.play();
    
      $("#aplayer").addClass('showPlayer');
    });

На бэкэнде получите данные, которые передаются пользователем с помощью request.getParameter("trnum"), и выполните дальнейшие операции.