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中的作用域
Apr 07 Javascript
无刷新预览所选择的图片示例代码
Apr 02 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 Javascript
js语法学习之判断一个对象是否为数组
May 13 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
vue-router 权限控制的示例代码
Sep 21 Javascript
详解React中setState回调函数
Jun 14 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 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 图片文件上传实现代码
2010/12/29 PHP
PHP 第二节 数据类型之转换
2012/04/28 PHP
解析ajax事件的调用顺序
2013/06/17 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
javascript删除字符串最后一个字符
2014/01/14 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
跟老齐学Python之dict()的操作方法
2014/09/24 Python
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
2017/07/24 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
应届生法律顾问求职信
2013/11/19 职场文书
2014年自我评价
2014/01/04 职场文书
社区十八大感言
2014/01/19 职场文书
亲属关系公证书
2014/04/08 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书