首页 > 代码库 > AJAX与spring mvc交互
AJAX与spring 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=http://www.mamicode.com/"确定"/> >------------------------------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://www.mamicode.com/"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> >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交互
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。