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

通常前端页面发送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+=""+
			""+data[i].empId+""+
			""+data[i].empName+""+
			""+data[i].gender+""+
			""+data[i].email+""+
			""+data[i].dId+""+
			"";
	}
	$("tbody").html(str)
	
	//下面这两种加上没有样式
	/*  for(var i=0;i");
		tr.append(""+data[i].empId+"");
		tr.append(""+data[i].empName+"");
		tr.append(""+data[i].gender+"");
		tr.append(""+data[i].email+"");
		tr.append(""+data[i].dId+""); 
	}  */
	/* $.each(data,function(i,data){
		var tr=$("tbody").append("");
		tr.append(""+data.empId+"");
		tr.append(""+data.empName+"");
		tr.append(""+data.gender+"");
		tr.append(""+data.email+"");
		tr.append(""+data.dId+"");
	}) */
}
</script>

ajax发送多个参数

发送
接收