原网址:http://www.360doc.com/content/13/1001/17/1542811_318406421.shtml
一
一般在submit中使用ajax进行
例:
$(function(){
$('#myForm').submit(function(){
$.ajax({
url:"/hsb_workreport/formsub.do",
data:$("#myForm").serialize(),
dataType:"json",
error:function(data){
alert(data);
},
success:function(data){
alert(data);
}
});
});
)
二 使用ajaxForm插件
插件地址:http://malsup.github.io/jquery.form.js
两个主要的API:ajaxForm ajaxSubmit
ajaxForm()配置完之后,并不是马上的提交,而是要等submit()事件,它只是一个准备。一般用法:
$(document).ready(function() { var options = { target: '#output1', // target element(s) to be updated with server response beforeSubmit: showRequest, // pre-submit callback success: 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 response beforeSubmit: showRequest, // pre-submit callback success: 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 navigation return 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
相关推荐
jquery.js + jquery-form.js + springMVC实现ajax提交form表单和上传图片,上传图片成功js可以获取图片保存相对路径。
这是一个ajax提交表单插件,支持文件上传,用起来非常方便。具体使用说明 http://blog.csdn.net/qq122453418/article/details/79511164 欢迎留言
Ajax表单提交插件jquery form
ajaxForm异步提交表单(含图片)ajaxForm异步提交表单(含图片)ajaxForm异步提交表单(含图片)
Ajax如何无刷新提交form里面的内容。
使用jQuery.form插件,实现完美的表单异步提交
不用form提交表单,用ajax异步上传文件,使用jdk8版本,否则可能无法运行
ajax刷新表格数据 ajaxform异步提交表单数据, jquery.validate验证表单数据
本资源通过ajax实现对提交的form表单的验证,该代码不但有针对property验证,也有针对object验证,还有一个异步获取对象的实例;包含完整的代码和库文件;在myeclipse8.5和apache-tomcat-6.0.30测试通过;访问网址:...
前端时间写项目用到了ajaxForm这个插件,可以用它提交表单和上传图片,听起来和正常的form表单提交没什么区别,只不过是ajax提交,无需刷新页面,下面通过实例给大家介绍jQuery表单插件ajaxForm,需要的朋友参考下吧
使用AJAX提交Form表单使用AJAX提交Form表单使用AJAX提交Form表单
使用AJAX提交Form表单实例演示
用jquery动态添加表单,通过jquery.form来ajax提交来批量上传图片
ajaxForm预处理将要使用 AJAX 方式提交的表单,将所有需要用到的事件监听器添加到其中。它不是提交这个表单。 在页面的ready函数里使用ajaxForm来给你页面上的表单做这些AJAX提交的准备工作。 ajaxForm 需要零个...
Demo 1 : form插件的使用--ajaxForm(). Demo 2 : form插件的使用---ajaxSubmit(). Demo 3 : form插件的使用--formSerialize()组装表单数据,用于jQuery中的.ajax(). Demo 4 : form插件的使用--ajaxForm()和...
ajax form 提交 动态显示ajax form 提交 动态显示ajax form 提交 动态显示
使用struts2 框架 中的文件上传,然后使用ajax上传图片以及form表单的数据
jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传.
Ajax-FormJS.zip,使用反馈系统通过ajax请求发送html表单的jquery插件,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新...
我们在提交表单的时候,如果没有使用ajax提交,页面都会自己刷新一下,显得非常的不友好,所以我们需要把我们的表单提交修改为ajax的模式,可以让用户清楚地知道他们在提交表单...1.ajaxForm 增加所有需要的事件监听器