欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-09 21:47:12
通常前端页面发送ajax请求,我们只需要返回json格式数据就行1.在pom.xml加入依赖 2.5.4

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

1.在pom.xml加入依赖

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

<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中配置

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

<!-- 两个标准配置 -->
	  <!-- 将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数据

ssm框架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)

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

5.前端接收数据并解析

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

渲染界面

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

<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发送多个参数

发送

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

接收

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

到此这篇关于ssm框架controller层返回json格式数据到页面的实现的文章就介绍到这了,更多相关ssm controller返回json内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!