AJAX与spring mvc交互

发布时间：2020-12-15 21:50:20 所属栏目：百科来源：网络整理

导读：（1）简单交互： tablestyle="width:100%"class="table"cellspacing="1"cellpadding="1"border="0"trtdclass="ti1"colSpan="2"请选择审讯室/td/trtrtdclass="ti2hui"审讯室名称/tdtdclass="ti1cu"selectid="roomid"name="roomid"c:forEachitems="${roomlist}

（1）简单交互：

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

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

functionsetshow(){
$.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")
publicvoidjump(HttpSessionsession,HttpServletRequestrequest,HttpServletResponseresponse)throwsException{
Stringroomid=request.getParameter("roomid");
Stringroom=request.getParameter("room");
session.setAttribute("ROOMID",roomid);
session.setAttribute("ROOMNAME",room);
System.out.println("sessionset:"+room+"=="+roomid);
response.setCharacterEncoding("utf-8");
response.getWriter().write("{"success":true}");
response.getWriter().flush();
}

（2）springmvc 返回信息到ajax:

importcom.googlecode.jsonplugin.JSONUtil;
List<Records>recordList=newArrayList<Records>();
//获取recordlist操作省略
response.setCharacterEncoding("utf-8");
response.getWriter().write("{"success":true,"data":"+JSONUtil.serialize(recordList)+"}");
response.getWriter().flush();

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

vartext='';
$(data.data).each(function(){
text=text+'<lionclick="selectRecord('+this.id+')"style="cursor:pointer;height:20px;list-style:none;valign:center;line-height:23px;"><divstyle="float:left;width:15px;height:20px;background:url(Images/record_icon.png)no-repeatcenter;"></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>SpringMVC</title>
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<scripttype="text/javascript"src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<scripttype="text/javascript"src="<%=request.getContextPath()%>/scripts/user/index.js"></script>
</head>
<body>
<divid="info"></div>
<formaction="add"method="post"id="form">
编号：<inputtype="text"name="id"/>
姓名：<inputtype="text"name="username"/>
年龄：<inputtype="text"name="age"/>

<inputtype="button"value="提交"id="submit"/>
</form>
</body>
</html>

Js代码
//将一个表单的数据返回成JSON对象
$.fn.serializeObject=function(){
varo={};
vara=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||'';
}
});
returno;
};

$(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(){
varjsonuserinfo=$.toJSON($('#form').serializeObject());
alert(jsonuserinfo);
jQuery.ajax({
type:'POST',url:'user/add',data:jsonuserinfo,success:function(data){
alert("新增成功！");
},error:function(data){
alert("error")
}
});
});
});

Java代码
@Controller
@RequestMapping("/user")
publicclassDemoController{
privateLoggerlogger=LoggerFactory.getLogger(DemoController.class);

@RequestMapping(value="/list",method=RequestMethod.GET)
@ResponseBody
publicMap<String,Object>getUserList(){
logger.info("列表");
List<UserModel>list=newArrayList<UserModel>();
UserModelum=newUserModel();
um.setId("1");
um.setUsername("sss");
um.setAge(222);
list.add(um);
Map<String,Object>modelMap=newHashMap<String,Object>(3);
modelMap.put("total","1");
modelMap.put("data",list);
modelMap.put("success","true");
returnmodelMap;
}

@RequestMapping(value="/add",method=RequestMethod.POST)
@ResponseBody
publicMap<String,String>addUser(@RequestBodyUserModelmodel){
logger.info("新增");
logger.info("捕获到前台传递过来的Model，名称为："+model.getUsername());
Map<String,String>map=newHashMap<String,String>(1);
map.put("success","true");
returnmap;
}
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!