讓我們繼續來做“主線任務”,這一節,我們來做具體的用戶新增功能。首先,為了簡單起見,我把主頁面改了一些,改的是列表那一塊。刪去了一些字段,和數據庫表對應一致:
現在,我們要實現一個效果,就是當我點擊新增用戶的按鈕時,就彈出一個框來。因為我們使用的是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");
填寫表單,點擊保存按鈕:
發現進來了:
好的,這一節我們先聊到這里。