以添加为例---
页面的代码片:
<!-- 引用百度的jquery -->
<script type="text/javascript"
src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//定义false是为了在浏览器重复登陆是 后面的<sapn>内容不连缀
var username = false;
var password = false;
var age = false;
var sex = false;
$("#username").blur(function() {
$("#s").empty();
uname = $(this).val();
if ($(this).val() == null || $(this).val() == '') {
var span = $("<span id='s'>*用户名不能为空*</span>");
$(this).after(span);
username = false;
} else {
username = true;
}
});
$("#password").blur(function() {
$("#sd").empty();
upass = $(this).val();
if ($(this).val() == null || $(this).val() == '') {
var span = $("<span id='sd'>*用户密码不能为空*</span>");
$(this).after(span);
password = false;
} else {
password = true;
}
});
//判断age属性
$("#age").blur(function() {
//销毁的方法
$("#sda").empty();
//获得此属性的值用于ajax传值
uage = $(this).val();
if ($(this).val() == null || $(this).val() == '') {
var span = $("<span id='sda'>*用户年龄不能为空*</span>");
//把span在页面上放在此框的后面
$(this).after(span);
age = false;
} else {
age = true;
}
});
//通过jquery和正则表达式格式 验证邮箱
$("#sex")
.blur(
function() {
$("#sdaa").empty();
$("#sdaag").empty();
usex = $(this).val();
if ($(this).val() == "") {
var span = $("<span id='sdaa'>邮箱不能为空</span>");
$(this).after(span);
sex = false;
}
if (!$(this)
.val()
.match(
/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/)) {
var span = $("<span id='sdaag'>邮箱格式不正确或</span>");
$(this).after(span);
sex = false;
}
sex = true;
});
//用AJAX提交传递数据
$("#tj")
.click(
function() {
//判断用户名那个和密码都为true是执行提交,否则输出"请正确添加用户信息!"
if (username && password) {
$
.post(
"${pageContext.request.contextPath }/user/addUser",
{
"username" : uname,
"password" : upass,
"age" : uage,
"sex" : usex
},
function(d) {
if (d == "show") {
alert("恭喜你,添加成功!");
location.href = "${pageContext.request.contextPath }/user/findAll";
} else {
alert("添加失败,用户名不能重复!");
//刷新本页页面
location.reload();
}
}, "json");
} else {
alert("请正确添加用户信息!");
}
});
});
</script>
</head>
<body>
<center>添加页面</center>
<form action="" method="post">
username:<input type="text" name="username" id="username" /><br />
age:<input type="text" name="age" id="age" /><br />
sex:<input type="text" name="sex" id="sex" /><br />
password:<input type="text" name="password" id="password" /><br />
<input type="button" value="添加" id="tj" /><br />
</form>
</body>
controller控制类:
@RequestMapping("addUser")
@ResponseBody
public String addUser(User user) {
boolean b = service.selectByName(user.getUsername());
if(b==true){
service.addUser(user);
//为ajax返回一个字符串
return "show";
}
return "add";
}
springmvc.xml配置文件:
<mvc:annotation-driven>
<mvc:message-converters register-defaults="false">
<!-- 避免IE执行AJAX时,返回JSON出现下载文件 -->
<bean id="fastJsonHttpMessageConverter" class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<!-- 这里顺序不能反,一定先写text/html,不然ie下出现下载提示 -->
<!-- <value>text/html;charset=UTF-8</value> -->
<value>application/json;charset=UTF-8</value>
</list>
</property>
</bean>
</mvc:message-converters>
</mvc:annotation-driven>