【Java框架型項目從入門到裝逼】第十一節 用戶新增之把數據傳遞到后台


讓我們繼續來做“主線任務”,這一節,我們來做具體的用戶新增功能。首先,為了簡單起見,我把主頁面改了一些,改的是列表那一塊。刪去了一些字段,和數據庫表對應一致:

現在,我們要實現一個效果,就是當我點擊新增用戶的按鈕時,就彈出一個框來。因為我們使用的是EasyUI組件,所以我們可以用dialog組件來完成那個彈窗界面。

對話框(dialog)是一個特殊類型的窗口,它在頂部有一個工具欄,在底部有一個按鈕欄。默認情況下,對話框(dialog)只有一個顯示在頭部右側的關閉工具。用戶可以配置對話框行為來顯示其他工具(比如:可折疊 collapsible、可最小化 minimizable、可最大化 maximizable,等等)。

代碼:

<div id="dlg" class="easyui-dialog" title="新增用戶" style="width: 300px;height: 300px;padding: 10px 20px" closed="true" buttons="#dlg-buttons">
	<form id="fm" method="post">
		<!-- 這里畫了一個table -->
		<table cellspacing="8px">
			<!-- 這個是table的第一行 -->
			<tr>
				<td>用戶名:</td> 
				<td>
					<input type="text" id="username" name="username" class="easyui-validatebox" required="true" />
				</td>
			</tr>
			<tr>
				<td>密碼:</td>
				<td>
					<input type="text" id="password" name="password" class="easyui-validatebox" required="true" />
				</td>
			</tr>
			<!-- 這個是table的第二行 -->
			
			<tr>
				<td>姓名:</td>
				<td>
					<input type="text" id="name" name="name" class="easyui-validatebox" required="true"/>
				</td>
			</tr>
			
			<tr>
				<td>性別:</td>
				<td>
					<select class="easyui-combobox" data-options="value:'男'"  style="width: 144px" id="sex"  required="true"
						editable="false" panelHeight="auto">
						<option value="男">男</option>
						<option value="女">女</option>
					</select>
				</td>
			</tr>
			
		</table>
	</form>
</div>

<div id="dlg-buttons">
	<a href="javascript:saveUser()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
</div>

效果:

接下來,給新增按鈕編寫對應的點擊事件:

function openUserAddPage(){
	$("#dlg").dialog("open");
}

這樣一來,當我們點擊按鈕的時候,那個對話框就會自己跳出來哦。

畫好了對話框,我們需要給保存按鈕寫對應的函數:

function saveUser(){
	var username = $('#username').val();
	var password = $('#password').val();
	var name = $('#name').val();
	var sex = $('#sex').combobox('getValue');
	

	if(!username){
		alert("用戶名不能為空!");
		return;
	}
	
	if(!password){
		alert("密碼不能為空!");
		return;
	}
	
	if(!name){
		alert("姓名不能為空!");
		return;
	}
	
	if(!password){
		alert("性別不能為空!"); 
		return;
	}
	
	
	
}

這個saveUser函數中,首先是用jQuery去獲取每個文本框或者下拉框的值,然后依次判斷是否為空,如果為空,就給出對應的提示。

然后,我們還需要用一個json數據將這些內容保存起來,到時候傳遞給后台的就是一個json數據。

//開始拼接json數據,為了傳遞給后台
var json = {};
json.username = username;
json.password = password;
json.name = name;
json.sex = sex;

console.log(json);

效果:

這樣一來,我們是不是可以拿到表單數據啦?OK,那么下一步,就是把這些數據傳遞到后台。

寫一個UserController,作為控制器:

@Controller
public class UserController {
	
	@RequestMapping("/addUser")
	public void addUser(HttpServletRequest request , HttpServletResponse response){
		
	}
}

我們先不急着寫代碼,先看下這個Controller是否編寫正確,於是乎,我們在里面打印一句話即可:

@Controller
public class UserController {
	
	@RequestMapping("/addUser")
	public void addUser(HttpServletRequest request , HttpServletResponse response){
		System.out.println("進來咯!~~");
	}
}

讓我們啟動Tomcat服務器,然后打開瀏覽器,在地址欄輸入:
http://localhost/student/addUser.do
為什么是.do呢?那是因為我們在web.xml中進行了配置,讓springMVC只攔截*.do的請求。

效果:

成功了。

接下來,用ajax傳遞數據給Controller

//使用ajax傳遞到后台
$.post("addUser.do",json,function(data){
	//這里是處理返回數據的回調函數 
	
},"json");

填寫表單,點擊保存按鈕:

發現進來了:

好的,這一節我們先聊到這里。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM