Spring MVC前端与后端5种ajax交互方法【总结】

前端ajax与后端spring mvc控制器有以下五种数据交互方式。（前台使用了dhtmlxgrid,后端使用了fastjson）

方式一 通过url传参

通过url挂接参数，如/auth/getuser?userid='6'

服务器端方法可编写为：getuser(string userid)，也可新增其他参数如httpsession, httpservletrequest,httpservletresponse,mode,modelandview等。

方式二 单值传参

前台调用如：

ajaxpost("/base/user/exchangesort",{"id":rid,"otherid":otherid},function(data,status){

xxxxxx

xxxxxx

});

服务器端为：

public string exchangesort(string id, string otherid)

方式三 对象传参

前台调用如：

var org={id:id};

ajaxpost("/base/org/getorgbyid", org,function(data,textstatus){

xxxx

xxxx

});

服务器端为：

public org getorgbyid(org org)

方式四 对象序列化传参

前台调用如：

var ueser={id:rowid};

var data=ajaxpost("/base/user/findbyid",{"userobj":json.stringify(user)},null);

或者

var ueser={ };//创建对象

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

public userinfo findbyid(string userobj) {

//使用fastjson

userinfo user = json.parseobject(userobj, userinfo.class);

user = (userinfo) userservice.findbyid(userinfo.class, user.getid());

return user;

}

方式五 列表传参

前台代码如：

var objlist = new array();

grid.foreachrow(function(rid) {

var index = grid.getrowindex(rid);

var obj = {};

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()!="") {

var str = grid.cells(rid, 3).getvalue().split("-");

var day = parsefloat(str[2]);

var month = parsefloat(str[1])-1;

var year = parseint(str[0]);

var date=new date();

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

public string addupdateuserhomelist(string userhomelist, string userid) {

list userhomes = json

.parsearray(userhomelist, userhome.class);//fastjson

if (userhomes != null && userhomes.size() > 0) {

try {

userservice.addupdateuserhomelist(userhomes, userid);

} catch (exception e) {

e.printstacktrace();

}

}

return "200";

}

附上ajaxpost代码：

function ajaxpost(url,dataparam,callback){ 

var retdata=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)); 

} 

}); 

return retdata; 

}

以上这篇spring mvc前端与后端5种ajax交互方法【总结】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。