ssm框架之jquery和AJAX验证

最新推荐文章于 2021-08-05 23:30:40 发布

原创最新推荐文章于 2021-08-05 23:30:40 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

ssm框架理解同时被 2 个专栏收录

10 篇文章

订阅专栏

框架理解

9 篇文章

订阅专栏

以添加为例---

页面的代码片：

<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">



<bean id="fastJsonHttpMessageConverter" class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">

<property name="supportedMediaTypes">

<list>





<value>application/json;charset=UTF-8</value>

</list>

</property>

</bean>

</mvc:message-converters>
</mvc:annotation-driven>