`

spring mvc 与 jquery ajax

 
阅读更多

在 Spring mvc3中，响应、接受 JSON都十分方便。 
使用注解@ResponseBody可以将结果（一个包含字符串和JavaBean的Map），转换成JSON。 
使用 @RequestBody 注解前台只需要向 Controller 提交一段符合格式的 JSON，Spring 会自动将其拼装成 bean。 

Spring这个转换是靠org.codehaus.jackson这个组件来实现的，所有需要引入jackson-core-asl和org.codehaus.jackson两个jar包 

 

[html] view plaincopy
 
  1. <title>Spring MVC</title>  
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
  3. <script type="text/javascript" src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>  
  4. <script type="text/javascript" src="<%=request.getContextPath()%>/scripts/user/index.js"></script>  
  5. </head>  
  6. <body>  
  7. <div id="info"></div>  
  8. <form action="add" method="post" id="form">  
  9. 编号：<input type="text" name="id"/>  
  10. 姓名：<input type="text" name="username"/>  
  11. 年龄：<input type="text" name="age"/>  
  12.   
  13. <input type="button" value="提交" id="submit"/>  
  14. </form>  
  15. </body>  
  16. </html>  

 

[javascript] view plaincopy
 
  1. //将一个表单的数据返回成JSON对象  
  2. $.fn.serializeObject = function() {  
  3.   var o = {};  
  4.   var a = this.serializeArray();  
  5.   $.each(a, function() {  
  6.     if (o[this.name]) {  
  7.       if (!o[this.name].push) {  
  8.         o[this.name] = [ o[this.name] ];  
  9.       }  
  10.       o[this.name].push(this.value || '');  
  11.     } else {  
  12.       o[this.name] = this.value || '';  
  13.     }  
  14.   });  
  15.   return o;  
  16. };  
  17.   
  18. $(document).ready(  
  19.     function() {  
  20.       jQuery.ajax( {  
  21.         type : 'GET',  
  22.         contentType : 'application/json',  
  23.         url : 'user/list',  
  24.         dataType : 'json',  
  25.         success : function(data) {  
  26.           if (data && data.success == "true") {  
  27.             $('#info').html("共" + data.total + "条数据。<br/>");  
  28.             $.each(data.data, function(i, item) {  
  29.               $('#info').append(  
  30.                   "编号：" + item.id + "，姓名：" + item.username  
  31.                       + "，年龄：" + item.age);  
  32.             });  
  33.           }  
  34.         },  
  35.         error : function() {  
  36.           alert("error")  
  37.         }  
  38.       });  
  39.       $("#submit").click(function() {  
  40.         var jsonuserinfo = $.toJSON($('#form').serializeObject());  
  41.         alert(jsonuserinfo);  
  42.         jQuery.ajax( {  
  43.           type : 'POST',  
  44.           contentType : 'application/json',  
  45.           url : 'user/add',  
  46.           data : jsonuserinfo,  
  47.           dataType : 'json',  
  48.           success : function(data) {  
  49.             alert("新增成功！");  
  50.           },  
  51.           error : function(data) {  
  52.             alert("error")  
  53.           }  
  54.         });  
  55.       });  
  56.     });  

 

[java] view plaincopy
 
  1. @Controller  
  2. @RequestMapping("/user")  
  3. public class DemoController {  
  4.   private Logger logger = LoggerFactory.getLogger(DemoController.class);  
  5.   
  6.   @RequestMapping(value = "/list", method = RequestMethod.GET)  
  7.   @ResponseBody  
  8.   public Map<String, Object> getUserList() {  
  9.     logger.info("列表");  
  10.     List<UserModel> list = new ArrayList<UserModel>();  
  11.     UserModel um = new UserModel();  
  12.     um.setId("1");  
  13.     um.setUsername("sss");  
  14.     um.setAge(222);  
  15.     list.add(um);  
  16.     Map<String, Object> modelMap = new HashMap<String, Object>(3);  
  17.     modelMap.put("total", "1");  
  18.     modelMap.put("data", list);  
  19.     modelMap.put("success", "true");  
  20.     return modelMap;  
  21.   }  
  22.   
  23.   @RequestMapping(value = "/add", method = RequestMethod.POST)  
  24.   @ResponseBody  
  25.   public Map<String, String> addUser(@RequestBody UserModel model) {  
  26.     logger.info("新增");  
  27.     logger.info("捕获到前台传递过来的Model，名称为：" + model.getUsername());  
  28.     Map<String, String> map = new HashMap<String, String>(1);  
  29.     map.put("success", "true");  
  30.     return map;  
  31.   }  
  32. }  


另外一种参数传递方式

 

前端代码：

 

[javascript] view plaincopy
 
  1. $.ajax({type : "POST",  
  2.        url : "assign.v",   
  3.        data : {  
  4.            userId : userId,  
  5.            'add[]' : [1,2,3],  
  6.            'del[]' :[4]  
  7.        },  
  8.        success : function (data){  
  9.            searchWidget.searchUser(1);    
  10.        }  
  11. });  

 


后端代码：

 

[java] view plaincopy
 
  1. @ResponseBody  
  2. @RequestMapping(value="/assign",  
  3.         method=RequestMethod.POST)   
  4. public String assign(  
  5.         @RequestParam(value="userId", required=true) int userId,  
  6.         @RequestParam(value="add[]", required=false) int[] add,  
  7.         @RequestParam(value="del[]", required=false) int[] del) {  
  8.     System.out.println("userId:" + userId);  
  9.     System.out.println("add:" + add);  
  10.     System.out.println("del:" + del);  
  11.     return "";  
  12. }  
分享到：
| mybatis
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    spring3 mvc 用 jquery ajax 交互

    通过查看这些文件，你可以更好地理解Spring MVC与jQuery AJAX的集成。 总结，结合Spring MVC的Controller和jQuery的AJAX功能，开发者可以构建出更加动态、响应式的Web应用。这种交互方式使得前端可以灵活地与后端...

    Spring MVC跟jQuery和Twitter Bootstrap的结合

    通过Ajax，jQuery可以与后台Spring MVC控制器进行无刷新的数据交互，提升用户体验。 **Twitter Bootstrap 的引入** Twitter Bootstrap 是一个流行的前端开发框架，提供了响应式布局、预定义的CSS样式、JavaScript...

    spring-mvc-jquery.zip_jquery_mvc jquery_spring jquery_spring mvc

    本项目“spring-mvc-jquery.zip”是关于如何将Spring MVC 3.0框架与jQuery进行整合的一个示例，旨在帮助开发者理解这两者如何协同工作，提升Web应用的用户体验和后端数据处理效率。 首先，Spring MVC是Spring框架的...

    spring框架项目+jQueryAjax提交实例。jquery-3.3.1.min.js

    标题中的"spring框架项目+jQueryAjax提交实例"指的是一个整合了Spring框架和jQuery AJAX技术的Web应用程序项目。这个项目提供了一个完整的流程，演示了如何在前端使用jQuery的AJAX功能向后端Spring MVC控制器发送...

    Spring3MVC和jQuery的集成

    Spring3 MVC是Spring框架的一部分，用于构建后端MVC架构的应用程序，而jQuery则是一种强大的JavaScript库，简化了前端的DOM操作、事件处理和Ajax交互。本篇文章将深入探讨如何将这两者有效集成，以创建高效的Web应用...

    spring与jquery ajax交互 和 servlet与jquery ajax交互

    本文将深入探讨Spring与jQuery AJAX交互以及Servlet与jQuery AJAX交互的知识点。 ### Spring与jQuery AJAX交互 #### 1. Spring MVC中的RESTful API设计 在Spring MVC中，我们可以创建RESTful服务，通过HTTP的CRUD...

    spring mvc+ajax

    在Spring MVC中集成Ajax，通常会在前端使用JavaScript库如jQuery来发送Ajax请求。例如，我们可以创建一个AJAX函数，通过`$.ajax()`或`$.getJSON()`等方法向后台发送异步请求。这些请求通常带有特定的URL和参数，对应...

    spring mvc mybatis jqueryeasyui

    标题 "spring mvc mybatis jqueryeasyui" 描述了一个基于Java技术栈的Web应用程序开发场景，其中Spring MVC作为控制层框架，MyBatis作为数据访问层框架，jQuery和EasyUI则用于前端交互和界面设计。下面将详细阐述...

    spring mvc+jquery easyui CRUD

    在本项目中，我们主要探讨的是如何利用Spring MVC框架与jQuery EasyUI库来实现一个基本的CRUD（创建、读取、更新、删除）功能。Spring MVC是Java平台上的一个强大的MVC（Model-View-Controller）框架，它提供了一个...

    人事管理系统(注解 Mybatis+Spring+Spring MVC框架整合AJAX+JQuery实现登录、注册以及验证码和验证注册用户信息,包括数据库备份)

    三期答辩课程设计，人事管理系统Mybatis+Spring+Spring MVC框架整合AJAX+JQuery实现登录、注册以及验证码和验证注册用户信息,包括数据库备份，课设说明，答辩PPT，Windows下sts（eclipse） 。

    jQuery Spring MVC

    在Web开发领域，jQuery 和 Spring MVC 分别是JavaScript库与后端MVC框架的代表。将两者结合使用，可以构建出高效、响应式的前端界面，同时利用Spring MVC的强大功能处理后端业务逻辑。本文将深入探讨如何将jQuery与...

    spring mvc json&&jackson jquery js

    总的来说，这个项目结合了Spring MVC的强大后端处理能力，利用Jackson进行高效的JSON数据交换，以及jQuery和JavaScript实现富前端交互，提供了一种高效的Web应用开发方案。通过熟练掌握这些技术，开发者可以构建出...

    Spring MVC与Ajax交互源码

    Spring MVC与Ajax结合使用，可以实现更高效、更流畅的用户界面。例如，当用户在前端进行某些操作，如提交表单，我们可以使用Ajax发送POST请求到Spring MVC的Controller，Controller处理业务逻辑后，将结果以JSON或...

    Spring + Hibernate + Spring mvc +Ajax 整合

    在Spring MVC中，可以通过配置Ajax处理器或使用jQuery等库来实现Ajax请求。这样，用户可以进行数据的增删查改，而界面保持不刷新，提升了交互性。 在给定的"Spring + Hibernate + Spring mvc +Ajax 整合"项目中，...

    Spring MVC 2.5 + JQuery HelloWorld Sample

    **Spring MVC 2.5与JQuery整合实现Ajax HelloWorld示例** 在Web开发中，Spring MVC作为Java领域广泛使用的MVC框架，提供了强大的控制层支持，而JQuery则是一款高效、简洁的JavaScript库，简化了前端DOM操作和AJAX...

    spring mvc 使用jquery 传json值给Controller时需要解决的问题

    在Spring MVC中，使用jQuery向Controller传递JSON数据是一种常见的数据交互方式。然而，这个过程可能会遇到一些问题，本文将详细探讨这些难题以及解决方案。 1. **JSON数据格式化** JSON（JavaScript Object ...

    springmvc利用jquery实现ajax的例子

    在本示例中，我们将探讨如何使用Spring MVC框架与jQuery库结合实现Ajax功能。Spring MVC是Spring框架的一部分，专门用于构建Web应用程序，而jQuery则是一个强大的JavaScript库，简化了DOM操作、事件处理以及异步HTTP...

    struts2+spring+hibernat Jquery ajax simple tree 动态生成树实例

    总结来说，"Struts2+Spring+Hibernate Jquery ajax simple tree 动态生成树实例"是一个综合运用Java后端框架和前端技术实现动态交互功能的案例。它展示了如何在后端利用SSH整合处理业务逻辑和数据，再通过Ajax和...

    spring mvc 整合包

    15. **AJAX集成**：Spring MVC与jQuery、AngularJS等前端库配合，可以实现异步数据交互。 这个"spring mvc 整合包"可能包含了Spring MVC的jar文件、配置示例、启动脚本或者示例代码，帮助开发者快速启动基于Spring ...

    spring3mvc-jQuery-easyUI做的ajax版本用户管理系统

    【标题】"spring3mvc-jQuery-easyUI做的ajax版本用户管理系统" 提供了一个使用SpringMVC、jQuery和easyUI框架构建的Web应用程序实例，它着重于实现基于Ajax的用户管理功能。这个项目展示了如何将这三个强大的技术...

Magicbox
Global site tag (gtag.js) - Google Analytics