JWorld@TW the best professional Java site in Taiwan
      註冊 | 登入 | 全文檢索 | 排行榜  

» JWorld@TW » Servlet/JSP 討論區  

按列印兼容模式列印這個話題 列印話題    把這個話題寄給朋友 寄給朋友   
reply to postflat modego to previous topicgo to next topic
本主題所含的標籤
作者 如何造 - JSP動態下拉式選單JSON 版
roytsang





發文: 619
積分: 1
於 2019-04-04 15:39 user profilesend a private message to userreply to postreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
首先介紹一下什麼是動態下拉式選單, 說穿了就是user 在第一個下拉式選單點了選項之後,
第二個選單的內容跟隨著user在第一個選單所點選的東西而改變

先看一下程式流程:
1)user 在第一個下拉式選單點了選項之後
2)trigger 了onchange event
3)然後在event handler 裡面讀取user 所選的值
4)用ajax 將value 丟去server side 程式
5)server side 程式讀取value,從database 選取相應的資料
6)將資料以JSON 格式送回給client side
7)client side 將從收到JSON裡面讀取想要的資料,從而改變第二個選單的內容

好像有點抽象,不緊要先看看client side 的程式碼吧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<html>
  <head>
    <META charset="UTF8">
  <title>JSP動態下拉式選單示範 - JSON版</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script language=javascript>
      function updateData(v)
      {
        var value=v.options[v.selectedIndex].value;
       
        if (value!="")
        {
          jQuery.post("getJSONResult.jsp",
                       {type:value},
                        updateNumber,
                      "json"); //<=這裡設定了server side傳回來的回應是JSON 格式
        }
      }
      function updateNumber(resultList)
      {
         $("#number").empty(); //把'數字' drop down box 清空  
         var numberBox=$("#number");
         resultList.forEach(function(numberObj){    //逐一讀出number object
         option=new Option(numberObj.text,numberObj.value); //創建選項物件 
         numberBox.append(option);  //將選項物件加到'數字' drop down box
    });
      }
    </script>
  </head>
  <body>
    <h1>JSP動態下拉式選單示範 - JSON版</h1>
    數字類型
    <select id=type name="type" onchange="updateData(this)">
      <option value="">請選擇</option>
      <option value="1">單數</option>
      <option value="0">雙數</option>
    </select>
    數字
    <select id="number" name="number">
    </select>
  </body>
</html>


這個示範程式是當user 在第一個選單選數字類型之後,在第二個選單顯示相應數字。
之前提過AJAX, 有關介紹可以上網找一下就會有好多很好的介紹,我不在此贅述了,
主要是在不refresh 版面情況向server side submit request並收回server side 的回應,這次我用
了jQuery這個javascript lib. 來幫我處理一些事情,如改變 ui 和ajax, 因為她可以幫我處理
不同browser 不兼容的情況,現在做web application 真是要用這些lib. 為我們省下不少時間。
要引用jQuery lib,最好要在<head></head> 加入這句
1
<script src="http://code.jquery.com/jquery-latest.js"></script>


如果您已經download了jquery lib., 您就要改成這樣
1
<script src="Path to your jquery .js file"></script>


之前提過什麼onchange event, 什麼event handler,大家可以看看第32行,
1
<select id=type name="type" onchange="updateData(this)">


這句意思是create 一個選單,當user 點了選項之後(即onchange event),就call updateData
,而updateData 這個function 就是所謂event handler,至於這個parameter 'this',
即是將這個選單 object 交給這個function,
透過以下的code 讀取user 選了什麼
1
var value=v.options[v.selectedIndex].value;


此處v 為代表第一個選單物件

最後,用jQuery.post 這個function 將資料送到server side 去,
根據jQuery 這裡說:

1
2
3
4
jQuery.post("getJSONResult.jsp",
                       {type:value},
                        updateNumber,
                      "json"); 

jQuery.post 的
第一個參數是server side 程式/page 的名稱
第二個參數是丟去server side 的name,value mapping
第三個參數是處理server side response 的function 名稱
第四參數就是"通知"jQuery server side 傳回來的回應是什麼格式,所以在第16行,
加了"json"這個參數。
因為用post method沒有資料長度限制,其實用get method 也可以的Smile

