如何访问和存储一个在按钮点击时动态更改的jsp页面的输入隐藏字段?

huangapple go评论107阅读模式
英文:

How to access and store the input hidden field of a jsp page which is changing dynamically on button clicks?

问题

以下是在 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}">播放按钮</a>

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

以下是您编写的 JavaScript 脚本:

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

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

  //将值添加到隐藏字段
  $('#trnum').val(datavalue);
  
  //显示隐藏字段的值
  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');

  //将值添加到隐藏字段
  $('#trnum').val(datavalue);
  
  //显示隐藏字段的值
  console.log($('#trnum').val())
  <%System.out.println(request.getParameter("trnum"));%>

  ap.list.switch(dataSwitchId);

  ap.play();

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

在突出显示的代码中,您正在控制台中打印 null。要将这些值存储到数据库并将其访问,请使用 Java 代码来处理。

您需要创建一个后端接口来处理从前端传递的数据,然后将这些数据存储到数据库中。通常,您可以使用 Java 的框架,如 Spring 或 Servlet,来处理此任务。在 Java 中,您可以通过接收 HTTP 请求参数来访问从前端传递的数据,然后将其插入到数据库中的相应表中。

这里提供了一般的思路,但具体的实现会取决于您的后端技术栈和数据库选择。如果您需要更详细的指导,请提供有关您的后端技术和数据库的更多信息。

英文:

here is the script that in the jsp page

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

&lt;input type=&quot;hidden&quot; id=&quot;trnum&quot; name=&quot;trnum&quot; value=&quot;&quot;&gt;

here is the js script that I wrote

$(&quot;.album-poster&quot;).on(&#39;click&#39;, function(e) {

  var dataSwitchId = $(this).attr(&#39;data-switch&#39;);
  var datavalue = $(this).attr(&#39;data-value&#39;);

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

  ap.list.switch(dataSwitchId);

  ap.play();

  $(&quot;#aplayer&quot;).addClass(&#39;showPlayer&#39;);
});

here the anchor tag is in the foreach loop such that of different values will be there in the data-value attribute in the anchor tag

here I want to store these data values to the database such that when I'm trying to access like

$(&quot;.album-poster&quot;).on(&#39;click&#39;, function(e) {

  var dataSwitchId = $(this).attr(&#39;data-switch&#39;);
  var datavalue = $(this).attr(&#39;data-value&#39;);

  //Add value to hidden field.
  $(&#39;#trnum&#39;).val(datavalue);
  
  //Show hidden field value
  console.log($(&#39;#trnum&#39;).val())
  ****&lt;%System.out.println(request.getParameter(&quot;trnum&quot;));%&gt;****

  ap.list.switch(dataSwitchId);

  ap.play();

  $(&quot;#aplayer&quot;).addClass(&#39;showPlayer&#39;);
});

in the highlighted code that I'm printing in the console it is printing null I need these values which are clicked to store them into the database and how can I get access them and store into the java list.

how can I do it ?

答案1

得分: 1

你需要将数据提交到服务器以访问request对象。实现这一目标的一种方式是使用ajax。您可以将用户点击的datavalue发送到后端并保存它。因此,您的jquery代码将如下所示:

$(".album-poster").on('click', function(e) {
    var dataSwitchId = $(this).attr('data-switch');
    var datavalue = $(this).attr('data-value');
    //检查datavalue是否不为null
    if (datavalue != null) {
        $.ajax({
            url: "your_backend_url", //url或servlet
            type: "GET",
            data: {
                trnum: datavalue
            }, //将数据传递给后端,可以在doGet方法servlet中使用request.getParameter("trnum")访问它
            success: function(data) {
                console.log("done"); //这将在浏览器控制台中成功打印
            }
        });
    }
    ap.list.switch(dataSwitchId);
    ap.play();
    $("#aplayer").addClass('showPlayer');
});

在后端,获取用户传递的数据,使用request.getParameter("trnum")进行进一步操作。

英文:

You need to submit your data to server to access request object .One way to achieve this is using ajax .You can send the datavalue which is clicked by user to backend and save it .So your jquery code will look like below :

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

At backend get that data which is passed by user using request.getParameter(&quot;trnum&quot;) and do further operations .

huangapple
  • 本文由 发表于 2020年8月3日 20:57:15
  • 转载请务必保留本文链接:https://go.coder-hub.com/63229885.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定