省級聯動(使用ajax實現)

在博客園學習了很多實用的東西，現在該慢慢開始自己寫寫博客文章， 由於本人水平有限，剛走出校園的小菜鳥，另外，文章在表述和代碼方面如有不妥之處，歡迎批評指正。留下你

的腳印，歡迎評論！

有什么問題，可以互相探討，希望對各位有所幫助。開始講東西吧

一個現實城市下拉框的界面

html代碼：

 <table>
            <tr>
                <td><h5>城市下拉框</h5></td>
                <td>
                    <select id="top" style="width:130px">
                        <option>請選擇省市/其他...</option>
                    </select>
                        <select id="center" style=" width:130px">
                        <option >請選擇城市/其他...</option>
                    </select>
                        <select id="button" style=" width:130px">
                        <option>請選擇縣/區...</option>
                        </select>
                </td>
            </tr>
</table>

js代碼：我這里使用的jquery操作Dom和ajax，所以要導入jquery腳本，這里就不提供了，到官方網站下載都有

<script type="text/javascript">
    $(function() {
        // setCity("top", "0");//頁面加載時就現實數據庫第一個數據，一定要加上
        setCity("top", "0");
        $("#top").change(function() {
            // 當省級改變的時候，讓市級和縣級文本清空
            $("#center option").remove();
            $("#button option").remove();
             //獲得省級的id
            var pid=$("#top option:selected").attr("id");
             //加載該省級的市級數據
            setCity("center", pid);
        });
        $("#center").change(function() {
             //當市級改變的時候，讓縣級文本清空
             $("#button option").remove();
            //獲取城市的pid
            var pid=$("#center option:selected").attr("id");
            //加載該省市級的縣級數據
            setCity("button",pid );
        });
    });
    //selectid:select標簽的id，pid數據庫省級縣級的pid
    function setCity(selectid, pid) {
        $.ajax({
            url : "/code_20150406(Ajax_XStream_Json)/CtiyServlet?pid="+pid,
            type : "get",
            cache : false,
            success : function(res) {
                //注意!!!這里必須使用eval(res)函數，否則獲取到的json數據無法遍歷,無話獲取到數據
                var arr = eval(res);
                //遍歷返回的json數據加載到select標簽;
                $.each(arr, function(key, val) {
                    $("#" + selectid).append(
                            " <option id='" + val.tb_AreaId + "'>"
                                    + val.areaName + "</option>");
                });
            }
        });
    };
</script>

 

Servlet查詢數據庫的代碼：

1.返回json數據

/**
     * 收貨地址=>顯示城市下拉框
     */
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=UTF-8");
        //獲取省級或市級的pid
        int i = Integer.valueOf(request.getParameter("pid"));
        //查詢數據庫數據（我這里是使用是DbUtils獲取數據數據，這里可以自身使用的框架來查詢數據）
        List<tb_Area> list = dao.getbyAreaid(i);
        //返回json數據:這里返回的一個JavaBBean的List集合，所以要使用JSONArray.fromObject(list)來轉換json數據
        response.getWriter().print(JSONArray.fromObject(list));
    }

2.javabean代碼

public class tb_Area {
    private Integer tb_AreaId;
    private String areaName;
    public Integer getTb_AreaId() {
        return tb_AreaId;
    }
    public void setTb_AreaId(Integer tb_AreaId) {
        this.tb_AreaId = tb_AreaId;
    }
    public String getAreaName() {
        return areaName;
    }
    public tb_Area() {
    }
    @Override
    public String toString() {
        return "tb_Area [tb_AreaId=" + tb_AreaId + ", areaName=" + areaName
                + ", areaPid=" + areaPid + "]";
    }
    public void setAreaName(String areaName) {
        this.areaName = areaName;
    }
    public Integer getAreaPid() {
        return areaPid;
    }
    public void setAreaPid(Integer areaPid) {
        this.areaPid = areaPid;
    }
    private Integer areaPid;
}

 

數據庫

http://pan.baidu.com/s/1gdw1Osj點擊鏈接下載，這里是txt文件，導入數據庫是用的是逗號分隔符，注意數據庫子字段的命名即如圖

運行下成功頁面

好了 ，搞定了，要是有什么問題歡迎評論！！！