如何访问和存储在按钮单击时动态变化的 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循环中，这样不同的值就会出现在锚标签的data-value属性中

在这里，我想将这些数据值存储到数据库中，这样当我尝试访问时

$(".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 object。实现此目的的一种方法是使用datavalue 。您可以将用户单击的数据值发送到后端并保存。因此您的ZD223E1439188E478349EZ代码如下所示：

 $(".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")传递的数据并执行进一步操作。