來源：Gefangen 發(fā)布時間：2018-11-14 09:59:55 閱讀量：1295
對于想要搞web的新手而言，會用html+css+javascript實現(xiàn)一個頁面沒什么太大的困難，但是想要前后端實現(xiàn)數(shù)據(jù)交互，在沒有指導的情況下，可能大多數(shù)人都會一頭霧水，往往都會有以下的疑問。
目錄
1、數(shù)據(jù)是怎么發(fā)送到后端？
2、后端是怎么接收到前端發(fā)送過來的數(shù)據(jù)？
3、后端怎么對前端發(fā)送來的數(shù)據(jù)進行處理？
4、處理完之后又怎么寫入數(shù)據(jù)庫，以及給前端返回處理結(jié)果？
網(wǎng)站數(shù)據(jù)處理主要分為三層。
第一層，表示層，這部分可以用HTML代碼，CSS/Javascript代碼來實現(xiàn)等。通過前端代碼可以實現(xiàn)網(wǎng)頁的布局和設(shè)計。這層又可以稱為顯示層。也就是你用瀏覽器打開能看到的網(wǎng)頁。
第二層，是業(yè)務(wù)層，這層是負責處理數(shù)據(jù)的。常用的代碼語言有PHP,JSP，Java等。通過這些后臺處理語言的算法來處理前臺傳回的數(shù)據(jù)。必要的時候進行操作數(shù)據(jù)庫，然后把結(jié)果返回給前端網(wǎng)頁。
第三層，是數(shù)據(jù)層，這個就是數(shù)據(jù)庫，用來存儲數(shù)據(jù)的。通過業(yè)務(wù)層的操作可以實現(xiàn)增刪改數(shù)據(jù)庫的操作。
①你接觸到的是這個網(wǎng)頁是屬于表示層，這個網(wǎng)頁一般由HTML標簽結(jié)合CSS/JAVASCRIPT來實現(xiàn)的。 這時候你要先填入數(shù)據(jù)。
②然后你按提交觸發(fā)后臺處理機制，這時候數(shù)據(jù)會傳到后臺的代碼進行處理。這部分代碼根據(jù)不同網(wǎng)站可以使PHP,JSP，JAVA等。 代碼根據(jù)程序員預設(shè)的算法將收到的數(shù)據(jù)進行處理之后會相應的對數(shù)據(jù)庫進行操作，存儲數(shù)據(jù)等。
③成功操作完數(shù)據(jù)庫之后，業(yè)務(wù)層的代碼會再向表示層也就是顯示器端傳回一個指令通知你表格填寫成功
從前端向后端傳遞參數(shù)方法
一、通過表單傳遞參數(shù)
1.前端部分，在前端jsp頁面設(shè)置form表單，確定需要傳遞的參數(shù)name讓用戶輸入，通過點擊按鈕后submit()提交到后臺
<form id="loginform" name="loginform" action="<%=path %>/login" method="post">
<div class="form-group mg-t20">
<i class="icon-user icon_font"></i>
<input type="text" class="login_input" id="sfzh" name="sfzh" placeholder="請輸入用戶名" />
</div>
<div class="form-group mg-t20">
<i class="icon-lock icon_font"></i>
<input type="password" class="login_input" id="pwd" name="pwd" placeholder="請輸入密碼" />
</div>
<div class="checkbox mg-b25">
<label>
<!-- <input type="checkbox" />記住密碼 -->
</label>
<span style="color: red;" id="error">
<%
String message = (String)request.getAttribute("message");
if(StringUtils.isNotBlank(message)){ %>
<%=message %>
<%
}
%>
</span>
</div>
<button id="login" type="submit" style="submit" class="login_btn">登 錄</button>
</form>
2.后臺對前端請求的反應，接收數(shù)據(jù)，處理數(shù)據(jù)以及返回數(shù)據(jù)。
@RequestMapping(method=RequestMethod.POST)
public String dologin(String sfzh, String pwd, RedirectAttributes redirectAttributes){
User query = new User();
query.setUserAccount(sfzh);
HttpSession session = HttpSessionUtil.getHttpSession();
List<User> userlist = userService.select(query);
二．通過ajax傳遞參數(shù)（有post和get寫法）
1.ajax是如何將前端數(shù)據(jù)傳到后臺的
function leftmenu(parentid, parentpath,moduleindex){
var leftcontent="";
$.ajax({
type: "POST",
url : "<%=path%>/resource/usermenus",
data : {parentid:parentid,parentpath:parentpath},
success : function(data){
// 處理head menu是否有頁面要打開
leftcontent= template('_menu2tmpl',data);
$('.nav').html(leftcontent);
addclick();
//臨時點擊顯示菜單
if($('.index-left-warp').width()==0){
$(".index-left-show").hide();
$(".index-left-warp").animate({width:"200px"},250);
timer=setTimeout(function(){
tabsResize();
},500);
};
$(".nav").accordion({
//accordion: true,
speed: 500,
closedSign: '<img src="<%=path%>/images/menu_close.png"/>',
openedSign: '<img src="<%=path%>/images/menu_open.png"/>'
});
}
});
}
$.ajax({
type: "POST",//type是ajax的方法
url : "<%=path%>/resource/usermenus",//參數(shù)url,要把參數(shù)傳到什么地方
data : {parentid:parentid,parentpath:parentpath},//傳遞什么數(shù)據(jù)
success : function(data){//sucess表示，當數(shù)據(jù)返回成功后要怎么做，返回的數(shù)據(jù)存儲在data
2.后臺對前端請求的反應，接收數(shù)據(jù)，處理數(shù)據(jù)以及返回數(shù)據(jù)。
@ResponseBody
@RequestMapping(value = "usermenus")
public Map<String, Object> usermenus(String parentid, String parentpath) {
UserDetail user = HttpSessionUtil.getSessionUser();
String appadmin = Config.getInstance().getCustomValue("app.admin");
List<Resource> list = null;
if(user.getUserAccount().equals(appadmin)){
// 系統(tǒng)內(nèi)置管理員 默認獲取全部授權(quán)
list = resourceservice.queryAllMenuCascade(parentpath);
}else{
list = resourceservice.queryUserMenuCascade(user.getId(), parentpath);
}
// 初始化根節(jié)點
Resource root= new Resource();
root.setId(parentid);
Collections.sort(list, new Comparator<Object>() {
public int compare(Object o1, Object o2) {
Resource resource1 = (Resource) o1;
Resource resource2 = (Resource) o2;
if (resource1.getSort() > resource2.getSort()) {
return 1;
}
if (resource1.getSort() < resource2.getSort()) {
return -1;
}
//如果返回0則認為前者與后者相等
return 0;
}
});
// 組裝Tree
return RecDHTree(root,list);
}
3.再看看前端接收到后端返回的數(shù)據(jù)是如何處理的
function leftmenu(parentid, parentpath,moduleindex){
var leftcontent="";
$.ajax({
type: "POST",
url : "<%=path%>/resource/usermenus",
data : {parentid:parentid,parentpath:parentpath},
success : function(data){
// 處理head menu是否有頁面要打開
leftcontent= template('_menu2tmpl',data);
$('.nav').html(leftcontent);
addclick();
//臨時點擊顯示菜單
if($('.index-left-warp').width()==0){
$(".index-left-show").hide();
$(".index-left-warp").animate({width:"200px"},250);
timer=setTimeout(function(){
tabsResize();
},500);
};
$(".nav").accordion({
//accordion: true,
speed: 500,
closedSign: '<img src="<%=path%>/images/menu_close.png"/>',
openedSign: '<img src="<%=path%>/images/menu_open.png"/>'
});
}
});
}
---------------------
作者：Gefangen
來源：CSDN
原文：https://blog.csdn.net/Gefangen/article/details/83472898
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請附上博文鏈接！
13450931319
微信登錄
QQ登錄
微博登錄
售前咨詢
