jquery ajax获得list并显示

来源：互联网发布：求职app 知乎编辑：程序博客网时间：2024/06/04 01:29

1.如图(点击左边的列时右边会及时出现详细信息)

2.前台代码）(左边的list，红色部分传id到后台得到右边的list)

<span style="color:#000099;"> <table width="100%" cellpadding="0" cellspacing="0" class="tablel2" style=" margin-top: 0px;">    <thead id="listTitle" >      <tr class="tittle_bg">        <td name="">序号</td>        <td name="">选择</td>        <td name="">办牌方式</td>        <td name="">办牌地点</td>        <td  name="">代办性质</td>        <td  name="">创建日期</td>        </tr>    </thead>    <tbody id="listDatas" >    <c:forEach items="${cafslist}" var="item">    <tr onclick="</span><span style="color:#ff0000;">selectRow1(${item.CWFS_ID})</span><span style="color:#000099;">"><td align="center">${item.CWFS_ID}</td>        <td align="center"><input type="checkbox" name="checkbox" id="checkbox"></td>        <td align="center">${item.BPDD}</td>        <td align="center">${item.SPDD}</td>        <td align="center">        <c:if test="${item.DBXZ=='0'}">代办</c:if>       <c:if test="${item.DBXZ=='1'}">外包</c:if>        </td>        <td align="center">${item.CDATE}</td>      </tr></c:forEach>    <!--       <tr>        <td align="center">1</td>        <td align="center"><input type="checkbox" name="checkbox" id="checkbox"></td>        <td align="center">广州</td>        <td align="center">代办</td>        <td align="center">2010/03/02</td>        <td align="center"> </td>        </tr>     -->    </tbody>  </table></span>

3.js代码

<span style="color:#000099;">function selectRow1(ID){$.ajax({     url:"</span><span style="color:#ff0000;">${ctx}/license/licensePlateProjectAction!getDetail2.action</span><span style="color:#000099;">",     type:"post",     dataType:"json",     data:{CWFS_ID:ID},  //cwfyxm   success:function(json){          if(json){        var res = [];         var num=1;      jQuery.each(json.fylist, function(i,item){      res.push('<tr>');        res.push('<td align="center" >' + num + '</td>');        res.push('<td align="center" >' + item.CWFYXM + '</td>');        res.push('<td align="center" >' + item.CWFY + '</td>');      res.push('</tr>');      num++;      });    $("#fylistDatas").empty().html(res.join(""));           }   }}); }</span>

4.java代码(这里得到的list要存在map里，再变成json输出到前段)

/** * 异步方法：得到list */public void getDetail2() {//前台传来的idString CWFS_ID = request.getParameter("CWFS_ID");List<Map<Object, Object>> fylist = null;List<Object> params = new ArrayList<Object>();        Map<String,Object> res = new HashMap<String,Object>();StringBuffer fylistSql = new StringBuffer();try {this.beginSession();//select cwfyxm,cwfy from t_ca_cwfsmx where cwfs_id=fylistSql.append(" select * from t_ca_cwfsmx where cwfs_id= "+ CWFS_ID);fylist = this.queryAll(fylistSql.toString());res.put("fylist", fylist);Struts2Utils.renderJson(res);} catch (Exception e) {e.printStackTrace();} finally {this.close();}}

5.右边html

 <tbody id="fylistDatas" > </tbody >

0 0