jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用


Posted in Javascript onJanuary 23, 2016

一、jQuery Form的其他api

1. formSerialize

将表单序列化成查询串。这个方法将返回一个形如: name1=value1&name2=value2的字符串。
是否可以连环调用: 否, 这个方法返回的是一个字符串。

例子:

var queryString = $('#myFormId').formSerialize(); 
// the data could now be submitted using $.get, $.post, $.ajax, etc 
$.post('myscript.jsp', queryString);

2. fieldSerialize

将表单里的元素序列化成字符串。当你只需要将表单的部分元素序列化时可以用到这个方法。 这个方法将返回一个形如: name1=value1&name2=value2的字符串。
是否可以连环调用: 否, 这个方法返回的是一个字符串。

例子:

var queryString = $('#myFormId .specialFields').fieldSerialize();

3. fieldValue

取出所有匹配要求的域的值,以数组形式返回。 从 0.91 版本开始, 这个方法 始终 返回一个数组。 如果没有符合条件的域,这个数组将会是个空数组,否则它将会包含至少一个值。
是否可以连环调用: 否, 这个方法返回的是一个数组。
例子:

// get the value of the password input 
var value = $('#myFormId :password').fieldValue(); 
alert('The password is: ' + value[0]);

4. resetForm

通过调用表单元素的内在的DOM 上的方法把表单重置成最初的状态。
是否可以连环调用: 是
例子:

$('#myFormId').resetForm();

5. clearForm

清空表单所有元素的值。这个方法将会清空所有的文本框,密码框,文本域里的值,去掉下拉列表所有被选中的项,让所有复选框和单选框里被选中的项不再选中。
是否可以连环调用: 否

$('#myFormId').clearForm();

6. clearFields

清空某个表单域的值。这个可以用在只需要清空表单里部分元素的值的情况。
是否可以连环调用: 否

$('#myFormId .specialFields').clearFields();

二、测试的详细代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用.</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- 引入依赖的js -->
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(function() { 
$('#test').click(function(){
var queryString = $('#myForm').formSerialize();
alert(queryString);
// 组装的数据可以用于 $.get, $.post, $.ajax ...
$.post('demo.jsp', queryString ,function(data){
$('#output1').html("提交成功!欢迎下次再来!").show(); 
}); 
return false;
})
//demo2
$('#test2').click(function(){
var queryString = $('#myForm2 *').fieldValue(); 
alert(queryString);
return false;
})
//重置表单
$('#test3').click(function(){
$('#myForm').resetForm();
$('#myForm2').resetForm();
})
//清除表单
$('#test4').click(function(){
$('#myForm').clearForm();
$('#myForm2').clearForm();
})
}); 
</script> 
</head>
<body>
<h3> Demo 3 : jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用. </h3>
<!-- demo1 -->
<form id="myForm" action="demo.jsp" method="post"> 
名称: <input type="text" name="name" /> <br/>
地址: <input type="text" name="address" /><br/> 
自我介绍: <textarea name="comment"></textarea> <br/>
<input type="submit" id="test" value="提交" /> <br/>
<div id="output1" style="display:none;"></div>
</form>
<br/><br/><br/>
<!-- demo2 -->
<form id="myForm2" action="demo.jsp" method="post"> 
名称: <input type="text" name="name2" class="special"/> <br/>
地址: <input type="text" name="address2" /><br/> 
自我介绍: <textarea name="comment2" class="special"></textarea> <br/>
单选:男<input type="radio" name="a" value="男" checked/> 
女<input type="radio" name="a" value="女"/><br/>
<input type="submit" id="test2" value="提交" /> <br/>
</form>
<br/><br/><br/>
<input type="button" id="test3" value="重置所有表单" /> <br/>
<input type="button" id="test4" value="清除所有表单" /> (提示:发现单选框以前选中的,也被清除了,跟重置有点区别!)<br/>
</body>
</html>

demo.jsp 代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");//防止乱码!
String name = request.getParameter("name");
String address = request.getParameter("address");
String comment = request.getParameter("comment");
System.out.println(name + " " +address + " " +comment);
%>

三、测试效果:

1. formSerialize()测试效果:

空的时候:

jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用

填写英文的时候:

jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用

填写中文的时候:

jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用

jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用

2. fieldValue()测试效果:

空值的时候:

jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用

填写英文的时候:

jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用

填写中文的时候:

jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用

3. resetForm()的测试效果

jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用

重置前:

jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用

重置后:

jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用

4. clearForm()方法的效果:

清除前效果:

jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用

清除后效果:

jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用

Javascript 相关文章推荐
Javascript 判断 object 的特定类转载
Feb 01 Javascript
asp.net HttpHandler实现图片防盗链
Nov 09 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 Javascript
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 Javascript
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
JS函数本身的作用域实例分析
Mar 16 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
Jun 01 Javascript
js+h5 canvas实现图片验证码
Oct 11 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 #Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 #Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 #Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 #Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 #Javascript
javascript实现全角转半角的方法
Jan 23 #Javascript
jQuery操作Table技巧大汇总
Jan 23 #Javascript
You might like
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
详解如何探测小程序返回到webview页面
2019/05/14 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
在Django同1个页面中的多表单处理详解
2017/01/25 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
详解python深浅拷贝区别
2019/06/24 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
初中校园广播稿
2014/02/02 职场文书
《胖乎乎的小手》教学反思
2014/02/26 职场文书
社区母亲节活动方案
2014/03/05 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
建筑节能汇报材料
2014/08/22 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
奖学金感谢信
2015/01/21 职场文书
无婚姻登记记录证明
2015/06/18 职场文书