省級聯動(使用ajax實現)

時間 2019-11-08

標籤省級聯動使用 ajax 實現欄目 Ajax 简体版

原文原文鏈接

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

的腳印，歡迎評論！html

有什麼問題，能夠互相探討，但願對各位有所幫助。開始講東西吧java

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

html代碼：ajax

 <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查詢數據庫的代碼：json

1.返回json數據app

/**
     * 收貨地址=>顯示城市下拉框
     */
    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;
}