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

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

1.在pom.xml加入依赖

在这里插入图片描述

2.5.4

com.fasterxml.jackson.core

jackson-core

${jackson.version}

com.fasterxml.jackson.core

jackson-databind

${jackson.version}

2.dispatcherServlet-servlet.xml中配置

在这里插入图片描述

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

在这里插入图片描述

@Controller

public class EmployeeController {

// 查询所有员工

@Autowired

EmployeeService employeeService;

@RequestMapping("emps")

@ResponseBody

public List getEmps() {

List emps=employeeService.getAll();

System.out.println("emps "+emps.size());

return emps;

}

}

4.测试(使用postman)

在这里插入图片描述

5.前端接收数据并解析

在这里插入图片描述

渲染界面

在这里插入图片描述

$(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

str+="

"+

"

"+data[i].empId+""+

"

"+data[i].empName+""+

"

"+data[i].gender+""+

"

"+data[i].email+""+

"

"+data[i].dId+""+

"

";

}

$("tbody").html(str)

//下面这两种加上没有样式

/* for(var i=0;i

var tr=$("tbody").append("

");

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+"");

}) */

}

ajax发送多个参数

发送

在这里插入图片描述

接收

在这里插入图片描述