服务器之家

服务器之家 > 正文

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

时间:2020-09-07 00:10     来源/作者:时光斑驳了记忆

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

1.在pom.xml加入依赖

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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格式数据到页面的实现

?
1
2
3
4
5
6
7
8
9
<!-- 两个标准配置 -->
      <!-- 将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格式数据到页面的实现

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@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格式数据到页面的实现

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<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内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家!

原文链接:https://blog.csdn.net/qq_41150890/article/details/108423328

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享 2020-04-07
最新idea2020注册码永久激活(激活到2100年)
最新idea2020注册码永久激活(激活到2100年) 2020-07-29
电视剧《琉璃》全集在线观看 琉璃美人煞1-59集免费观看地址
电视剧《琉璃》全集在线观看 琉璃美人煞1-59集免费观看地址 2020-08-12
返回顶部