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 相关文章推荐
js 操作符实例代码
Oct 24 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
vue 2.0项目中如何引入element-ui详解
Sep 06 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 Javascript
区分vue-router的hash和history模式
Oct 03 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代码在网页上生成图片
2015/07/01 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
Javascript注入技巧
2007/06/22 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
JavaScript基础之this详解
2017/06/04 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
python通过socket查询whois的方法
2015/07/18 Python
Python3 Random模块代码详解
2017/12/04 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
python开发实例之Python的Twisted框架中Deferred对象的详细用法与实例
2020/03/19 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
物业公司采购员岗位职责
2013/12/31 职场文书
企业标语口号
2014/06/10 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
Python办公自动化PPT批量转换操作
2021/09/15 Python
Elasticsearch 索引操作和增删改查
2022/04/19 Python