Résumé des méthodes d'interaction ajax front-end et back-end (avec code)

Cette fois je vais vous apporter un résumé des méthodes d'interaction ajax front-end et back-end (avec code), quelles sont les précautions pour l'interaction ajax front-end et back-end, et ce qui suit est un cas pratique, jetons un coup d'œil.

Ajax front-end et Spring MVC back-endController ont les 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 du paramètre à valeur unique

L'appel au premier plan est :

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 3 objet passant des paramètres

Appel de premier plan tel que :

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 4Sérialisation d'objetPasser les paramètres

Appels au premier plan tels 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;});

Appels côté serveur :

@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 listant les paramètres de transmission

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

Code ajaxPost ci-joint :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

jsonp+json implémente la requête inter-domaines AJAX

Appel d'ajax dans jQuery pour réaliser une implémentation asynchrone

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!