首页 > 代码库 > ajax和servlet交互，表单日历插件，表单验证，form.js
ajax和servlet交互，表单日历插件，表单验证，form.js
我的index.jsp
<body>
<a>点我获取数据</a>
<table border=1px>
<tr>
<td>ID</td>
<td>姓名</td>
<td>地址</td>
</tr>
</table>
</body>
我的servlet:
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
List<User> list = new ArrayList<User>();
for (int i = 1; i < 11; i++) {
list.add(new User(i, "张x" + i, "北京" + i + "区"));
}
String strs = JSONArray.fromObject(list).toString();
PrintWriter out=response.getWriter();
out.print(strs);
我的js:
$(function() {
$("a").click(function(){
var tr = $("tr:last");
$.ajax({
url : "servlet/TestSer",
type : "POST",
//dataType:"JSON",
success : function(data) {
data=http://www.mamicode.com/eval(data);
$.each(data, function() {
var ss = $("<tr><td>" + this.id+ "</td><td>" + this.name+ "</td><td>" + this.address+ "</td></tr>");
tr.after(ss);
tr = ss;
})
}
})
})
});
用$.ajax()这个方法取到的data是个字符串，如果直接循环是得不到数据的，这里有两种方法解决：
1：是设置dataType:"JSON",
2：是data=http://www.mamicode.com/eval(data);把data转换成对象。
***************************************************************************************************************************
日期控件
只需导入js文件
<script type="text/javascript" src="http://www.mamicode.com/WdatePicker.js"></script>
出生日期
<input type="text" name="brondate" onClick="WdatePicker()" >
然后加上onClick时间就行!
表单验证:
如果要修改错误样式:
label.error {
color: red;
font-size: 14px;
background: url( error.jpg) 0px -2px no-repeat;
padding-left: 20px;
line-height: 20px;
}
使用validate.js必须先注册事件:
表单.validate
$(function() {
$("#f").validate( {
}
)
})
标签里可以直接加上class=””;
(1) required:true 必输字段
(2) remote:"check.php" 使用ajax方法调用check.php验证输入值
(3) email:true 必须输入正确格式的电子邮件
(4) url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期 日期校验ie6出错，慎用
(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格 式，不验证有效性
(7) number:true 必须输入合法的数字(负数，小数)
(8) digits:true 必须输入整数
(9) creditcard: 必须输入合法的信用卡号
(10) equalTo:"#field" 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀） (12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符) (13)minlength:10 输入长度最小是10的字符串(汉字算一个字符) (14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10
左边的参数,不必带值
比如:我要验证邮箱
邮箱 <input type="text" name="email" class="email">
如果需要多个验证则不必一个一个加class,用$(“表单”).validate({})的方式:
$(function() {
$("#f").validate( {
//验证规则
rules : {
//字段名字name
password : {
//当前字段验证规则
required : true,// 必填
minlength : 5,// 最小长度
maxlength : 10
//最大长度
},
age : {
required : true,
digits : true,//只能输入整数
max : 100,// 最大值
min : 18
// 最小值
},
brondate : {
dateISO : true
},
file : {},
weight : {
number : true
},
loginname : {
remote : {
type : "POST",
url : "jsonservlet" //servlet
}
}
}
messages: { firstname: "请输入姓名", email: {
required: "请输入Email地址", email: "请输入正确的email地址"
},
password: {
required: "请输入密码",
minlength: jQuery.format("密码不能小于{0}个字 符")
},
confirm_password: { required: "请输入确认密码",
minlength: "确认密码不能小于5个字符", equalTo: "两次输入密码不一致不一致"
}
}
});
});
*****************************************************************
validate({})里有不同的参数,其中rules : {}为验证规则.
messages: {}可以修改错误提示信息的提示内容!
form.js表单提交,导入js
<script type="text/javascript" src="http://www.mamicode.com/jquery.form.js"></script>
Html代码为:
<form action="jsonservlet" id="f">
<input type="hidden" name="id">
姓名
<input type="text" name="name" class="required">
<br />
年龄
<input type="text" name="age">
<br />
密码
<input type="password" name="password">
<br />
邮箱
<input type="text" name="email">
<br />
<input type="submit">
</form>
js代码为:
(function() {
$("#f").submit(function() {
// 序列化表单
var data = $("#f").formSerialize();
alert(data);
$.ajax( {
url : "",
type : "POST",
//data:{name:""}
data : data,
success : function() {
}
});
return false;
});
// 注册该form为一部提交
$("#f").ajaxForm(function(msg) {
alert(msg);
$("[name=id]").val(msg);
});
});
其中序列化表单相当于把表单的每个表单标签里的name和value以?后的参数=值的方式提交了过去.如下:(id是隐藏域没赋值)
id=&name=%E5%BC%A0%E4%B8%89&age=30&password=123456789&email=zs%40qq.com
然后:
// 注册该form为一部提交
$("#f").ajaxForm(function(msg) {
alert(msg);
$("[name=id]").val(msg);
});
可以用回调函数判断是否已有注册名,如有给出提示,如果注册成功,再跳转页面.
还可以把表单数据暂存到隐藏列里面暂存,等到想提交的时候再提交!
ajax和servlet交互，表单日历插件，表单验证，form.js