jquery ajax获得list并显示

最新推荐文章于 2021-08-06 09:34:45 发布

原创最新推荐文章于 2021-08-06 09:34:45 发布 · 7k 阅读

4 ·

CC 4.0 BY-SA版权

java 同时被 3 个专栏收录

28 篇文章

订阅专栏

json

5 篇文章

订阅专栏

ajax

5 篇文章

订阅专栏

本文展示了如何在前端通过点击事件触发请求获取后台数据，并在页面上展示详细信息的过程。包括HTML模板设计、JavaScript事件处理、以及后端Java代码实现，涉及数据的获取、处理和展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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() {
		//前台传来的id
		String 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 >