2014-02-20 163 views
1

加載上的價值選擇從數據庫中的名單上有2下拉我的web page.A國家名單和省列表清單。 當頁面加載,我的國家列表是從數據庫填充,然後從列表中選擇一個國家的選擇,該國省清單還應從數據庫填充。從另一個列表中

(我使用Hibernate逆向工程來創建數據庫連接文件和bean類等)

我在做什麼是填充國名單後,我得到這個國家的價值使用jQuery腳本選擇,然後將它傳遞通過使用ajax的url到控制器類。我將在下面附上。

我所面臨的問題是,當我從國家列表中選擇,而不是填充兩個下拉框再次印刷和全省列表框爲空全省名單的國家。

這裏是我的JSP文件

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<%@page contentType="text/html" pageEncoding="UTF-8"%> 

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Selection Page</title> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> 

</head> 
<body> 
    <form name="locationSelection" method="POST"> 

    Select Country: 
     <br> 
     <select name="countryList" id="countryList"> 
      <option value="">Select Country</option> 
      <c:if test="${!empty countryList}"> 
       <c:forEach items="${countryList}" var="cont"> 
        <option value=${cont.countryId}>${cont.countryName}</option> 
       </c:forEach> 
      </c:if> 
     </select> 
     <br><br> 

     <script> 
     $(document).ready(function() 
     { 
      $("#countryList").change(function() 
      { 
       var selectedValue = $(this).find(":selected").val(); 
       $.ajax 
       ({ 
        url : "a.html?cID="+selectedValue+'', 
        success : function(result) 
        { 
         $("#prvContatiner").html(result); 
        } 
       }); 
      }); 
     }); 
     </script> 

     Select Province: 
     <div id="prvContatiner"> 
      <select name="provinceList" id="provinceList"> 
       <option value="">Select Province</option> 
         <c:if test="${!empty provinceList}"> 
       <c:forEach items="${provinceList}" var="cont"> 
        <option value=${cont.provinceId}>${cont.provinceDesc}</option> 
       </c:forEach> 
      </c:if> 
     </select> 
      </select> 
     </div> 

    </form> 
</body> 

,這裏是我的控制器Java類

package controller; 

import java.io.IOException; 
import java.util.List; 
import javax.servlet.RequestDispatcher; 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 

import dao.TblCountryDAO; 
import dao.TblProvinceDAO; 

@SuppressWarnings("serial") 
public class SelectionController extends HttpServlet { 
    void ProcessorRequest(HttpServletRequest request, 
      HttpServletResponse response) throws ServletException, IOException { 

     String operation = request.getParameter("op"); 
     System.out.println("Operation: "+operation); 
     String cID = request.getParameter("cId"); 
     if (cID == null) 
     { 
      System.out.println(request.getRequestURI()); 
      TblCountryDAO dao = new TblCountryDAO(); 
      List<?> countryList = dao.findAll(); 
      request.setAttribute("countryList", countryList); 
      RequestDispatcher reqDispatcher = request.getRequestDispatcher("main.jsp"); 
      reqDispatcher.forward(request, response); 
     } 
     else 
     { 
      System.out.println("in elseif"); 

      TblProvinceDAO dao = new TblProvinceDAO(); 
      List<?> provinceList = dao.findByProperty("tblCountry.countryId", Integer.parseInt(cID)); 
      request.setAttribute("provinceList", provinceList); 
      RequestDispatcher reqDispatcher = request.getRequestDispatcher("main.jsp"); 
      reqDispatcher.forward(request, response); 
     } 
    } 

    @Override 
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) 
    throws ServletException, IOException { 
     ProcessorRequest(req, resp); 
    } 

    @Override 
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) 
    throws ServletException, IOException { 
     ProcessorRequest(req, resp); 
    } 
} 

我附上web.xml文件,以防萬一

<?xml version="1.0" encoding="UTF-8"?> 
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"> 
    <display-name></display-name> 
    <servlet> 
     <servlet-name>dispatcher</servlet-name> 
     <servlet-class>controller.SelectionController</servlet-class> 
    </servlet> 

    <servlet-mapping> 
     <servlet-name>dispatcher</servlet-name> 
     <url-pattern>/a.html</url-pattern> 
    </servlet-mapping> 

    <welcome-file-list> 
     <welcome-file>index.jsp</welcome-file> 
    </welcome-file-list> 
</web-app> 

任何其他建議做任務也將不勝感激

+0

如果您使用的鍍鉻按'F12'並單擊Network'標籤',然後選擇下拉菜單,這將觸發請求,您可以看到它的迴應! – Yogesh

+0

我已經檢查過它。國家的名單出現在全國correctly.every別的東西選擇的地方是相同的,在全省塊 –

+0

實際上它不是在控制器類else塊去沒有變化。我已經通過打印結果檢查了省份列表,並且列表返回正常。但問題是如何讓它進入else塊。 –

回答

1

你正在尋找錯誤的參數request.getParameter("cId");應該request.getParameter("cID");使用cId將返回null值是,你會響應得到main.jsp中

+0

我糾正了它,但問題仍然是一樣的。 –

+0

嘗試重建和部署代碼可能你的變化沒有被反映出來 – Yogesh

+0

哦,太棒了。一個問題解決了,但額外的國家框和省箱仍保持出現 –

0

我想你可以切換到另一種方式來實現用JSON

在你得到省列表中的控制器來完成相同的任務。使用任何JSON庫的諸如谷歌GSON或json.org並將其轉換成對象的JSON數組這樣

[{ 
"id":1, 
"name":"Delhi" 
},{ 
... 
... 
}, 
... 
] 

,並直接使用的PrintWriter打印JSON數組。

,然後在阿賈克斯成功響應產生這樣的選項 -

$.ajax 
       ({ 
        url : "a.html?cID="+selectedValue+'', 
        success : function(result) 
        { 
         $("#provinceList").html(''); 
         for(var i=0;i<result.size;i++){ 
          var option = '<option value="'+result[i].id+'">'+result[i].name+'</option>' 
          $("#provinceList").append(option); 
         } 
        } 
       });