`

AJAX与spring mvc交互

AJAXSpring MVC 
阅读更多

（1）简单交互：

<table style="width: 100%" class="table" cellspacing="1" cellpadding="1" border="0">
  <tr><td  class="ti1"  colSpan="2">请选择审讯室</td></tr> 
 <tr><td  class="ti2hui">审讯室名称</td><td class="ti1cu">
    <select id="roomid" name="roomid" >
  <c:forEach items="${roomlist}" var="room">  
        <option value ="${room.id}">${room.name}</option>   
     </c:forEach>
    </select>
    </td></tr>
<tr><td   class="ti2hui" colSpan="2" align="center"><input type="button" onclick="setshow()"  value="确定"/>  </td></tr>
</table>

------------------------------ajax-----提交的参数可以通过url提交，也可以用data:{}方式提交---------------------------------------------- 
function setshow(){ 

$.ajax( {   
    type : "POST",   
    url : "<%=request.getContextPath()%>/initroom.do?method=set", 
    data : {
      'room' : $("#roomid").find('option:selected').text(),
      'roomid' :$("#roomid").val()
     },  
    dataType: "json",   
    success : function(data) {   
        if(data.success){   
            alert("设置成功！");   
             
        }   
        else{   
            alert("设置失败！");   
        }   
    },   
    error :function(){   
        alert("网络连接出错！");   
    }   
});   
}  

------------------------spring mvc-------------------------------------------------

 @RequestMapping(params = "method=set")
 public void jump(HttpSession session,HttpServletRequest request, HttpServletResponse response) throws Exception{
  String roomid= request.getParameter("roomid");
  String room= request.getParameter("room");
  session.setAttribute("ROOMID", roomid);
  session.setAttribute("ROOMNAME", room);
  System.out.println("session set:"+room+"=="+roomid);
  response.setCharacterEncoding("utf-8");
  response.getWriter().write("{\"success\":true }");
  response.getWriter().flush();
 }

 

（2）springmvc 返回信息到ajax:

import com.googlecode.jsonplugin.JSONUtil;

List<Records> recordList = new ArrayList<Records>();

//获取recordlist操作省略

  response.setCharacterEncoding("utf-8");
   response.getWriter().write("{\"success\":true, \"data\":" + JSONUtil.serialize(recordList) + "}");
   response.getWriter().flush();

-------------------------------ajax处理序列化对象--------------------------------------------

var text = '';
       $(data.data).each(function() {

        text = text + '<li onclick="selectRecord(' + this.id + ')" style="cursor: pointer; height:20px; list-style:none; valign: center;line-height:23px;"><div style="float:left; width:15px; height:20px; background:url(Images/record_icon.png) no-repeat center;"></div>' + this.name + '</li>';
       });

       $('#recordDiv').html(text);

 

(3)最先进的做法：

在 Spring mvc3中，响应、接受 JSON都十分方便。 
使用注解@ResponseBody可以将结果（一个包含字符串和JavaBean的Map），转换成JSON。 
使用 @RequestBody 注解前台只需要向 Controller 提交一段符合格式的 JSON，Spring 会自动将其拼装成 bean。 
Spring这个转换是靠org.codehaus.jackson这个组件来实现的，所有需要引入jackson-core-asl和org.codehaus.jackson两个jar包 

Html代码  收藏代码
  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>  




 

Js代码  收藏代码
  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代码  收藏代码
  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. }  

 转自：http://blog.csdn.net/yangtang_newton/article/details/7525800

分享到：
| CXF 动态调用webservice的错误(Compiler.us ...
评论
发表评论

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

相关推荐

    Spring MVC与Ajax交互源码

    Spring MVC和Ajax是Web开发中的两个重要技术，它们在构建动态、交互性强的网页应用时起着关键作用。Spring MVC是Spring框架的一部分，提供了一种模型-视图-控制器（MVC）架构来组织和处理HTTP请求，而Ajax...

    spring mvc+ajax

    将Spring MVC与Ajax结合使用，可以实现页面的异步更新，提升用户体验，同时保持服务器负载均衡。 首先，我们需要理解Spring MVC的基本工作流程。当用户发起请求时，Spring MVC的DispatcherServlet会拦截这个请求，...

    maven与spring MVC

    DWR可以与Spring MVC协同工作，提供富客户端的交互体验。DWR的配置可以通过Spring的ContextLoaderListener来加载，使得DWR服务能够被Spring容器管理。这样，DWR可以调用Spring的业务层服务，实现前端与后端的实时...

    bootstrap，ajax，spring mvc，spring，hibernate 项目实战源码

    在IT领域，尤其是在Web开发中，Bootstrap、Ajax、Spring MVC、Spring和Hibernate是五个非常重要的技术框架和工具。这些技术的结合使用可以构建出高效、响应式和功能丰富的Web应用程序。接下来，我们将深入探讨这些...

    spring3 mvc 用 jquery ajax 交互

    本文将深入探讨如何在Spring MVC框架中利用jQuery的AJAX功能进行前后端交互，提升用户体验。 首先，Spring MVC是Spring框架的一个模块，专为构建可维护、可扩展的Web应用而设计。它采用模型-视图-控制器（MVC）架构...

    Spring + Hibernate + Spring mvc +Ajax 整合

    Spring MVC与Ajax的结合则提高了用户体验。Ajax（Asynchronous JavaScript and XML）允许前端页面在不刷新整个页面的情况下与服务器进行异步通信。在Spring MVC中，可以通过配置Ajax处理器或使用jQuery等库来实现...

    Spring MVC跟jQuery和Twitter Bootstrap的结合

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

    Java开发校园招聘系统源码，bootstrap，ajax，spring mvc，spring，hibernate

    通过Bootstrap构建的界面美观且适应性强，Ajax提供流畅的交互体验，Spring MVC和Spring处理业务逻辑并管理对象，而Hibernate则负责与数据库的无缝对接。这样的技术组合为开发者提供了强大的工具集，使得开发大型Web...

    spring mvc 整合包

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

    jQuery Spring MVC

    整合jQuery与Spring MVC，可以实现高效、互动的Web应用，尤其是在处理复杂的数据展示和交互场景时。通过jqGrid的例子，我们可以看到这种整合的优势，即简化前端数据展示的复杂度，同时利用Spring MVC的强大后端处理...

    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...

    SpringmvcAjax

    当我们谈论"SpringmvcAjax"时，意味着我们要探讨如何在Spring MVC框架下利用Ajax技术实现前后端的数据交互。 首先，让我们深入理解Spring MVC中处理Ajax请求的机制。在Spring MVC中，一个控制器（Controller）类...

    Spring MVC Cookbook(PACKT,2016).pdf

    1. **Spring MVC基本概念**：首先，了解Spring MVC的基本架构，包括DispatcherServlet、Controller、Model、View和ViewResolver等组件的角色和交互方式。 2. **配置Spring MVC**：学习如何通过XML或Java配置来设置...

    mvc-ajax.rar_spring mvc

    在本示例中，“mvc-ajax.rar_spring mvc”是一个包含使用Ajax技术与Spring MVC集成实现账号添加功能的项目。让我们深入探讨这个主题。 首先，Spring MVC是Spring框架的一个组件，专门用于处理Web应用程序的请求和...

    spring mvc json&&jackson jquery js

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

    ajaxupload在spring mvc4.2中实现简单文件上传

    在Spring MVC 4.2框架中实现AjaxUpload（异步文件上传）是一个常见的需求，它允许用户在不刷新整个页面的情况下进行文件上传，提供更好的用户体验。以下是对这一主题的详细阐述： 1. **AjaxUpload简介**： Ajax...

    Spring3 MVC Ajax with JSON

    Spring MVC与Ajax的交互 Spring MVC提供了一种方便的方式来处理Ajax请求。通过使用`@ResponseBody`注解，你可以指示Spring将方法的返回值直接写入HTTP响应的主体，而不是将其作为视图进行渲染。这通常与JSON序列化...

    Spring MVC不能直接接收list类型参数的问题

    对于基于 Java 的 Spring MVC 框架而言，处理这种交互通常需要理解如何正确地接收前端发送的数据。本文探讨的是一个常见的问题——Spring MVC 无法直接接收 List 类型参数。 #### 问题描述 当前端使用 jQuery 向...

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