如何访问和存储在按钮单击时动态变化的jsp页面的输入隐藏字段？答案

【问题标题】：How to access and store the input hidden field of a jsp page which is changing dynamically on button clicks?如何访问和存储在按钮单击时动态变化的jsp页面的输入隐藏字段？
【发布时间】：2020-11-23 13:07:01
【问题描述】：

这是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 列表中。

我该怎么做？

【问题讨论】：

如果不提交form 或使用ajax，您无法在此处访问request？以及为什么要混合使用 js 和 jsp ？
@Swati 我是初学者，不要介意，我需要在不提交表单的情况下访问那些可能吗？
不，你不能那样访问它们。
每次点击数据都应该被备份？如果是，则使用 ajax 获取该值并将其发送到服务器，如果您想先收集所有值，则可以将它们存储在前端的数组中，然后使用 ajax 将其发送到服务器。
让我们continue this discussion in chat。

标签： javascript java jquery jsp servlets

【解决方案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") 传递的数据并进行进一步操作。

【讨论】：