Heim  >  Artikel  >  Web-Frontend  >  5 Ajax-Interaktionsmethoden zwischen Spring MVC Front-End und Back-End

5 Ajax-Interaktionsmethoden zwischen Spring MVC Front-End und Back-End

亚连
亚连Original
2018-05-22 16:20:012587Durchsuche

Jetzt bringe ich Ihnen einen Artikel über 5 Ajax-Interaktionsmethoden zwischen Spring MVC Front-End und Back-End. Lassen Sie mich es jetzt mit Ihnen teilen und es allen als Referenz geben.

Der Front-End-Ajax und der Back-End-Spring-MVC-Controller verfügen über die folgenden fünf Dateninteraktionsmethoden. (dhtmlxGrid wird im Frontend und fastjson im Backend verwendet)

Methode 1: Parameter über URL übergeben

Hook-Parameter über URL , wie zum Beispiel / auth/getUser?userid='6'

Die serverseitige Methode kann geschrieben werden als: getUser(String userid), und es können auch andere Parameter hinzugefügt werden, wie zum Beispiel HttpSession, HttpServletRequest, HttpServletResponse, Modus, ModelAndView usw.

Methode 2 Einzelwert-Übergabeparameter

Vordergrundaufruf wie:

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

xxxxxx

xxxxxx

});

Die Serverseite ist:

public String ExchangeSort(String id, String otherid)

Methode drei Objektübergabeparameter

Der Front-End-Aufruf lautet:

var org={id:id};

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

xxxx

xxxx

});

Der serverseitige Aufruf lautet:

public Org getOrgById(Org org)

Methode 4 Objektserialisierungsparameterübergabe

Vordergrundaufruf wie:

var ueser={id:rowId};

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

oder

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

Die Serverseite ist:

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

}

Fünf Listenparameter

Frontend-Code wie:

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

});

Serverseite:

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

}

Im Anhang ist die Ajax-Postleitzahl:

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; 

}

Das Obige habe ich für alle zusammengestellt . Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Lösung für Servlet, das bei der Interaktion mit Ajax immer den Status=Parserfehler meldet

Ajax prüft, ob dies der Fall ist wiederholter Implementierungscode

Ajax-Implementierung einer PHPCMS-ähnlichen Funktion (grafisches Tutorial)

Das obige ist der detaillierte Inhalt von5 Ajax-Interaktionsmethoden zwischen Spring MVC Front-End und Back-End. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn