Jquery插件之ajaxForm
如今ajax满天飞,作为重点的form自然也受到照顾。
其实,我们在平常使用Jquery异步提交表单,一般是在submit()中,使用$.ajax进行。比如:
$(function(){$('#myForm').submit(function(){$.ajax({url:"/WebTest/test/testJson.do",data:$('#myForm').serialize(),dataType:"json",error:function(data){alert(data);},success:function(data){alert(data);}});}); })
这样的方式掩盖了form的功能,使它成为了变相的ajax。下面来看看符合form思想的ajaxForm。
ajaxForm:
先下载:http://files.cnblogs.com/china-li/jquery.form.js
两个主要的API:ajaxForm() ajaxSubmit()。
ajaxForm()配置完之后,并不是马上的提交,而是要等submit()事件,它只是一个准备。一般用法:
$(document).ready(function() {var options ={ target:'#output1', //target element(s) to be updated with server responsebeforeSubmit: showRequest, //pre-submit callbacksuccess: showResponse //post-submit callback//other available options://url: url // override for form's 'action' attribute//type: type // 'get' or 'post', override for form's 'method' attribute//dataType: null // 'xml', 'script', or 'json' (expected server response type)//clearForm: true // clear all form fields after successful submit//resetForm: true // reset the form after successful submit//$.ajax options can be used here too, for example://timeout: 3000 };//bind form using 'ajaxForm'$('#myForm1').ajaxForm(options).submit(function(){return false;}); });
这个是官方的例子,不过他没有最后的提交。提交中返回false,阻止它的默认提交动作,而是用ajax交互。
其中options的属性,重要的解释一下:
target 返回的结果将放到这个target下
url 如果定义了,将覆盖原form的action
type get和post两种方式
dataType 返回的数据类型,可选:json、xml、script
clearForm true,表示成功提交后清除所有表单字段值
resetForm true,表示成功提交后重置所有字段
iframe 如果设置,表示将使用iframe方式提交表单
beforeSerialize 数据序列化前:function($form,options){}
beforeSubmit 提交前:function(arr,$from,options){}
success 提交成功后:function(data,statusText){}
error 错误:function(data){alert(data.message);}
ajaxSubmit示例:
$(document).ready(function() {var options ={ target:'#output2', //target element(s) to be updated with server responsebeforeSubmit: showRequest, //pre-submit callbacksuccess: showResponse //post-submit callback//other available options://url: url // override for form's 'action' attribute//type: type // 'get' or 'post', override for form's 'method' attribute//dataType: null // 'xml', 'script', or 'json' (expected server response type)//clearForm: true // clear all form fields after successful submit//resetForm: true // reset the form after successful submit//$.ajax options can be used here too, for example://timeout: 3000 };//bind to the form's submit event$('#myForm2').submit(function() {//inside event callbacks 'this' is the DOM element so we first//wrap it in a jQuery object and then invoke ajaxSubmit$(this).ajaxSubmit(options);//!!! Important !!!//always return false to prevent standard browser submit and page navigationreturn false; }); });
其中参数配置大同小异。只是ajaxSubmit()可以任何时刻都能提交!
其他的API:
$('#myFormId').clearForm(); $('#myFormId .specialFields').clearFields(); $('#myFormId').resetForm();var value = $('#myFormId :password').fieldValue();var queryString = $('#myFormId .specialFields').fieldSerialize();
另外,官方有一个进度条的demo,可以参考一下:http://www.malsup.com/jquery/form/progress.html
转载于:https://www.cnblogs.com/china-li/archive/2012/12/12/2800144.html
Jquery插件之ajaxForm相关推荐
- Jquery插件之ajaxForm ajaxSubmit的理解用法
如今ajax满天飞,作为重点的form自然也受到照顾. 其实,我们在平常使用Jquery异步提交表单,一般是在submit()中,使用$.ajax进行.比如: $(function(){$('#myF ...
- jQuery form插件之ajaxForm()和ajaxSubmit()
代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> < ...
- jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
原文:http://www.jb51.net/article/78536.htm Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署 ...
- jQuery:收集一些基于jQuery框架开发的控件/jquery插件2
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 主页:http://letmehaveblog.blogspot.com/2007/10/ ...
- 新鲜的jquery插件收集
参考网站http://www.noupe.com/ajax/45-fresh-out-of-the-oven-jquery-plugins.html 1.Colorful Sliders With j ...
- JQeury form插件的ajaxForm方法和ajaxSubmit方法的区别
为什么80%的码农都做不了架构师?>>> /*** ajaxForm() provides a mechanism for fully automating form subm ...
- 1000个JQuery插件(转载)
超强1000个jquery极品插件!(转) 花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++ ...
- jQuery插件之form
抓住6月份的尾巴,今天的主题是 今天我想介绍的是一款jQuery的插件:Jquery.form.js官网. 通过该插件,我们可以非常简单的实现表单的异步提交,并实现文件上传.进度条显示等等. 现在我们 ...
- jquery关闭当前页面_什么是jQuery插件
jquery插件就是一些人用jquery写的一些工具,我们在调用时只需要用很少的代码就能实现很好的效果,编写jquery插件的目的主要是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方 ...
最新文章
- .net程序员使用Oracle新手上路指南
- OpenCV ORB角点检测
- Day 30: Play Framework —— Java开发者的梦想框架
- 统一指令集架构的思考
- 全虚拟化和半虚拟化的区别 cpu的ring0~ring3又是什么概念?
- Java 并发工具箱之concurrent包
- java new 数据类型_Java之基本数据类型
- webpack打包报错 [webpack-cli] TypeError: merge is not a function
- 核方法 Kernel method
- ipynb转pdf的一种较完美解决方案
- 我们在这创业,我们在这融资,我们在这泡妞,我们在这死去...
- 小程序源码整理最新的学习小程序的源码清单包含前后台
- 3DCNN参数解析:2013-PAMI-3DCNN for Human Action Recognition
- 航空航天空气动力学高性能计算解决方案
- dicom格式文件讲解(一)
- 英特尔OpenVINO工具套件高级课程实验操作记录与学习总结
- 用Iris数据集的属性画图
- wps工资表怎么用计算机,wps表格中怎么把工资表变成工资条
- IBM WebBIOS配置
- ctf古典密码从0到1
热门文章
- 设计散列表实现通讯录查找系统_[源码和文档分享]利用哈希表实现电话号码查询系统...
- C语言 | 链表概述
- 这么奇葩搞笑的代码注释你见过吗
- linux编写一个简单的端口扫描程序,小弟我在linux下写了个简单的多线程端口扫描程序,运行时出现有关问题,请问一下(2)...
- laravel ajax ip,怎么在Laravel中利用AJAX动态刷新部分页面
- mysql cluster 设置单向复制_mysql单向主从配置
- python log文件如何不写入syslog_Centos下python 对syslog重写进行日志记录
- 音频光端机的几个重要指标
- [渝粤教育] 西北大学 数据结构 参考 资料
- 【渝粤教育】国家开放大学2018年春季 3950T金融基础 参考试题