前端如何获取后端数据(前端获取后端数据怎么展示)

大哥,请讲解下,前端如何获取后端数据(前端获取后端数据怎么展示)
最新回答
记得以往爱过

2024-10-16 08:17:55

前端如何连接到后端

首先分两步来研究,第一步,前端请求后端接口,不去理会后端是如何实现的,只关注后端给我返回哪些数据,数据结构是怎样的。请求方法去参照各大框架或者浏览器自带的方法说明,该用GET用GET,该用POST用POST。获取到数据自行处理。

再者,处理node端,我需要给前端哪些字段,这些字段之间如何组织,我是否可以从数据库中直接得到还是需要进行一定的加工处理。这些都在node端完成。当两端对接好了一个如何接受,一个如何输出,你的问题就解决了!

前端用js和Ajax请求后端接口,

后端返回数据,

前端拿到数据以后再做处理。

以上就是前端如何的连接到后端的一个过程,如果你还不会的话,可以去网上找一些教程来学习!

springmvc前端怎么获取后端数据

方式一通过URL传参

通过URL挂接参数,如/auth/getUser?userid='6'

服务器端方法可编写为:getUser(Stringuserid),也可新增其他参数如HttpSession,HttpServletRequest,HttpServletResponse,Mode,ModelAndView等。

方式二单值传参

前台调用如:

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

xxxxxx

xxxxxx

});

服务器端为:

publicStringexchangeSort(Stringid,Stringotherid)

方式三对象传参

前台调用如:

varorg={id:id};

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

xxxx

xxxx

});

服务器端为:

publicOrggetOrgById(Orgorg)

方式四对象序列化传参

前台调用如:

varueser={id:rowId};

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

或者

varueser={};//创建对象

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

publicUserInfofindById(StringuserObj){

//使用fastJSON

UserInfouser=JSON.parseObject(userObj,UserInfo.class);

user=(UserInfo)userService.findById(UserInfo.class,user.getId());

returnuser;

}

方式五列表传参

前台代码如:

varobjList=newArray();

grid.forEachRow(function(rId){

varindex=grid.getRowIndex(rId);

varobj={};

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()!=nullgrid.cells(rId,3).getValue()!=""){

varstr=grid.cells(rId,3).getValue().split("-");

varday=parseFloat(str[2]);

varmonth=parseFloat(str[1])-1;

varyear=parseInt(str[0]);

vardate=newDate();

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

publicStringaddUpdateUserHomeList(StringuserHomeList,StringuserId){

ListUserHomeuserHomes=JSON

.parseArray(userHomeList,UserHome.class);//fastJSON

if(userHomes!=nulluserHomes.size()0){

try{

userService.addUpdateUserHomeList(userHomes,userId);

}catch(Exceptione){

e.printStackTrace();

}

}

return"200";

}

附上ajaxPost代码:

functionajaxPost(url,dataParam,callback){

varretData=null;

$.ajax({

type:"post",

url:url,

data:dataParam,

dataType:"json",

success:function(data,status){

//alert(data);

retData=data;

if(callback!=nullcallback!=""callback!=undefined)

callback(data,status);

},

error:function(err,err1,err2){

alertMsg.error("调用方法发生异常:"+JSON.stringify(err)+"err1"+JSON.stringify(err1)+"err2:"+JSON.stringify(err2));

}

});

returnretData;

}

[程序员]前端axios如何分段获取后端的数据

分页加载获取。前端axios可以通过分页加载和滚动加载的方式获取数据。前端axios可以通过分段获取后端的数据来提高页面加载速度和响应时间,同时减轻服务器压力。