對於想要搞web的新手而言，會用html+css+javascript實現一個頁面沒什麼太大的困難，但是想要前後端實現資料互動，在沒有指導的情況下，可能大多數人都會一頭霧水，往往都會有以下的疑問。

目錄

網站資料處理主要分為三層。 第一層，表示層，這部分可以用HTML程式碼，CSS/Javascript程式碼來實現等。通過前端程式碼可以實現網頁的佈局和設計。這層又可以稱為顯示層。也就是你用瀏覽器開啟能看到的網頁。 第二層，是業務層，這層是負責處理資料的。常用的程式碼語言有PHP,JSP，Java等。通過這些後臺處理語言的演算法來處理前臺傳回的資料。必要的時候進行操作資料庫，然後把結果返回給前端網頁。 第三層，是資料層，這個就是資料庫，用來儲存資料的。通過業務層的操作可以實現增刪改資料庫的操作。 ①你接觸到的是這個網頁是屬於表示層，這個網頁一般由HTML標籤結合CSS/JAVASCRIPT來實現的。 這時候你要先填入資料。 ②然後你按提交觸發後臺處理機制，這時候資料會傳到後臺的程式碼進行處理。這部分程式碼根據不同網站可以使PHP,JSP，JAVA等。 程式碼根據程式設計師預設的演算法將收到的資料進行處理之後會相應的對資料庫進行操作，儲存資料等。 ③成功操作完資料庫之後，業務層的程式碼會再向表示層也就是顯示器端傳回一個指令通知你表格填寫成功

從前端向後端傳遞引數方法

一、通過表單傳遞引數

1.前端部分，在前端jsp頁面設定form表單，確定需要傳遞的引數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.後臺對前端請求的反應，接收資料，處理資料以及返回資料。

@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傳遞引數（有post和get寫法）

1.ajax是如何將前端資料傳到後臺的

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",//引數url,要把引數傳到什麼地方

                        data : {parentid:parentid,parentpath:parentpath},//傳遞什麼資料

                        success : function(data){//sucess表示，當資料返回成功後要怎麼做，返回的資料儲存在data

2.後臺對前端請求的反應，接收資料，處理資料以及返回資料。

@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)){
			// 系統內建管理員 預設獲取全部授權
			list = resourceservice.queryAllMenuCascade(parentpath);
		}else{
			list = resourceservice.queryUserMenuCascade(user.getId(), parentpath);
		}
		// 初始化根節點
		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.再看看前端接收到後端返回的資料是如何處理的

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"/>'
				});
			}
		});
	}