动力节点旗下在线教育品牌  |  咨询热线:400-8080-105 学Java全栈,上蛙课网
首页 > 文章

Spring MVC实现前后端数据交互

08-28 17:40 75浏览
举报 T字号
  • 大字
  • 中字
  • 小字

我们无论是在使用Spring MVC还是其他框架进行前端开发的过程中都会涉及到网页前端与后台数据交互问题。本文我们就拿Spring MVC实现前后端数据交互作为典型来解决此类问题。

Spring MVC实现前后端数据交互的过程中,必不可少地要引入Ajax技术, “Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。使用ajax请求后台数据的格式以及后台作出响应的方式

   请求方式一:必须声明请求方法为POST,设置数据传输的格式

$('#btnSave').click(function(){

     var json = {

        text:$('#name').val(),

     desc:$('#desc').val()

     };

        //发起ajax请求

     $.ajax({

           type:'POST',

     url:'<%= request.getContextPath()%>/role/role_add',

     contentType:'application/json',

     data:JSON.stringify(json),  

     success:function(data){

  alert(data);

     }

       });

        });

对应的接收方式:

        @RequestMapping("/role_add")

@ResponseBody

public void addDept(@RequestBody Role role,HttpServletResponse resp){

 

请求方式二:使用form表单提交,提交的内容需要包裹在form表单中,序列化表单,就可以将数据传递到后台了

            $.ajax({

type:'POST',

url:'<%=request.getContextPath()%>/use/user_add',

data:$('form').serialize(),

success:function(data) {

alert(data);

}

});

对应的接收方式:

@RequestMapping("/user_add")

public void addUser(

String account,String name,String pwd,

String email,String role,String dept,

HttpServletResponse resp){

后台响应方式一:

        @RequestMapping("/role_add")

@ResponseBody//这句很重要,这句注解是让mvc容器自动匹配

public void addDept(@RequestBody Role role,HttpServletResponse resp){

resp.setContentType("text/html;charset=utf-8");

PrintWriter out = null;

String msg = "";

try {

out = resp.getWriter();

} catch (IOException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

if(role.getText()!=null&&!role.getText().equals("")){

 

if(service.addRole(role)==0){

msg = "添加失败";

}else{

msg = "添加成功";

}

}else{

msg = "添加失败";

}

out.write(msg);

out.close();

}

后台响应方式二:

后台响应后返回json格式的数据的方法:

返回存储相应数据的集合即可,mvc容器会自动转换成对应的json格式的数据

        @RequestMapping("/findRoles")

@ResponseBodypublic List findRoles(){

//添加@ResponseBody才会交给converters处理

return service.getAllRoles();

}

后台响应方式三:使用map返回将json数据输出到前台

    @ResponseBody

     @RequestMapping("/getEmployeeMap")

public Map getEmployeeMap() {

         List employees = new ArrayList();

         employees.add(new Employee(1, "张三", "1", 5600d, new Date()));

         employees.add(new Employee(2, "李四", "2", 4600d, new Date()));

         employees.add(new Employee(3, "王二麻", "1", 6600d, new Date()));

         

         Map map = new LinkedHashMap();

         map.put("total", employees.size());

         map.put("rows", employees);

return map;

    }

上面介绍了Spring MVC实现前后数据交互的几种方式,我们在使用Spring MVC进行前端开发的时候可以参考一下。本站的Spring MVC视频教程里面还有更多更全面的Spring MVC开发需要用到的实用技术教程,千万不要错过哦!

0人推荐
共同学习,写下你的评论
0条评论
jessy
程序员jessy

13篇文章贡献65011字

作者相关文章更多>

推荐相关文章更多>

DOM渲染的详细过程

QCode09-04 14:38

CSS水平和垂直居中技巧大梳理

Code大师09-04 14:50

mui的input框在IOS系统下无法聚焦或点击多次才能聚焦

不写代码你养我啊08-23 11:14

推荐的-视.频播放器以及在线客服

不写代码你养我啊09-17 18:02

谈谈java多线程的三大特性

要学习了06-18 18:13

发评论

举报

0/150

取消