這次的教學會不比較不一樣,那就是討厭鬼會提供這次實作的程式碼

各位看倌可以直接在各自的電腦裡看,也會比較清楚程式在幹嘛

 

那這次的發文也是有鬼友在這個地方比較不清楚

希望各位看完之後會比較了解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檔拔掉

各位看倌要自己加上去~不管怎樣總要練習一下吧

 

下載完整源碼~請點我(壓縮檔為eclipse的專案,裡面包含上述用到的mySql的資料)~

arrow
arrow
    全站熱搜

    討厭鬼 發表在 痞客邦 留言(1) 人氣()