让我们继续来做 "主线任务",这一节,我们来做具体的用户新增功能.首先,为了简单起见,我把主页面改了一些,改的是列表那一块.删去了一些字段,和数据库表对应一致:
现在,我们要实现一个效果,就是当我点击新增用户的按钮时,就弹出一个框来.因为我们使用的是 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");
}
画好了对话框,我们需要给保存按钮写对应的函数:
这个 saveUser 函数中,首先是用 jQuery 去获取每个文本框或者下拉框的值,然后依次判断是否为空,如果为空,就给出对应的提示.
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;
}
}
然后,我们还需要用一个 json 数据将这些内容保存起来,到时候传递给后台的就是一个 json 数据.
效果:
// 开始拼接 json 数据,为了传递给后台
var json = {};
json.username = username;
json.password = password;
json.name = name;
json.sex = sex;
console.log(json);
这样一来,我们是不是可以拿到表单数据啦?OK,那么下一步,就是把这些数据传递到后台.
写一个 UserController,作为控制器:
我们先不急着写代码,先看下这个 Controller 是否编写正确,于是乎,我们在里面打印一句话即可:
@Controller
public class UserController {
@RequestMapping("/addUser")
public void addUser(HttpServletRequest request , HttpServletResponse response){
}
}
让我们启动 Tomcat 服务器,然后打开浏览器,在地址栏输入:
@Controller
public class UserController {
@RequestMapping("/addUser")
public void addUser(HttpServletRequest request , HttpServletResponse response){
System.out.println("进来咯!~~");
}
}
http://localhost/student/addUser.do
为什么是. do 呢?那是因为我们在 web.xml 中进行了配置,让 springMVC 只拦截 *.do 的请求.
效果:
成功了.
接下来,用 ajax 传递数据给 Controller
填写表单,点击保存按钮:
// 使用 ajax 传递到后台
$.post("addUser.do",json,function(data){
// 这里是处理返回数据的回调函数
},"json");
发现进来了:
好的,这一节我们先聊到这里.
来源: http://www.jianshu.com/p/48a887d60aee