再來看一看server side 的程式碼(getJSONResult.jsp)吧:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<%@ page trimDirectiveWhitespaces="true" %>
<%@ page language="java" contentType="application/json; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.fasterxml.jackson.databind.ObjectMapper"%>
<%@ page import="java.util.*"%>
<%!
  private class Number
  {
    public String text=new String();
    public int value=0;
    
    public Number(String t,int v)
    {
      value=v;
      text=t;
    }
  }
%>
<%
Number number;
ArrayList<Number>numberList;
ObjectMapper objectMapper = new ObjectMapper();
TreeMap<String,ArrayList<Number>>typeList=new TreeMap<String,ArrayList<Number>>();
 
numberList=new ArrayList<Number>();
number=new Number("一",1);
numberList.add(number);
 
number=new Number("三",3);
numberList.add(number);
 
number=new Number("五",5);
numberList.add(number);
 
number=new Number("七",7);
numberList.add(number);
 
typeList.put("1",numberList);
 
numberList=new ArrayList<Number>();
number=new Number("二",2);
numberList.add(number);
number=new Number("四",4);
numberList.add(number);
 
number=new Number("六",6);
numberList.add(number);
 
number=new Number("八",8);
numberList.add(number);
 
typeList.put("0",numberList);
String type=request.getParameter("type");
if (type!=null)
{
  out.println(objectMapper.writeValueAsString(typeList.get(type)));
}
%>


JSP code 解說:
第1行:
1
<%@ page trimDirectiveWhitespaces="true" %>

預設情況下每一行JSP 程式碼會輸出一行空行到browser,trimDirectiveWhitespaces="true" 這個設定就是禁止將每一行JSP 程式碼會輸出一行空行到browser

第2行:
1
<%@ page language="java" contentType="application/json; charset=UTF-8" pageEncoding="UTF-8"%>

設定輸出格式為JSON ,
設定輸出編碼為UTF-8

第3,4行都是引用相關的object。
網上可以找到很多將Java object 轉換成JSON 的framework,今次我使用了Jackson framework,不過這個framework,
要另外下載或者透過Maven 來下載,然後安裝在class path 中。

第5行至17行就是定義一個Number object,而這個object 有兩個attribute 一個叫text,另一個叫value。
1
2
3
4
5
6
7
8
9
10
11
12
13
<%!
  private class Number
  {
    public String text=new String();
    public int value=0;
    
    public Number(String t,int v)
    {
      value=v;
      text=t;
    }
  }
%>

第21行就是 instantiate 一個ObjectMapper 物件備用。
1
ObjectMapper objectMapper = new ObjectMapper();

第22至51行就是instantiate 一個treemap ,而這個treemap 裡面有兩套Number 物件,一套是單數,另一套是雙數。
第52行就是讀取client side 傳過來的parameter。
1
String type=request.getParameter("type");

第55行就是用ObjectMapper 物件將相應的一套Number 物件轉換成JSON 格式,然後送到client side
1
out.println(objectMapper.writeValueAsString(typeList.get(type)));

現在說回client side 的程式碼,由於在第16行已經"通知"jQuery server side 傳回來的回應是json格式,
所以,jQuery已經為我們parse 了server side傳回來的json 格式資料,第22 行至25 行程式碼就是逐一
讀取已經整理好的資料,然後改變第二個選單的內容。

如何造 - JSP動態下拉式選單JSON 版,大概就是這樣,希望大家喜歡。


roytsang edited on 2019-05-07 13:55
reply to postreply to post
話題樹型展開
人氣 標題 作者 字數 發文時間
215 如何造 - JSP動態下拉式選單JSON 版 roytsang 5826 2019-04-04 15:39
» JWorld@TW »  Servlet/JSP 討論區

reply to postflat modego to previous topicgo to next topic
  已讀文章
  新的文章
  被刪除的文章
Jump to the top of page

JWorld@TW 本站商標資訊

Powered by Powerful JuteForum® Version Jute 1.5.8