开发者社区> lzhdim> 正文

jquery插件 - 表单插件

简介: Jquery Form Plugin是jquery最重要的插件之一,它利用AJAX技术在不引起页面刷新的情况下POST表单。主要有两个方法:ajaxform和ajaxsubmit。它会自动收集表单元素内容,决定如何管理提交进程。
+关注继续查看

Jquery Form Pluginjquery最重要的插件之一,它利用AJAX技术在不引起页面刷新的情况下POST表单。主要有两个方法:ajaxformajaxsubmit。它会自动收集表单元素内容,决定如何管理提交进程。这两个方法支持多重选择。我想AJAX方式的表单应用再没有比这个插件更简单易用的了。

先在页面里设置一个普通的表单:

HTML:
  1. <form id="myForm" action="comment.php" method="post">
  2. 姓名: <input type="text" name="name" id="name"/>
  3. 评论: <textarea name="comment" id="comment"></textarea>
  4. <input type="submit" value="提交评论" />
  5. </form>

加载jquery库和插件脚本库。然后简单地写一段初始化脚本,这段脚本将在DOM加载完成时执行:

HTML:
  1. <script type="text/javascript" src="jquery.js"></script>  //加载jquery
  2. <script type="text/javascript" src="form.js"></script>    //加载插件
  3. <script type="text/javascript">
  4. // DOM加载完毕后执行
  5.  $(document).ready(function() {
  6. // 绑定'myForm'并定义一个简单的回调函数
  7. $('#myForm').ajaxForm(function() {
  8. alert("评论提交完成!");
  9. });
  10. });
  11. </script>
  12. </head>

OK,就是这么简单。当点击“提交评论”按钮后,表单的数据就会POST到comment.php脚本,并且返回“评论提交完成”信息(如果提交成功)。页面并没有刷新,非常AJAX……

让我们来看看这个插件还有什么强大的功能。

ajaxForm

该方法须预先绑定表单,所以它一般在$(document).ready(function() { ...}里定义。它能让表单在不刷新页面的情况下POST到目标。可以为该方法提供一个参数,参数一般是一个回调函数用于返回信息给用户。当然如果不提供参数也行,只是表单提在无声无息地提交后无法得到确认了。

ajaxSubmit

该方法是以响应事件来通用AJAX方式提交表单。比如点击某个按钮或改变了某个下拉框的值,在触发事件函数里可以设置该方法。如:

JavaScript:
  1. $("#clickme").click(function(){
  2. $("#myForm").ajaxSubmit();
  3. });

或者这样:

HTML:
  1. <select id="mySelect" onchange="$(‘#myForm’).ajaxSubmit();">

 

formSerialize

该方法可以表单域的名称和值连接起来,形成一个字符串,字符串格式为name1=value1&name2=value2...比如:

JavaScript:
  1. var queryString=$("#myForm").formSerialize();

变量queryString的值将为变成name=xxx&comment=xxx。得到这个字符串后,可以用$.post来提交,如:$.post("comment.php",queryString);

fieldSerialize

和formSerialize一样,返回一个字符串,但返回的是表单指定元素或特定元素类型域的字符串。返回字符串格式也是一样的。如:

JavaScript:
  1. var queryString = $('#myForm :text').fieldSerialize();//返回myForm表单内所有文本框的字符串值。

 

fieldValue

返回一个数组,记录表单元素的值。如果表单没有值则对应数组值为空。如:

JavaScript:
  1. var data=$(':text').fieldValue();//返回所有表单中所有文本框类型的值。

变量data为['','','']这样的一个数组,数组元素对应表单元素的值。事实上我们可以这样来得到“姓名”文本框里的值:var data=$("#name").val();(这个元素要有ID属性)这样的作法不需要jquery form插件也可以得到值。但使用插件可以更方便地取得单个或多个表单中特定元素域的值。比如取得所有文本框或所有复选框的值。只要加个“:"就可以。这种方法也可以用到formSerialize或fieldSerialize方法上。

JavaScript:
  1. var data=$("#myForm :text").fieldValue();//取得在myForm表单里所有文本框的值。

 

formToArray

同样也返回一个数组,这个数组是对象数组。对象有name和value两个属性,分别记录表单中的元素名称和元素值。如:

JavaScript:
  1. var data=$("#myForm").formToArray();

变量data得到的是一个对象数组。data[0].name保存myForm表单中第一个表单元素的名称属性值,这里是”name"。data[0].value保存myForm表单中第一个表单元素的值,这里就是填了什么值就是什么。

resetForm

该方法很简单啦,恢复表单初始状态。也就恢复到DOM加载完成时的表单状态。类似“重设表单”

clearFields

清除表单域元素。可以清除特定类型的域元素,比如清除所有文本框的,或所有复选框的域。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jquery插件制作 -- 5.提示框插件
  今天我们介绍的是提示框插件tooltip的制作,其中还会介绍到自定义选择器插件的开发。   我们首先来介绍自定义选择器的开发,他的代码结构如下: (function ($) { $.expr[':'].customselector = function (object,index,properties,list) { //code }; })(jQuery); 调用时候的写法: $(a:customselector)   现在我们先解释下函数中所使用到的各个参数。
762 0
jquery插件整理篇(五)分页插件
(1)jQuery Pagination jQuery分页插件jQuery Pagination 热点图书:www.hotbook.cn (2)pager jQuery plug-in jQuery分页插件。
604 0
jquery插件整理篇(六)HTML编辑器插件
(1)jwysiwyg WYSIWYG jQuery插件。整个编辑器文件大小只有17Kb。   (2)Damn Small Rich Text Editor 基于jQuery开发,能够从IFRAME元素创建一个Rich Text Editor。
740 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
20485 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23560 0
jquery插件整理篇(四)自动补全类插件
(1)AutoComplete-JQueryjQuery插件易于集成到现在的表单中(Form)。 (2)Facebook like Autocomplete 基于jQuery开发,类似于FaceBoox提供的AutoCompleter。
848 0
jQuery:收集一些基于jQuery框架开发的控件/jquery插件2
Horizontal accordion: jQuery基于jQuery开发,非常简单的水平方向折叠控件。主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.
1419 0
提升你网站水平的 jQuery 插件推荐
jQuery是一个优秀JavaScript库,它简化了HTML文档遍历,事件处理,动画和Ajax交互。 jQuery的确改变了很多人写JavaScript的方式。如今,有很多现成的jQuery插件可供选择,帮助你在网站中加入惊人的功能和效果。
942 0
+关注
lzhdim
人在20岁以意志力著称,在30岁以智慧取胜,在40岁则靠的是理智的判断。 一个人只有时刻保持幸福快乐的感觉,才会使自己更加热爱生命,热爱生活。只有快乐,愉快的心情,才是创造力和人生动力的源泉;只有不断自己创造快乐,与自己快乐相处的人,才能远离痛苦与烦恼,才能拥有快乐的人生。
522
文章
4
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载