Javascript/jQuery到Servlet的通信

Question

我正在尋找這個更早，並有點困惑的答案我得到了周圍，所以我覺得寫一個完整的代碼。這是爲了我未來的工作，我希望有人從中受益。

請參閱下面的答案。

Answer 1

這可以通過js和jquery來解決。但由於jquery更簡單，所以我只是要爲它編寫代碼。在這種情況下我會在HTML/JSP頁面的選擇而變化的Ajax調用

Jsp頁面看起來像這樣

<select class="target1"> 
    <option >Select type</option> 
    <option >computer</option> 
    <option >camera</option> 
    <option >sound System</option> 
    <option >battery</option> 
</select> 

<select class="target2"> 
    <option >Select type</option> 
</select> 

這裏從目標1選擇我要顯示在TARGET2選擇另一個列表。爲此，jquery函數如下所示

$('.target1').change(function() { 
    $.ajax({ 
     $('.target2').empty(); 
     url: 'http://localhost:8080/YourAppName/ServletName', 
     data: {selectedValue: $(this).val()}, 
     success: function(response) { 
      $('.target2').append(response); 
     } 
    }); 
}); 

在這裏，我指向target1，並在內部進行ajax調用。最初我讓target2選擇爲空。然後通過url調用servlet並使用data傳遞值。如果成功我只是附加的結果在TARGET2選擇

在ServletName（servlet的）

我寫了下面的代碼：

protected void processRequest(HttpServletRequest request, HttpServletResponse response) 
      throws ServletException, IOException { 


     String selectedItem = request.getParameter("selectedValue"); 


     productList = connDB.getProduct(query); 

     response.setContentType("text/html;charset=UTF-8"); 
     PrintWriter out = response.getWriter(); 
     try { 
      if(selectedItem == (Your Condition)){ 
        out.println("<option >1</option>"); 
        out.println("<option >2</option>"); 
        out.println("<option >3</option>"); 
        out.println("<option >4</option>"); 
      }else{} 


     } finally {    
      out.close(); 
     } 
    } 

執行此代碼，你應該在選擇獲取後target2

1 
2 
3 
4 

正如你現在可以理解的，你可以自定義它，無論如何你想要的。