1. 程式人生 > >struts2中用jquery、ajax實現下拉框的級聯

struts2中用jquery、ajax實現下拉框的級聯

–這是剛學會的一個,從action中傳出json型別資料的字串,然後通過ajax再把字串解析出json物件。下面是大致的步驟。

1、post.jsp頁面

  • 在js中加入函式程式碼
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
......
<script language="javascript">
    ......
    function selectJd(){
        var qxid = $("#qx_select").val();
        $.get("post_postajax"
,{"qxid":qxid},function(data){ var json = JSON.parse(data);//parse用於從一個字串中解析出json物件 $('#jd_select').empty(); for(var i=0;i<json.length;i++){ var s = json[i]; $('#jd_select').append("<option value="+s.jdid+">"+s.jd+"</option>"
); } }); } ......
</script>
  • 在html中加入以下程式碼
        <tr>

            <td><strong>區縣:</strong></td>
            <td><select name="qxid" id="qx_select"
                onchange="selectJd();">
                    <c:forEach
items="${qxlist }" var="qx">
<!--此處的qxlist是從上一個action轉到post.jsp時,傳過來的,從資料庫中查詢得出的一個集合。這個集合中的元素為TBL_QX這個類,其中包含qxid(int型別,如:0),qx(字串,如:北京)--> <option value='${qx.qxid }'>${qx.qx }</option> </c:forEach> </select></td> </tr> <tr> <td><strong>街道:</strong></td> <td><select name="fw.jdid" id="jd_select" onChange="selectjd()"> </select></td> </tr>

2、在struts.xml中的配置

這裡寫圖片描述
- 這個地方不新增任何東西,因為我是用的萬用字元,所以,我在PostAction.java 類中增加了一個postajax()方法(你的方法名叫什麼都可以,但是,在post.jsp中js的$.get(“post_postajax“,{“qxid”:qxid},function(data){)。要和這個方法名一致,才能通過struts.xml中的路徑去執行相應的方法。

3、PostAction.java中的postajax方法

    public HttpServletResponse getResponse() {
        return ServletActionContext.getResponse();
    }

    public String postajax() throws IOException{

        int qx_select = Integer.parseInt(qxid);
        ArrayList<TBL_JD> jdlist = tjd.selectJdByQx(qx_select);
        /*本來想用request.getParameter("qxid")來獲取的,但是看到位址列裡qxid傳過去值了,所以,就直接獲得qxid就好了,用get方法*/
        JSONArray json = JSONArray.fromObject(jdlist);//將ArrayList物件轉換成json型別資料
        result = json.toString();//給result賦值,傳遞給頁面
        System.out.println(result);
        getResponse().setCharacterEncoding("UTF-8");
        PrintWriter out = getResponse().getWriter();
        out.write(result);
        return null; 
    }

4、資料庫表

  • TBL_QX表
    這裡寫圖片描述
  • TBL_JD表
    這裡寫圖片描述