ajax遍历json数据（实现迭代效果），显示在网页

最新推荐文章于 2023-02-23 14:24:52 发布

彼岸花_C

最新推荐文章于 2023-02-23 14:24:52 发布

阅读量3.8k

点赞数 2

分类专栏： JAVA 文章标签： ajax json 遍历

本文链接：https://blog.csdn.net/Bianhua_c/article/details/78628140

版权

JAVA 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Dao层：查询全部用户

//查询所有用户
	public List<UserBean> findAllModel() {
		// TODO Auto-generated method stub
		return (List<UserBean>) hibernateTemplate.find("from UserBean");
	}

Action中

package org.hp.action;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.hp.dao.UserDao;
import com.opensymphony.xwork2.ActionSupport;

public class ApiAction extends ActionSupport {
	private String name;
	private UserDao userDao;
	private Map map;
	public Map getMap() {
		return map;
	}
	public void setMap(Map map) {
		this.map = map;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public void setUserDao(UserDao userDao) {
		this.userDao = userDao;
	}
	
	public String showAll() {
		map = new HashMap<>();
		List list = userDao.findAllModel();
		map.put( "listuser",list);
		return SUCCESS;
	}
}

Struts2配置文件

<package name="jsonapi" namespace="/api" extends="json-default">	
	<action name="apiAllUser" class="apiAction" method="showAll">
		<result name="success" type="json">
			<param name="root">map</param>
		</result>
	</action>
</package>

jsp页面（for方式遍历）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ShowAll</title>
<script type="text/javascript" src="res/jquery.min.js"></script>
 <style type="text/css">
		#tbStu tr td {
		 border: solid 1px #ff9d3c;
		}
        .trji{
            background-color: #9ab7ff;
        }
        .trOdd{
            background-color: #9fffc1;
        }
	</style>
</head>
<body οnlοad="getAllUser()">
<form action="">
		<table id ="tbStu">
			<!-- <tr>
				<td>序号</td>
				<td>名字</td>
				<td>密码</td>
				<td>删除操作</td>
				<td>修改操作</td>
			</tr> -->
			<tr id="bList"></tr>
			<!-- 迭代遍历 -->
			<%-- <s:iterator value="list" var="thisList">
    		<tr>
    			<td>${thisList.id}</td>
    			<td>${thisList.name}</td>
    			<td>${thisList.pwd}</td>
    			<td><a href="deleteUserAction?id=${thisList.id}">删除</a></td>
    			<td><a href="getUserIdAction?id=${thisList.id}">修改</a></td>
    		</tr>
    	</s:iterator> --%>
		</table>
	</form>
</body>
<script type="text/javascript">
   function getAllUser(){
	   
	   $.ajax({
		   type:"POST",
		   url:"api/apiAllUser",//服务器成功返回结果后，会把结果保存到data中
		   success:function(list){
			   //先把表体部分清空 
			   $("#bList").empty();
			   //eval获取返回的JSON对象集合
			   var d = list.listuser;
			   //拼接表头
			   var thead = "<tr><td>" + "序号"+ "</td><td>" + "账号" + "</td><td>" + "密码" 
			   + "</td><td>" + "删除" + "</td><td>"+ "修改" + "</td></tr>";
               $("#bList").append(thead);
               //把数据显示到页面的方法  
			   showData(d);
			   
		   } 
	   });
	   
	   function showData(d){ 
		   for(var i = 0;i<d.length;i++){
			   //循环遍历一边d  
			   var html = "<tr><td>" + d[i].id + 
			              "</td><td>"+ d[i].name + 
			              "</td><td>" + d[i].pwd +
			              "</td><td><a href='deleteUserAction?id="+d[i].id+"'>" + "删除" +"</a></td>"+
			              "<td><a href='getUserIdAction?id="+d[i].id+"'>" + "修改" + "</a></td></tr>";  
			 //通过表体id把显示文本显示到网页中
               $("#bList").append(html);  
		   }
		   /* 隔行变色 */
		   $("#tbStu tr").addClass("trji");
		   $("#tbStu tr:even").addClass("trOdd"); 
	 }
   }
   </script>
</html>

另附一个each遍历的方法

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>success.jsp</title>
<script type="text/javascript" src="res/jquery.min.js"></script>
<script type="text/javascript">
	function getAllUser() {
		
		 $.ajax({
			type : "POST",
			url : "getAllUser",
			dataType:"json",
			success : function(msg) {
				 $.each(msg, function (index, item) {  
					 $("#list").html($("#list").html() + 
						"<tr><td>"+item.id+"</td>"+
						"<td>"+item.username+"</td>"+
					        "<td>"+item.password+"</td>"+
						"<td><a href='getUserIdAction?id="+item.id+"'>"+"修改"+"</a></td></tr>");
				 });
			}
		});  
	}
</script>
</head>
<body οnlοad="getAllUser()">
    <table cellpadding="0" cellspacing="0" border="1">
        <tr>
            <th>id</th>
            <th>账号</th>
            <th>密码</th>
            <th>修改</th>
        </tr>
        <tbody id="list"></tbody>
    </table>
   </body>
</html>

彼岸花_C

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
ajax遍历json数据（实现迭代效果），显示在网页

Dao层：查询全部用户//查询所有用户 public List findAllModel() { // TODO Auto-generated method stub return (List) hibernateTemplate.find("from UserBean"); }Action中package org.hp.action;import java.util.
复制链接

扫一扫