5 méthodes d'interaction ajax entre le front-end et le back-end de Spring MVC

Maintenant, je vais vous proposer un article sur 5 méthodes d'interaction ajax entre le front-end et le back-end de Spring MVC. Permettez-moi de le partager avec vous maintenant et de le donner comme référence pour tout le monde.

L'ajax frontal et le contrôleur Spring MVC back-end disposent des cinq méthodes d'interaction de données suivantes. (dhtmlxGrid est utilisé dans le frontend et fastjson est utilisé dans le backend)

Méthode 1 : transmettre les paramètres via l'URL

Accrocher les paramètres via l'URL , tel que / auth/getUser?userid='6'

La méthode côté serveur peut être écrite comme suit : getUser(String userid), et d'autres paramètres peuvent également être ajoutés tels que HttpSession, HttpServletRequest, HttpServletResponse, Mode, ModèleEtVue, etc.

Méthode 2 de passage de paramètre à valeur unique

Appel au premier plan tel que :

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

xxxxxx

xxxxxx

});

Le côté serveur est :

public String ExchangeSort(String id, String otherid)

Méthode trois objets passant les paramètres

L'appel frontal est :

var org={id:id};

ajaxPost("/base/org/getOrgById", org,function(data,textStatus){

xxxx

xxxx

});

Le côté serveur est :

public Org getOrgById( Org org)

Méthode quatre transfert de paramètres de sérialisation d'objet

Appel de premier plan tel que :

var ueser={id:rowId};

var data=ajaxPost("/base/user/findById",{"userObj":JSON.stringify(user)},null);

ou

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;});

Le côté serveur est :

@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;

}

Méthode cinq de transmission des paramètres de liste

Code frontal tel que :

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

});

Côté serveur :

@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";

}

Ci-joint le code 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; 

}

C'est moi, je l'ai compilé pour tout le monde, j'espère qu'il sera utile à tout le monde à l'avenir.

Articles connexes :

Solution pour que le servlet signale toujours status=parsererror lors de l'interaction avec Ajax

Ajax vérifie s'il l'est Code d'implémentation répété

Implémentation Ajax de la fonction phpcms like (tutoriel graphique)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!