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 此日历插件 ...
随机推荐
- day08
软件系统体系结构 常见软件系统体系结构B/S.C/S 1.1 C/S C/S结构即客户端/服务器(Client/Server),例如QQ: 需要编写服务器端程序,以及客户端程序,例如我们安装的 ...
- 如何在外网中访问自己在另一个局域网中的某个机器(SSH为例)
UBUNTU 14.04 LTS 为例 如何在外网中访问自己在另一个局域网中的某个机器(SSH为例) 2013-05-01 16:02 2693人阅读 评论(0) 收藏 举报 情景描述: 计算机C1放 ...
- 低功耗蓝牙4.0BLE编程-nrf51822开发(2)
相关下载:http://download.csdn.net/detail/xgbing/9565708 首先看的示例是心率计一个示例程序:<KEIL path> \ARM\Device\N ...
- 深入理解Linux中内存管理
前一段时间看了<深入理解Linux内核>对其中的内存管理部分花了不少时间,但是还是有很多问题不是很清楚,最近又花了一些时间复习了一下,在这里记录下自己的理解和对Linux中内存管理的一些看 ...
- Top 10 Free Wireless Network hacking/monitoring tools for ethical hackers and businesses
There are lots of free tools available online to get easy access to the WiFi networks intended to he ...
- http和网页设计
.基本概念: CGI(Common Gate Interface,通用网关接口) HTML均是静态网页,它无法实现一些复杂的功能,而CGI可以为我们实现. get方式提交表单: 当表单被发送到服务器断 ...
- rem适配
//REM适配new function() { var _self = this; _self.width = 640; // 设置默认最大宽度 _self.fontSize = 100; // 默认 ...
- Ionic 小节
教程 http://www.runoob.com/ionic/ionic-install.html 最后报错,发现是jdk版本过低,升级到8.0后正常 分析:nodejs.cordova.ionic. ...
- 【公开课】《奥威Power-BI基于微软示例库（MSSQL）快速制作管理驾驶舱》文字记录与反馈
本期分享的内容: <奥威Power-BI基于微软示例库(MSSQL)快速制作管理驾驶舱> 时间:2016年11月02日 课程主讲人:叶锡文 从事商业智能行业,有丰富的实施经验,擅长 ...
- Java Map操作
Map:键必须是唯一 同步方法:Map m = Collections.synchronizedMap(new TreeMap(...)); Hashtable:基于散列表的实现 允许空键空值 线程安 ...