① 求解,前端和后端交互需要学什么比如说,后端发送数据,前端接收到数据后自动生成数据的折线图或表格。
要学习前端和后端沟通的桥梁 http协议,前端和后端是典型的B/S结构,客户端(前端)提交Request(请求),有服务器端(后端)提供响应(Response),Request有get,post,put等方法,Response有各种返回的状态码
要学习现在主流的Web交互方式(前端和后端交互)RESTful,使用JSON格式描述数据
要学习后端技术,比如nodejs
要学习前端技术,javascript和流行的框架reactjs,vuejs等,可以简单方便的实现数据的双向绑定,一般的数据表格可以轻松展现
如要要把数据生成复杂的表格或图形还需要更强大的数据图形类的框架来实现,流行的有d3js,chartjs等
② 前端怎么获取后台所有的ld所有数据啊。每个id都是不同的内容数据。
ajax, 页面完成之后就是,document ready后,向后台发送请求,后台接受到前台发送的请求之后就查询session的用户数据判断用户登录,不同的情况会发送不同的code值和数据,比如说没有登录 ,发送code=0 前台接受到之后就知道是没有登录 然后就显示 请 登 录 这样的 如果登录是code = 1 然后后面跟data= {uid = xxx}这样的 接受到code=1了 就说明已经登录了 在返回的data里获取信息显示出来就可以了
你可以去后盾人平台看一下,里面的东西不错
③ mvc3 前端如何动态获取后台更新的数据
在MVC3中建数据库,如何取得当前时间?
不清楚你的具体需求,如果是数据库自己获取时间的话,设置那个field的default值为getdate()
④ 怎么使用 JavaScript 将网站后台的数据变化实时更新到前端
要实现这个功能,要用到ajax获取后端数据,和前端js定时器的知识,
首先自定义一个ajax获取要显示在html页面上的数据的方法,例如方法getdata,这个方法把获取的返回值,通过js动态的显示到html页面要显示的区域,然后再写一个js定时器来实现实时调用数据,如:
<script>
//定时器 异步运行
function hello(){
alert("hello");
}
var t2 = window.setTimeout("hello()",3000); //定时器
//window.clearTimeout(t2);//去掉定时器
</script>
把里面的hello方法换成你ajax获取数据的方法名,然后改下定时器里面的方法名和时间,这里设置的是3秒钟执行一次可以设置成你自己要的数据,就实现了你要的页面实时调用数据了。
⑤ react 点击下载,后台接到请求,在列表里添加数据,前端获取后台数据实现实时更新
react 本来就可以通过数据来对页面进行更新渲染。
我写了一个例子,你可以看下。我使用setInterval来模拟了数据的更新。
网页链接
importReact,{Component}from'react';
import{render}from'react-dom';
importHellofrom'./Hello';
import'./style.css';
classTestextendsComponent{
render(){
return(
<div>{this.props.data}</div>
)
}
}
classAppextendsComponent{
constructor(){
super();
this.data=1;
this.state={
name:'React'
};
}
componentDidMount(){
setInterval(()=>{
this.setState({data:this.data++})
},2000)
}
render(){
return(
<div>
<Helloname={this.state.name}/>
<p>
:)
</p>
<Testdata={this.state.data}/>
</div>
);
}
}
render(<App/>,document.getElementById('root'));
⑥ 前端如何将后台的数据根据接口展现出来,如图所示,后台使用的JAVA,
要看后端提供什么协议。
比如后端提供http协议访问,前端可以通过发送http请求,让后端返回数据,前台用html、css、js等将数据组装成页面。
⑦ 如何获取后台的数据,在前端显示提交后台之前的网页
function getList(menuId){
setCookie("num",menuId.replace('num',''));
var cid = menuId.replace('num','');
Ajax.post('/shouyi/shouyi/findShouyi.do',{
cateId:0
},function(data){
var json = JSON.parse(data.responseText),
arr = json.data;
var index = document.querySelector(".index");
var box = document.querySelector(".box");
var result = '';
for(var i = 0;i<arr.length;i++){
var numm = arr[i].categoryId;
var str = '<a target="_blank"><div class="box" id='+arr[i].id+'>'+
' <img class="image" src='+arr[i].picUrl+'>'+
' <div class="text">'+arr[i].titel+'</div>'+
' <div class="content">'+arr[i].content.substring(0,20)+'</div>'+
' <div class="time" onclick="changeCate(this,'+arr[i].id+')" id=ID'+i+'>'+chuan(numm)+'</div>'+
'</div></a>'
result += str;
}
index.innerHTML = result;
});
}
⑧ 前端如何做与后台数据的对接
现在在前端获取后台数据的主流方式是使用Ajax异步载入0。前端页面通过Ajax向后台请求数据,后台在放回给前端页面如果你有前端js基础和后台动态页面基础的话只需要学习Ajax就可以,个把小时就能学会用了。初学的话你要先了解下B/S架构的原理,虽然简单,但是很重要,这个原理贯穿在整个动态网站的设计制作之中。具体学习的话你可以上W3school网站上学,上面相关的web设计制作资料都比较全,也浅显易懂。建议学习的顺序为HTML-》CSS-》Javascript-》XML-》PHP(或asp或.Net)。
希望对你有帮助。
⑨ spring mvc 前端怎么获取后端数据
方式一 通过 URL 传参
通过 URL 挂接参数,如 /auth/getUser?userid='6'
服务器端方法可编写为: 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)
方式四 对象序列化传参
前台调用如:
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;
}
方式五 列表传参
前台代码如:
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<UserHome> 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;
}