码迷,mamicode.com
首页 > 编程语言 > 详细

AJAX与spring mvc交互

时间:2014-08-28 11:42:09      阅读:283      评论:0      收藏:0      [点我收藏+]

标签:style   http   os   java   使用   io   for   ar   数据   

(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代码 
<title>Spring MVC</title>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
<script type="text/javascript" src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>  
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/user/index.js"></script>  
</head>  
<body>  
<div id="info"></div>  
<form action="add" method="post" id="form">  
编号:<input type="text" name="id"/>  
姓名:<input type="text" name="username"/>  
年龄:<input type="text" name="age"/>  
  
<input type="button" value="提交" id="submit"/>  
</form>  
</body>  
</html>
Js代码  
//将一个表单的数据返回成JSON对象  
$.fn.serializeObject = function() {  
  var o = {};  
  var a = this.serializeArray();  
  $.each(a, function() {  
    if (o[this.name]) {  
      if (!o[this.name].push) {  
        o[this.name] = [ o[this.name] ];  
      }  
      o[this.name].push(this.value || ‘‘);  
    } else {  
      o[this.name] = this.value || ‘‘;  
    }  
  });  
  return o;  
};  
  
$(document).ready(  
    function() {  
      jQuery.ajax( {  
        type : ‘GET‘,  
        contentType : ‘application/json‘,  
        url : ‘user/list‘,  
        dataType : ‘json‘,  
        success : function(data) {  
          if (data && data.success == "true") {  
            $(‘#info‘).html("共" + data.total + "条数据。<br/>");  
            $.each(data.data, function(i, item) {  
              $(‘#info‘).append(  
                  "编号:" + item.id + ",姓名:" + item.username  
                      + ",年龄:" + item.age);  
            });  
          }  
        },  
        error : function() {  
          alert("error")  
        }  
      });  
      $("#submit").click(function() {  
        var jsonuserinfo = $.toJSON($(‘#form‘).serializeObject());  
        alert(jsonuserinfo);  
        jQuery.ajax( {  
          type : ‘POST‘,  
          contentType : ‘application/json‘,  
          url : ‘user/add‘,  
          data : jsonuserinfo,  
          dataType : ‘json‘,  
          success : function(data) {  
            alert("新增成功!");  
          },  
          error : function(data) {  
            alert("error")  
          }  
        });  
      });  
    });
Java代码  
@Controller  
@RequestMapping("/user")  
public class DemoController {  
  private Logger logger = LoggerFactory.getLogger(DemoController.class);  
  
  @RequestMapping(value = "/list", method = RequestMethod.GET)  
  @ResponseBody  
  public Map<String, Object> getUserList() {  
    logger.info("列表");  
    List<UserModel> list = new ArrayList<UserModel>();  
    UserModel um = new UserModel();  
    um.setId("1");  
    um.setUsername("sss");  
    um.setAge(222);  
    list.add(um);  
    Map<String, Object> modelMap = new HashMap<String, Object>(3);  
    modelMap.put("total", "1");  
    modelMap.put("data", list);  
    modelMap.put("success", "true");  
    return modelMap;  
  }  
  
  @RequestMapping(value = "/add", method = RequestMethod.POST)  
  @ResponseBody  
  public Map<String, String> addUser(@RequestBody UserModel model) {  
    logger.info("新增");  
    logger.info("捕获到前台传递过来的Model,名称为:" + model.getUsername());  
    Map<String, String> map = new HashMap<String, String>(1);  
    map.put("success", "true");  
    return map;  
  }  
}


AJAX与spring mvc交互

标签:style   http   os   java   使用   io   for   ar   数据   

原文地址:http://my.oschina.net/moziqi/blog/307479

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!