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=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=eval(data);把data转换成对象。
***************************************************************************************************************************
日期控件
只需导入js文件
<script type="text/javascript" src="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="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的更多相关文章
- ajax和servlet交互
网上有比较多的教程来将如何实现ajax与servlet的交互了,这里和这里的教程可以参考参考,在此处我只简单说明一下,并记录一下我这次遇到的问题. 整个思路是:写个js函数,在里面使用XHR(ajax ...
- Ajax提交form表单内容和文件（jQuery.form.js）
jQuery官网是这样介绍form.js A simple way to AJAX-ify any form on your page; with file upload and progress s ...
- JavaScript之form表单的序列化和json化[form.js]
一.应用场景 form提交时,使用ajax提交. 二.效果 通过本工具,实现表单所有form的快速序列化和json化,使前端人员在ajax提交form表单的时,脱离重复性的,大劳动量的手动抽取form ...
- ajax与servlet交互（通过JSON）,JAVA的arraylist传到前端的方法
所实现的效果:首先从前端(ajax)传参数给servlet,然后servlet经过处理,把arraylist类型的参数以JSON字符串的形式返回给前端(ajax),然后前端经过解析,把JSON字符串解 ...
- [oldboy-django][2深入django]form表单clean_xx, clean完成数据验证+ form错误信息
form后台生成form里面的Input标签,以及设置Input的属性 # 需求 后台生成form里面的input标签,并设置input标签的属性, class RegisterForm(Form): ...
- 进一步丰富和简化表单管理的组件：form.js
上文<简洁易用的表单数据设置和收集管理组件>介绍了我自己的表单管理的核心内容,本文在上文的基础上继续介绍自己关于表单初始值获取和设置以及表单数据提交等内容方面的做法,上文的组件粒度很小,都 ...
- jquery双日历日期选择器bootstrap-daterangepicker日历插件
这个插件既可以作为双日历也可以作为单日历插件(jquery的插件在jquery插件库中http://www.jq22.com/下载很方便,在CSDN下载真麻烦) 引用 <meta http-eq ...
- 一款基于jQuery日历插件的开发过程
这个插件的设置选项,所有样式都设置成自定义,提供回调函数,方便在外部进行扩展 css设置是可变的 也就是说 日历的样式是定制的: /******************************** ...
- EasyUI Calendar 日历插件，只显示年月。
从别人的博客园搬过来的,放在这里只是为了方便自己用.已经注明原文出处,尊重别人的劳动成果. 原文地址:http://www.cnblogs.com/hmYao/p/5779463.html 此日历插件 ...
随机推荐
- 一次性搞清楚equals和hashCode
前言 在程序设计中,有很多的“公约”,遵守约定去实现你的代码,会让你避开很多坑,这些公约是前人总结出来的设计规范. Object类是Java中的万类之祖,其中,equals和hashCode是2个非常 ...
- Android笔记：利用InputStream和BufferedReader 进行字节流 字符流处理
通过socket获取字节流处理时最初使用的是BufferedReader和PrintWriter 这种方式在解析字符串时是比较方便的 但是在处理字节时不够方便最终还是回归到InputStream和O ...
- App 上线流程
http://www.cocoachina.com/bbs/read.php?tid=330302
- JMeter学习-015-JMeter 断言之-Bean Shell Assertion
前面的博文中有对 JMeter 中的 响应断言 进行了讲解并实例演示,详情敬请参阅博文:JMeter学习-007-JMeter 断言实例之一 - 响应断言. 在 JMeter 中总计提供了如下几种 B ...
- Fiddler-007-修改HTTP请求响应数据
前文简述了如何通过 Fiddler 修改 HTTP请求 的请求参数,详情请参阅:Fiddler-006-修改HTTP请求参数. 在进行 App 测试时,经常需要修改请求参数,以获得不同的显示效果,以查 ...
- 1.Oracle数据库概述
Oracle数据库概述 1.1Oracle结构图 1.1如何访问数据库 a.本机直接通过sock(套接字)方式访问 IPC UDP协议 ,不需要网络 b.通过tcp建立连接到oracle服务器 1. ...
- AES对称加密算法原理
原著:James McCaffrey 翻译:小刀人 原文出处:MSDN Magazine November 2003 (Encrypt It) 本文的代码下载:msdnmag200311AES.exe ...
- Linux就这个范儿 第14章 身在江湖
Linux就这个范儿 第14章 身在江湖 “有人的地方就有江湖”,如今的计算机世界就像一个“江湖”.且不说冠希哥有多么无奈,把微博当QQ的局长有多么失败,就说如此平凡的你我什么时候就成了任人摆布的羔羊 ...
- Linux就这个范儿 第11章 独霸网络的蜘蛛神功
Linux就这个范儿 第11章 独霸网络的蜘蛛神功 第11章 应用层 (Application):网络服务与最终用户的一个接口.协议有:HTTP FTP TFTP SMTP SNMP DNS表示层 ...
- ava获得当前文件路径
第一种: File f = new File(this.getClass().getResource("/").getPath()); System.out.println(f); ...