프런트엔드 및 백엔드 Ajax 상호작용 방법 요약(코드 포함)

이번에는 프론트엔드와 백엔드 Ajax 상호작용 방법(코드 포함)을 요약해서 가져오겠습니다. 프런트엔드와 백엔드 Ajax 상호작용에 대한 주의사항은 무엇인가요? 보세요.

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

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

/auth/getUser?userid='6'

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

두 개의 단일 값 매개변수 전달 방법

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

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

서버 측:

public String exchangeSort(String id, String otherid)

세 가지 개체 매개변수 전달 방법

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

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 코드:

rr 리

I 이 글의 사례를 읽으신 후 방법을 마스터하셨다고 믿으세요. 자세한 내용은 PHP 중국어 웹사이트의 다른 관련 글도 주목해 주세요!

추천 자료:

jsonp+json은 AJAX 도메인 간 요청을 구현합니다

jQuery에서 ajax를 호출하여 비동기

를 구현합니다.

위 내용은 프런트엔드 및 백엔드 Ajax 상호작용 방법 요약(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!