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 此日历插件 ...
随机推荐
- linux OSlab4 添加自定义系统调用
http://blog.csdn.net/ly01kongjian/article/details/8947285 http://www.cnblogs.com/hoys/archive/2011/0 ...
- Java进程间通信
传统的进程间通信的方式有大致如下几种: (1) 管道(PIPE) (2) 命名管道(FIFO) (3) 信号量(Semphore) (4) 消息队列(MessageQueue) (5) ...
- 安装mssql2008和启动时出现的问题及解决办法
(一) 安装sql server 2008 时, 提示错误:此计算机上安装了 Microsoft Visual Studio 2008 的早期版本. 请在安装 SQL Server 2008 前将 V ...
- C中文件操作说明
r 以只读方式打开文件,该文件必须存在. r+ 以读/写方式打开文件,该文件必须存在. rb+ 以读/写方式打开一个二进制文件,只允许读/写数据. rt+ 以读/写方式打开一个文本文件,允许读和写. ...
- HTML5 拖拽功能
本地文件拖动到页面实例:(支持IE) <script> var DragFile = function (goalId) { var g = document.getElementById ...
- android 资源ID
在编译的时候,AAPT会扫描你所定义的所有资源(在不同文件中定义的以及单独的资源文件),然后给它们指定不同的资源ID.资源ID 是一个32bit的数字,格式是PPTTNNNN , PP代表资源所属的包 ...
- ArcGIS API for Silverlight 实现修改地图上的工程点位置
原文:ArcGIS API for Silverlight 实现修改地图上的工程点位置 #region 处理工程点点击编辑相关事件 public Graphic editgraphics = null ...
- Jquery 多选下拉列表插件jquery multiselect
有一个多选的需求,在网上找到了这个插件:multiselect https://github.com/ehynds/jquery-ui-multiselect-widget csdn博客上有这个插件的 ...
- c#上传文件（一）使用 .net 控件上传文件
1.html代码: <body> <form id="form1" runat="server"> <div> <as ...
- JavaScript：画廊案例
经常会在网上看到这样的操作:有几个按钮.可以控制器图片的上一张.下一张.那么现在就使用按钮的click单击事件来切换img的图片. 此时由于只是简单的演示,将所有的图片保存在images目录中.所有的 ...