ssm框架controller层返回json格式数据到页面的实现

所属分类: 软件编程 / java 阅读数: 54
收藏 0 赞 0 分享

通常前端页面发送ajax请求,我们只需要返回json格式数据就行

1.在pom.xml加入依赖

<properties>
  <jackson.version>2.5.4</jackson.version>
 </properties>
 <dependencies> 
 <!-- controller返回json -->
 <dependency>
   <groupId>com.fasterxml.jackson.core</groupId>
   <artifactId>jackson-core</artifactId>
   <version>${jackson.version}</version>
  </dependency>
  
  <dependency>
   <groupId>com.fasterxml.jackson.core</groupId>
   <artifactId>jackson-databind</artifactId>
   <version>${jackson.version}</version>
  </dependency>

2.dispatcherServlet-servlet.xml中配置

<!-- 两个标准配置 -->
	  <!-- 将springmvc 不能处理的请求交给tomcat 例如静态资源 -->
	  <mvc:default-servlet-handler/>
	  <mvc:annotation-driven>
	  <mvc:message-converters>
	     <bean class="org.springframework.http.converter.StringHttpMessageConverter"/>
	     <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"/>
	  </mvc:message-converters>
	 	</mvc:annotation-driven>

3.在controller中获取返回的json数据

@Controller
public class EmployeeController {
	
//	查询所有员工
	@Autowired
	EmployeeService employeeService;

	@RequestMapping("emps")
	@ResponseBody
	public List<Employee> getEmps() {
		List<Employee> emps=employeeService.getAll();
		System.out.println("emps "+emps.size());
		return emps;
	}		
}

4.测试(使用postman)

5.前端接收数据并解析

渲染界面

<script>
$(document).ready(function(){
	$(function(){
		$.ajax({
			url:"empsJson",
			data:"pn=1",
			type:"get",
			success:function(data){
				//获取controller传来的json数据
				//alert(data[0].empId);
				//alert(data.length)
				empInfo(data);
			}
		})
	})
})
function empInfo(data){
	var str="";
	for(var i=0;i<data.length;i++){
		str+="<tr>"+
			"<td>"+data[i].empId+"</td>"+
			"<td>"+data[i].empName+"</td>"+
			"<td>"+data[i].gender+"</td>"+
			"<td>"+data[i].email+"</td>"+
			"<td>"+data[i].dId+"</td>"+
			"</tr>";
	}
	$("tbody").html(str)
	
	//下面这两种加上没有样式
	/* for(var i=0;i<data.length;i++){
		var tr=$("tbody").append("<tr></tr>");
		tr.append("<td>"+data[i].empId+"</td>");
		tr.append("<td>"+data[i].empName+"</td>");
		tr.append("<td>"+data[i].gender+"</td>");
		tr.append("<td>"+data[i].email+"</td>");
		tr.append("<td>"+data[i].dId+"</td>"); 
	} */
	/* $.each(data,function(i,data){
		var tr=$("tbody").append("<tr></tr>");
		tr.append("<td>"+data.empId+"</td>");
		tr.append("<td>"+data.empName+"</td>");
		tr.append("<td>"+data.gender+"</td>");
		tr.append("<td>"+data.email+"</td>");
		tr.append("<td>"+data.dId+"</td>");
	}) */
}
</script>

ajax发送多个参数

发送

接收

更多精彩内容其他人还在看

详解Spring依赖注入:@Autowired,@Resource和@Inject区别与实现原理

这篇文章主要介绍了详解Spring依赖注入:@Autowired,@Resource和@Inject区别与实现原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

了解spring中的CloudNetflix Hystrix弹性客户端

这篇文章主要介绍了了解spring中的CloudNetflix Hystrix弹性客户端,客户端弹性模式是在远程服务发生错误或表现不佳时保护远程资源(另一个微服务调用或者数据库查询)免于崩溃。,需要的朋友可以参考下
收藏 0 赞 0 分享

Spark学习笔记Spark Streaming的使用

这篇文章主要介绍了Spark学习笔记Spark Streaming的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

通过实例讲解springboot整合WebSocket

这篇文章主要介绍了通过实例讲解springboot整合WebSocket,WebSocket为游览器和服务器提供了双工异步通信的功能,即游览器可以向服务器发送消息,服务器也可以向游览器发送消息。,需要的朋友可以参考下
收藏 0 赞 0 分享

java虚拟机学习笔记进阶篇

在本篇内容里小编给大家分享了关于java虚拟机学习笔记的进阶内容,需要的朋友们跟着学习下。
收藏 0 赞 0 分享

java虚拟机学习高级篇

在本篇文章里小编给大家整理了关于java虚拟机学习高级篇的相关内容,有兴趣的朋友们跟着学习参考下。
收藏 0 赞 0 分享

java虚拟机中多线程总结

在本篇内容中小编给大家分享的是关于java虚拟机中多线程的知识点总结内容,需要的朋友们参考学习下。
收藏 0 赞 0 分享

java虚拟机多线程进阶篇总结

在本篇内容里小编给大家整理了关于java虚拟机多线程进阶篇的相关知识点内容,有兴趣的朋友们跟着参考下。
收藏 0 赞 0 分享

java数据结构和算法中数组的简单入门

在本文里小编给大家整理了关于java数据结构和算法中数组的简单入门知识点整理,需要的朋友们学习下。
收藏 0 赞 0 分享

java数据结构和算法中哈希表知识点详解

在本篇文章里小编给大家分享了关于java数据结构和算法中哈希表的相关知识点内容,需要的朋友们学习下。
收藏 0 赞 0 分享
查看更多