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 相关文章推荐
jQuery中has()方法用法实例
Jan 06 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
深入理解ECMAScript的几个关键语句
Jun 01 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
React进阶学习之组件的解耦之道
Aug 07 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
vue 注册组件的使用详解
May 05 Javascript
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
echarts实现折线图的拖拽效果
Dec 19 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的面向对象编程
2006/10/09 PHP
php学习笔记 数组的常用函数
2011/06/13 PHP
php中防止恶意刷新页面的代码小结
2012/10/31 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
python利用不到一百行代码实现一个小siri
2017/03/02 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
python3处理含有中文的url方法
2018/05/10 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
python 类之间的参数传递方式
2019/12/20 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
python 如何对logging日志封装
2020/12/02 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物