2014-05-19 90 views
0

我在JSP頁面中有一個水平導航菜單和一個提交按鈕。 我想將選定的值從導航菜單發送到servlet。 如何做到這一點,以及如何在相應的servlet中獲取該值? 問題是在我的解決方案中未提交表單,即顯示HTML中的值的servlet未加載。如何通過參數從jsp頁面發送到servlet?

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta charset="utf-8" /> 
<title>Welcome</title> 
<style type="text/css"> 
    * { 
    margin:0px; 
    padding:0px; 
} 

body { 
    background-color:#f7f0f0; 
    font-family:Verdana; 
    padding:50px; /*all four paddings are 50px*/ 
} 

h1 { 
    text-align:center; 
    border-bottom:2px solid #666; 
    padding-bottom:10px; 
} 

ul#mainmenu,ul.sub1,ul.sub2,ul.sub3,ul.sub4,ul.sub5 { 
    list-style-type:none; 
    font-size:15px; 
} 

ul#mainmenu { 
    padding-top:10px; 
} 

ul#mainmenu li{ 
    float:left; 
    position:relative; 
    width:350px; 
    text-align:center; 
    margin-right:3px; /*renders a right margin of 5 pixels around the list items */ 
} 

ul#mainmenu a { 
    text-decoration:none; 
    display:block; 
    line-height:25px; /*gives a vertical centering*/ 
    width:350px; /*same as the width of the list items*/ 
    height:25px; 
    background:linear-gradient(to right,#bdc2ed,white,#bdc2ed); /*create a color gradient to the right*/ 
    border-radius:5px; 
    /*outline:1px solid red;*/ /*takes up the space outside of the elements's container (i.e. in this case the outside of the list items*/ 
} 

ul#mainmenu .sub1 li { 
    margin-top:2px; 
} 

ul#mainmenu .sub1 a { 
    border:1px solid green; /*takes up the space outside of the content itself i.e. the anchor tags . That's where the border radius comes into the picture*/ 
} 

ul#mainmenu .sub2 li,.sub3 li,.sub4 li,.sub5 li { 
    margin-left:20px; 
} 

ul#mainmenu li:hover > a { 
    text-transform:uppercase; /*select and style every <a> element where the the par */ 
    background:linear-gradient(to right,blue,white,blue); 
    border:1px solid black; 
} 

ul#mainmenu li:hover a:hover { 
    background:linear-gradient(to right,#718ce5,white,#718ce5); 
} 

ul#mainmenu ul.sub1 { 
    display:none; 
    position:absolute; 
    top:26px; 
    left:0px; 
} 

ul#mainmenu ul.sub2 { 
    display:none; 
    position:absolute; 
    top:-2px; 
    left:335px; 
} 

ul#mainmenu ul.sub3 { 
    display:none; 
    position:absolute; 
    top:-2px; 
    left:335px; 
} 

ul#mainmenu ul.sub4 { 
    display:none; 
    position:absolute; 
    top:-2px; 
    left:335px; 
} 

ul#mainmenu ul.sub5 { 
    display:none; 
    position:absolute; 
    top:-2px; 
    left:335px; 
} 

ul#mainmenu li:hover ul.sub1 
{ 
    display:block; 
} 

ul#mainmenu ul.sub1 li:hover ul.sub2 
{ 
    display:block; 
} 

ul#mainmenu ul.sub2 li:hover ul.sub3 
{ 
    display:block; 
} 

ul#mainmenu ul.sub2 li#submenu_shirts:hover ul.sub4 
{ 
    display:block; 
} 

ul#mainmenu ul.sub1 li#submenu_shoes:hover ul.sub5 
{ 
    display:block; 
} 

#submit_button 
{ 
    position:relative; 
} 


</style> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script type="text/javascript"> 
    $(document).ready(function() { 

     $("#submit_button").prop("disabled", true); 

     $("ul#mainmenu").on("click", function (event) { 
      $("#submit_button").prop("disabled", false); 
      $("form").submit(); 
     }); 

     $("form").submit(function (event) { 
      alert("Form being submitted--Please Wait!"); 
      event.preventDefault(); 
     }); 
    }); 
</script> 
</head> 
<body> 

<h1>Welcome</h1> 

<form action="/servlets/MyFirstServlet" method="post"> 
<div style="width:auto;height:200px"> 
<ul id="mainmenu"> 
<li><a href="#">Home</a></li> 

<li><a href="#">Products</a> 
    <ul class="sub1"> 
     <li><a href="#">Clothing</a> 
      <ul class="sub2"> 
       <li><a href="#">T-Shirts</a> 
        <ul class="sub3"> 
          <li><a href="#">Polo</a></li> 
          <li><a href="#">V-Neck</a></li> 
          <li><a href="#">Henley</a></li> 
        </ul> 
       </li> 
       <li id="submenu_shirts"><a href="#">Shirts</a> 
        <ul class="sub4"> 
          <li><a href="#">Half-Sleeve</a></li> 
          <li><a href="#">Full-Sleeve</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Jeans</a></li> 
       <li><a href="#">Trousers</a></li> 
      </ul> 
     </li> 
     <li id="submenu_shoes"><a href="#">Shoes</a> 
      <ul class="sub5"> 
       <li><a href="#">Sports-Shoes</a></li> 
       <li><a href="#">Formal-Shoes</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Accessories</a></li> 
    </ul> 
</li> 

<li><a href="#">Contact Us</a></li> 
</ul> 

</div> 

<div style="text-align:center"> 
<input type="submit" value="Post" id="submit_button" style="margin:0px auto 0px auto"/> 
</div> 

</form> 

</body> 
</html> 
+0

啊 - 我的壞。我會刪除它。 –

+0

你需要發送什麼參數? –

+1

相關:http://stackoverflow.com/q/23713329/1065197。簡而言之,您不會發送任何參數,因爲您的HTML中沒有發送任何數據的「輸入」或「選擇」標籤組件。 –

回答

1

而不是處理表單導航菜單,你可以只是使用query string和通過URL這樣發送的選定值,

<a href = "URL">Menu name</a> 

對於例如

 <li><a href="/servlets/MyFirstServlet?vName=Jeans">Jeans</a></li> 
     <li><a href="/servlets/MyFirstServlet?vName=Trousers">Trousers</a></li> 

因此,在使用getParameter()方法得到vName變量的值,這樣你的servlet,

 String menuName=request.getParameter("Vname"); 

您也可以通過在你的查詢字符串通過EL動態值。

希望這有助於!

+0

這是一個很好的方法,儘管這樣做... :) – recmach

+0

您可以使用相同的'變量',以便值單獨更改,可以在服務器端檢索 –

1

如果你想提交表單前添加與jQuery的東西,你可以嘗試添加屬性這樣的 -

$("ul#mainmenu").on("click", function (event) { 
    $("#submit_button").prop("disabled", false); 
    var newAttribute = $('<input>').prop('type','hidden') 
            .prop('name','someName') 
            .val('someVal'); 
    $(form).append(newAttribute); 
    $("form").submit(); 
}); 
+0

是的,但我可以從我的導航菜單中添加選定的值並將其發送到我的servlet? – recmach

+0

菜單中沒有表單輸入元素? –

+0

不只是一個表單輸入類型的按鈕來做到這一點...可以這樣做嗎? 或者我應該明確地說明......? 但無論如何如何選擇和發送您的方式使用jQuery從導航菜單中的值? – recmach