這次的教學會不比較不一樣，那就是討厭鬼會提供這次實作的程式碼
各位看倌可以直接在各自的電腦裡看，也會比較清楚程式在幹嘛
那這次的發文也是有鬼友在這個地方比較不清楚
希望各位看完之後會比較了解ajax的運用方式
ajax說簡單也不簡單，說難也不難
因為如果沒有用套件的話，就不簡單(比較麻煩)
有用套件的話就很簡單(套件都幫你做了)
那討厭鬼會的呢~就是用套件了~先求有嘛
所以要用的套件就是JQuery了，這個套件非常的好用、也很強大，請各位多加利用
癈話也就不多說了
就只講jsp的部份
剩下的部份就請各位看倌們看看源碼囉
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<title>查詢縣市</title>
<script type="text/javascript">
function changeCity() {
$("#selArea").html("<option value=''>請選擇</option>");
$("#selTown").html("<option value=''>請選擇</option>");
if ($("#selCity").val() != "") {
$.ajax({
url : '<s:url action="doQueryArea" namespace="/" />',
method : 'POST',
data : {
cityCd:$("#selCity").val()
},
success : function(json) {
for(var i=0;i<json.length;i++){
$("#selArea").append("<option value='"+json[i].id.areaCd+"'>"+json[i].areaName+"</option>");
}
}
});
}
}
function changeArea() {
$("#selTown").html("<option value=''>請選擇</option>");
if ($("#selArea").val() != "") {
$.ajax({
url : '<s:url action="doQueryTown" namespace="/" />',
method : 'POST',
data : {
cityCd:$("#selCity").val(),
areaCd:$("#selArea").val()
},
success : function(json) {
for(var i=0;i<json.length;i++){
$("#selTown").append("<option value='"+json[i].townCd+"'>"+json[i].townName+"</option>");
}
}
});
}
}
</script>
</head>
<body>
<s:select id="selCity" list="cityList" headerValue="請選擇" headerKey="" listKey="cityCd" listValue="cityName" onchange="changeCity();" />
<s:select id="selArea" list="areaList" headerValue="請選擇" headerKey="" onchange="changeArea();" />
<s:select id="selTown" list="townList" headerValue="請選擇" headerKey="" />
</body>
</html>
那這次的範例也是各位常常在網路上看到的縣市下拉選單的程式
這次的重點在於ajax的應用，所以討厭鬼就不講struts2 tag的用法了
然而在上面javascript中的兩個function其實是類似的
所以就只講第一個，絕對不是討厭鬼想要偷懶
$("#selArea").html("<option value=''>請選擇</option>");
$("#selTown").html("<option value=''>請選擇</option>");
這兩行的意思呢~就是將事務所跟鄉鎮市區的下拉選單的選項只剩下"請選擇"
因為當縣市改變時~事務所跟鄉鎮市區也要連動的改變
if ($("#selCity").val() != "")
這個判斷示是說如果在縣市有選擇某個縣市才做
$.ajax({
url : '<s:url action="doQueryArea" namespace="/" />',
method : 'POST',
data : {
cityCd:$("#selCity").val()
},
success : function(json) {
for(var i=0;i<json.length;i++){
$("#selArea").append("<option value='"+json[i].id.areaCd+"'>"+json[i].areaName+"</option>");
}
}
});
url是指要執行ajax的網址
method是指傳遞的方式，也可以用type
data是指要傳到後端的值，在java code的部份要記得設定set&get
success是指成功之後要做的事情
當然有success就會有error，不過在這邊沒有使用
用法跟success一樣。
在這邊要講一下struts2的xml，在下面標記紅色的地方的變數就是success : function(json)裡的json
<action name="doQueryArea" class="cityAction" method="doQueryArea">
<result name="success" type="json">
<param name="root">areaList</param>
</result>
</action>
那這次的教學就到這邊了，剩下的就只能靠各位自己了
那說好的源碼呢?有有有有有
不過要拿到源碼也不是這麼容易就可以run的，討厭鬼會把所有的jar檔拔掉
各位看倌要自己加上去~不管怎樣總要練習一下吧
留言列表
程式教學 (5)