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 此日历插件 ...
随机推荐
- 【git】删除某个文件的所有历史记录，批量删除远程分支
删除git某个文件的所有历史记录 git的目的就是版本控制,记录每一个版本的变动.然而有的时候我们往往希望从版本库中彻底删除某个文件,不再显示在历史记录中.例如不小心上传了一堆错误的文件,或者不小心上 ...
- 设计模式：策略模式（Strategy）
定 义:它定义了算法家族,分别封装起来,让它们之间可以互相替换,此模式让算法的变化, 不会影响到使用算法的客户. 示例:商场收银系统,实现正常收费.满300返100.打8折.......等不同收费 ...
- [LeetCode]题解（python）：051-N-Queens
题目来源 https://leetcode.com/problems/n-queens/ The n-queens puzzle is the problem of placing n queens ...
- 【tips】判断两个整数是否是同一个数量级
leetcode刷题的时候,需要用到,已知整数A,B,且A>B,判断AB是否是同一数量级的. 第一想到的是不停地除以10,得到每个数字的数量级再进行比较,太麻烦: 转而向转化成字符串比较,还是麻 ...
- Magento去掉价格的小数点
magento的默认情况,价格后面是有小数点的,我们来看下如何正确的来去掉小数点. 1.复制如下路径的文件 app/code/core/Mage/Directory/Model/Currency.ph ...
- php mysql连接例子
<?PHP @$conn = mysql_connect("127.0.0.1","root",""); //返回false或reso ...
- php回调函数
1.array_filter($arr, "odd") <?php $arr = array(1, 2, 3, 4, 5, 6, 7, 8, 9); function odd ...
- js引入img标签和图片
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 7z usecaes
1. Archive without compressing 7z a -t7z -mx=0 OutputFilename InputFilename Descryption: a: command, ...
- Apache kafka原理与特性(0.8V)
前言: kafka是一个轻量级的/分布式的/具备replication能力的日志采集组件,通常被集成到应用系统中,收集"用户行为日志"等,并可以使用各种消费终端(consumer) ...