【问题标题】:How to get the active tab name or id using java?如何使用 java 获取活动选项卡名称或 ID?
【发布时间】:2013-06-26 07:13:40
【问题描述】:

下面是我在jsp中创建标签的html代码。

<form name="form1" action="/SampleServlet" method="post">
<ul id="navigation">
<li><a id="tab1" name="live" class="selected" onclick="parent.frame1.location='frame1.jsp'">LIVE</a></li>
<li><a id="tab2" name="history" onclick="parent.frame1.location='frame2.jsp'">HISTORY</a></li>
</ul>

现在我想在我的 servlet 中选择选项卡或激活的选项卡名称或 ID。我该如何使用

request.getParameter("") 

获取选定或激活选项卡的方法?请帮助我。我找到了一些使用 jquery 的解决方案,但我不想使用 Jquery。请帮助我。如何获取选项卡名称或 id 或被选中的值目前或目前使用 request.getParameter() 激活?

【问题讨论】:

  • 你如何调用你的 servlet?
  • 为什么你不想使用 jQuery?
  • 至少给两个标签一个不同的 ID,如果你想知道哪个标签被选中或点击了,这是有道理的
  • 对不起..请查看编辑后的帖子

标签: java html tabs


【解决方案1】:

请确保您没有使用重复的 id 例如:将第二个链接 id 更改为 tab2

<ul id="navigation">
<li><a id="tab1" name="live" class="selected" onclick="parent.frame1.location='frame1.jsp'">LIVE</a></li>
<li><a id="tab2" name="live" class="selected" onclick="parent.frame1.location='frame2.jsp'">HISTORY</a></li>
</ul>

你尝试使用request.getparametervalues()

【讨论】:

  • request.getParameter() 应该带入参数吧?那我应该带什么 request.getParameter("id");如果我选择 tab2,它不会给出结果。
  • 更好地使用jQUery>> jQuery(".selected").click(function(){ });
  • 他应该使用 jQuery,.click() 很容易做到这一点!
【解决方案2】:

使用 jQuery!它会让你的工作更轻松!只需在这些选项卡上注册一个点击处理程序,然后向 servlet 发送一个 ajax 请求,参数为您的选项卡 ID,就这么简单!下面是代码:

假设:Tab1:ID='tab1',CLASS='tab' Tab2:ID='tab2',CLASS='tab'

// click handler
$('.tab').click(function(){
  // get tab id
  var id = $(this).attr('id');

  // now send an ajax request to servlet with parameter which stores this id value
  $.ajax({
    type: 'GET',  // request type
    data: {param: id},
    url: '/servleturl',
    dataType: 'text',  // or json or any other which your servlet will return

    // this will be executed when request is successful and a correct response is recieved
    success: function(response){
      alert(response); // or do whatever you like to do with response
    },

    // this function will be executed when there is any error
    error: function(){

    },

    // this will be always executed, like a finally block in Java
    complete: function(){

    },
  });
});

您可以省略错误并完成功能;我已经告诉了你所有必要的东西。就是这么简单。

为了在您使用的 servlet 中接收 ID:

String tabId = request.getParameter('param');

'param',因为我已经指定了:

data: {param: id}

如果您使用“param”以外的任何其他名称,请改用它。

为了从 servlet 发送响应,只需使用:

PrintWriter out = response.getWriter();
out.write("ABCD or whatever you want");
out.close();  // DON'T forget this!

【讨论】:

    【解决方案3】:

    如果没有 jQuery,将很难选择它,您必须迭代所有 a 元素才能找到它(或者需要其他一些迭代)。

    1. 你必须找到带有“selected”类的a并读取它的ID(在jQuery中是$("a.selected").attr('id'))。核心 JS 中没有“getElementByClass”...

    2. 在这两种情况下,您都必须将此值设置为隐藏的表单元素,该元素必须添加到&lt;form&gt;,如下所示:&lt;input type="hidden" name="activetab"&gt;&lt;/input&gt;

    3. 然后您会在带有request.getParameter("activetab") 的servlet 中找到它。

    无论如何这是一个核心的 Javascript 解决方案:http://jsfiddle.net/balintbako/NdNqX/

    <script type="text/javascript">
        function setTabAndSubmit() {
            var tab;
            var anchors = document.getElementsByTagName("a");
            for (var i = 0; i < anchors.length; i++) {
                if (anchors[i].className == 'selected') {
                    tab = anchors[i].id;
                    break;
                }
            }
            document.forms["myform"].elements["activetab"].value = tab;
            alert(tab);
        }
    </script>
    <form name="myform" action="/path" onSubmit="setTabAndSubmit()">
        <input name="activetab" type="hidden"></input>
        <input name="somefield" type="text"></input>
        <input type="submit" value="Submit"></input>
    </form> 
    <a id="a1" href="#" class="selected">link 1</a>
    <a id="a2" href="#">link 2</a>
    

    【讨论】:

    • 我没听懂。请解释一下。什么是“您必须选择带有“已选择”类的a并读取它的ID“?请帮帮我
    • 为什么要使用这个东西,使用隐藏元素,而所有在使用jQUery的时候这个东西都是小菜一碟!我给你的代码对你来说很难吗?你对 JavaScript 是否满意?
    • 我改成措辞:select意味着你必须用“css选择器”找到它
    • @stalin 我不确定你写的东西是不是这里的目标。您发送一个 ajax 请求,这与发布表单不同。我们从页面中看到 4 行,其余的可能还没有 ajax 准备好......
    • 确实如此,但是如果我是他,我也想发送一些其他数据,而不仅仅是一个 tabid :)
    猜你喜欢
    • 1970-01-01
    • 2022-08-05
    • 1970-01-01
    • 1970-01-01
    • 2015-01-24
    • 1970-01-01
    • 2013-07-13
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多