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

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

亚连
Freigeben: 2018-05-22 16:20:01
Original
2622 Leute haben es durchsucht

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

});
Nach dem Login kopieren

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

});
Nach dem Login kopieren

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);
Nach dem Login kopieren

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;});
Nach dem Login kopieren

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;

}
Nach dem Login kopieren

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

});
Nach dem Login kopieren

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

}
Nach dem Login kopieren

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; 

}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage