① 求解,前端和後端交互需要學什麼比如說,後端發送數據,前端接收到數據後自動生成數據的折線圖或表格。
要學習前端和後端溝通的橋梁 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;
}