Spring MVC前端与后端5种ajax交互方法【总结】
前端ajax与后端SpringMVC控制器有以下五种数据交互方式。(前台使用了dhtmlxGrid,后端使用了fastjson)
方式一通过URL传参
通过URL挂接参数,如/auth/getUser?userid='6'
服务器端方法可编写为:getUser(Stringuserid),也可新增其他参数如HttpSession,HttpServletRequest,HttpServletResponse,Mode,ModelAndView等。
方式二单值传参
前台调用如:
ajaxPost("/base/user/exchangeSort",{"id":rid,"otherid":otherid},function(data,status){ xxxxxx xxxxxx });
服务器端为:
publicStringexchangeSort(Stringid,Stringotherid)
方式三对象传参
前台调用如:
varorg={id:id}; ajaxPost("/base/org/getOrgById",org,function(data,textStatus){ xxxx xxxx });
服务器端为:
publicOrggetOrgById(Orgorg)
方式四对象序列化传参
前台调用如:
varueser={id:rowId}; vardata=ajaxPost("/base/user/findById",{"userObj":JSON.stringify(user)},null);
或者
varueser={};//创建对象 user["id"]=id; user["name"]=$("#name").val(); user["dept"]={};//外键对象 user["dept"]["id"]=$("#deptid").val(); ajaxPost("/base/user/addUser",{"userObj":JSON.stringify(user)},function(data){xxxx;xxxxx;});
服务器端为:
@RequestMapping("/findById") @ResponseBody publicUserInfofindById(StringuserObj){ //使用fastJSON UserInfouser=JSON.parseObject(userObj,UserInfo.class); user=(UserInfo)userService.findById(UserInfo.class,user.getId()); returnuser; }
方式五列表传参
前台代码如:
varobjList=newArray(); grid.forEachRow(function(rId){ varindex=grid.getRowIndex(rId); varobj={}; obj["id"]=rId; obj["user"]={}; obj["user"]["id"]=$("#userId").val(); //不推荐这样的写法 //obj["kinShip"]=grid.cells(rId,1).getValue(); //obj["name"]=grid.cells(rId,2).getValue(); obj["kinShip"]=grid.cells(rId,grid.getColIndexById("columnName")).getValue(); obj["name"]=grid.cells(rId,grid.getColIndexById("name")).getValue(); if(grid.cells(rId,3).getValue()!=null&&grid.cells(rId,3).getValue()!=""){ varstr=grid.cells(rId,3).getValue().split("-"); varday=parseFloat(str[2]); varmonth=parseFloat(str[1])-1; varyear=parseInt(str[0]); vardate=newDate(); date.setFullYear(year,month,day); obj["birth"]=date; }else{ obj["birth"]=""; } obj["politicalStatus"]=grid.cells(rId,4).getValue(); obj["workUnit"]=grid.cells(rId,5).getValue(); if(grid.cells(rId,6).isChecked()) obj["isContact"]="1"; else obj["isContact"]="0"; obj["phone"]=grid.cells(rId,7).getValue(); obj["remark"]=grid.cells(rId,8).getValue(); obj["sort"]=index; objList.push(obj); }); ajaxPost("/base/user/addUpdateUserHomeList",{ "userHomeList":JSON.stringify(objList), "userId":$("#userId").val() },function(data,status){ xxxxx });
服务器端:
@RequestMapping("/addUpdateUserHomeList") @ResponseBody publicStringaddUpdateUserHomeList(StringuserHomeList,StringuserId){ ListuserHomes=JSON .parseArray(userHomeList,UserHome.class);//fastJSON if(userHomes!=null&&userHomes.size()>0){ try{ userService.addUpdateUserHomeList(userHomes,userId); }catch(Exceptione){ e.printStackTrace(); } } return"200"; }
附上ajaxPost代码:
functionajaxPost(url,dataParam,callback){ varretData=null; $.ajax({ type:"post", url:url, data:dataParam, dataType:"json", success:function(data,status){ //alert(data); retData=data; if(callback!=null&&callback!=""&&callback!=undefined) callback(data,status); }, error:function(err,err1,err2){ alertMsg.error("调用方法发生异常:"+JSON.stringify(err)+"err1"+JSON.stringify(err1)+"err2:"+JSON.stringify(err2)); } }); returnretData; }
以上这篇SpringMVC前端与后端5种ajax交互方法【总结】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。