집 > 기사 > 웹 프론트엔드 > Spring MVC 프론트엔드와 백엔드 간의 5가지 Ajax 상호작용 방법

Spring MVC 프론트엔드와 백엔드 간의 5가지 Ajax 상호작용 방법

亚连원래의: 2018-05-22 16:20:012586검색

이제 Spring MVC 프론트엔드와 백엔드 간의 5가지 Ajax 상호작용 방법에 대한 기사를 가져오겠습니다. 이제 그것을 여러분과 공유하고 모든 사람에게 참고 자료로 제공하겠습니다.

프론트엔드 Ajax와 백엔드 Spring MVC 컨트롤러에는 다음과 같은 5가지 데이터 상호작용 방법이 있습니다. (프론트엔드에서는 dhtmlxGrid, 백엔드에서는 fastjson이 사용됩니다.)

방법 1: URL을 통해 매개변수 전달

/auth/getUser?userid='6'

Server와 같은 URL을 통해 매개변수 후크 -side 메소드를 작성할 수 있습니다. getUser(String userid)이며, HttpSession, HttpServletRequest, HttpServletResponse, Mode, ModelAndView 등과 같은 다른 매개변수를 추가할 수도 있습니다.

방법 2 단일 값 매개변수 전달

다음과 같은 포그라운드 호출:

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

xxxxxx

xxxxxx

});

서버 측:

public String exchangeSort(String id, String otherid)

Me thod 3 객체 매개변수 전달

프런트엔드 호출은 다음과 같습니다:

var org={id:id};

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

xxxx

xxxx

});

서버측은 다음과 같습니다.

public Org getOrgById(Org org)

4개의 객체로 구성된 직렬화된 매개변수 전송 방법

프런트 엔드 호출은 다음과 같습니다:

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;

}

5개의 목록 매개변수

프런트엔드 코드는 다음과 같습니다:

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 상호작용 방법

관련 기사