ajax和servlet交互，表单日历插件，表单验证，form.js

时间：2022-12-18 15:14:12

我的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的更多相关文章

  1. ajax和servlet交互

    网上有比较多的教程来将如何实现ajax与servlet的交互了,这里和这里的教程可以参考参考,在此处我只简单说明一下,并记录一下我这次遇到的问题. 整个思路是:写个js函数,在里面使用XHR(ajax ...

  2. Ajax提交form表单内容和文件（jQuery&period;form&period;js）

    jQuery官网是这样介绍form.js A simple way to AJAX-ify any form on your page; with file upload and progress s ...

  3. JavaScript之form表单的序列化和json化&lbrack;form&period;js&rsqb;

    一.应用场景 form提交时,使用ajax提交. 二.效果 通过本工具,实现表单所有form的快速序列化和json化,使前端人员在ajax提交form表单的时,脱离重复性的,大劳动量的手动抽取form ...

  4. ajax与servlet交互（通过JSON）&comma;JAVA的arraylist传到前端的方法

    所实现的效果:首先从前端(ajax)传参数给servlet,然后servlet经过处理,把arraylist类型的参数以JSON字符串的形式返回给前端(ajax),然后前端经过解析,把JSON字符串解 ...

  5. &lbrack;oldboy-django&rsqb;&lbrack;2深入django&rsqb;form表单clean&lowbar;xx&comma; clean完成数据验证&plus; form错误信息

    form后台生成form里面的Input标签,以及设置Input的属性 # 需求 后台生成form里面的input标签,并设置input标签的属性, class RegisterForm(Form): ...

  6. 进一步丰富和简化表单管理的组件：form&period;js

    上文<简洁易用的表单数据设置和收集管理组件>介绍了我自己的表单管理的核心内容,本文在上文的基础上继续介绍自己关于表单初始值获取和设置以及表单数据提交等内容方面的做法,上文的组件粒度很小,都 ...

  7. jquery双日历日期选择器bootstrap-daterangepicker日历插件

    这个插件既可以作为双日历也可以作为单日历插件(jquery的插件在jquery插件库中http://www.jq22.com/下载很方便,在CSDN下载真麻烦) 引用 <meta http-eq ...

  8. 一款基于jQuery日历插件的开发过程

    这个插件的设置选项,所有样式都设置成自定义,提供回调函数,方便在外部进行扩展 css设置是可变的  也就是说  日历的样式是定制的: /******************************** ...

  9. EasyUI Calendar 日历插件，只显示年月。

    从别人的博客园搬过来的,放在这里只是为了方便自己用.已经注明原文出处,尊重别人的劳动成果. 原文地址:http://www.cnblogs.com/hmYao/p/5779463.html 此日历插件 ...

随机推荐

  1. webapi 控制器接收POST参数时必须以对象的方式接收

    webapi    控制器接收POST参数时必须以对象的方式接收

  2. iOS 开发之路（AES&sol;DES加密实现） 三

    最近接触的这个项目由于以前服务器上用的是DES/CBC/PKCS5Padding加密方式,为了让在iOS上的加密结果与服务器端保持一致,我做了很多尝试,现在分享给大家.PS:现在不推荐用DES了,只是 ...

  3. BZOJ 4029 &lbrack;HEOI 4029&rsqb; 定价 解题报告

    这个题好像也是贪心的感觉.. 我们枚举 $1,5,10,50,100,\dots$ ,找出在 $[l, r]$ 内能整除它们的最小的数. 然后找到其中在荒谬值最小的情况下数值最小的那个数, 就做完了. ...

  4. GCD介绍（三）&colon; Dispatch Sources

    何为Dispatch Sources         简单来说,dispatch source是一个监视某些类型事件的对象.当这些事件发生时,它自动将一个block放入一个dispatch queue ...

  5. Red Hat Enterprise Linux x86-64 上安装 oracle 11gR2

    一.以root用户登录 二.安装依赖包 #rpm -qa | grep 包名    ----查看包 binutils-2.20.51.0.2-5.11.el6 (x86_64)            ...

  6. 开源 免费 java CMS - FreeCMS1&period;9 职位管理

    项目地址:http://code.google.com/p/freecms/ 职位管理 管理职位,实现招聘功能. 1. 职位管理 从左側管理菜单点击职位管理进入. 2. 加入职位 在职位列表下方点击& ...

  7. typedef和define具体的具体差异

      1) #define这是一个预处理指令,简单的更换当预处理程序.不检查的正确性,仍不能正常关机进入的意思,那里只是已被展开时编译源代码会发现可能的错误和错误. 例如: #define PI 3.1 ...

  8. 开源半成品的Web版工作流模板设计器&lpar;基于AngularJS 2和Redux&rpar;&comma; 还在继续填坑中

    先上个图: 很多企业内部的应用都需要有个工作流平台(插件),无奈灵活方便好用且能够自行更改代码定制嵌入的实在不多,只好自己动手慢慢搞. https://github.com/shibamo/99-fl ...

  9. 面试题1 -- Java 中，怎么在格式化的日期中显示时区？

    使用SimpleDateFormat来实现格式化日期 import java.text.SimpleDateFormat; import java.util.Date; public class Da ...

  10. Objective-C 禁用NSMenu中的系统services菜单项

    当用NSMenu创建一个右键菜单时,mac系统会默认插入一些服务(services)菜单项,如下图,xlsx文件的右键菜单中,除了自定义的菜单项:“转发”和“收藏”等等,还有“在 Finder中显示简 ...

相关文章