struts2中用jquery、ajax实现下拉框的级联

qubianzhong

发布于 2018-08-10 16:37:06

1.7K0

发布于 2018-08-10 16:37:06

文章被收录于专栏：行者常至行者常至

–这是刚学会的一个，从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; 
    }