ajaxSubmit
$('button').on('click', function() {
$('form').on('submit', function() {
var title = $('inpur[name=title]').val(),
content = $('textarea').val();
$(this).ajaxSubmit({
type: 'post', // 提交方式 get/post
url: 'your url', // 需要提交的 url
data: {
'title': title,
'content': content
},
success: function(data) { // data 保存提交后返回的数据,一般为 json 数据
// 此处可对 data 作相关处理
alert('提交成功!');
}
$(this).resetForm(); // 提交后重置表单
});
return false; // 阻止表单自动提交事件
});
});
// 局部提交表单
function formSubmit(formId, divId, url) {
$('#' + formId).submit(function() {
$
(this).ajaxSubmit( {
target : '#' + divId,
url : url,
error : function() {
alert('加载页面' + url + '时出错!')
}
});
return false;
});
}
$(document).ready(function() {
var options = {
target : '#mydiv', // 需要刷新的区域
// beforeSubmit: showRequest, // 提交前调用的方法
// success: showResponse // 返回后笤俑的方法
// other available options:
// url: url // 提交的URL, 默认使用FORM ACTION
// type: type // 'get' or 'post', override for form's 'method' attribute
// dataType: null // 'xml', 'script', or 'json' (expected server
// response type)
// clearForm: true // 是否清空form
// resetForm: true // 是否重置form
// $.ajax options can be used here too, for example:
// timeout: 3000
};
// 绑定FORM提交事件
$('#myForm').submit(function() {
$(this).ajaxSubmit(options);
// !!! Important !!!
// always return false to prevent standard browser submit and page
// navigation
return false;
});
});
<script type="text/javascript" src="jquery/jquery.js"></script></head>
<script type="text/javascript" src="jquery/jquery.form.js"></script>
<script type="text/javascript">
$(function() {
$("#loginform").submit(function(){
$(this).ajaxSubmit({
type:"post", //提交方式
dataType:"json", //数据类型
url:"${basePath}/login.action", //请求url
success:function(data){ //提交成功的回调函数
alert(data.result);
}
}); return false; //不刷新页面
});
});
</script>
ajaxSubmit的更多相关文章
- jQuery使用ajaxSubmit()提交表单示例
ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件.如下所示: 代码如下: <script src=" ...
- Jquery 中 ajaxSubmit使用讲解(转)
1 ,引入依赖脚本 <script type="text/javascript" src="/js/jquery/jquery.form.js">& ...
- ajaxSubmit与ajaxFileUpload的空值
ajaxSubmit发现正文无内容, ajaxFileUpload发现无上传内容, 嗯,你只是忘记了 html 中控件的 name 没有指定,这哥们不认 id 的.
- jQuery form插件的使用--ajaxForm()和ajaxSubmit()的可选参数项对象
一.前提说明 Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 二.简单介绍 本文演示的是:jQue ...
- jQuery Form 表单提交插件-----ajaxSubmit() 的应用
Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.ajaxSubmit() 介绍 立即通过AJ ...
- MVC ajaxSubmit上传图片
注意事项: 1.提交form,必须引用jquery.form.min.js 2.不要使用mvc自带的Ajax.Form() 1.页面cshtml <form name="frmInpu ...
- ajax上传图片 jquery插件 jquery.form.js 的方法 ajaxSubmit; AjaxForm与AjaxSubmit的差异
先引入脚本 这里最好是把jquery的脚本升级到1.7 <script src="js/jquery-1.7.js" type="text/javascript& ...
- query插件之ajaxForm ajaxSubmit的理解用法
如今ajax满天飞,作为重点的form自然也受到照顾. 其实,我们在平常使用Jquery异步提交表单,一般是在submit()中,使用$.ajax进行.比如: $(function(){ $('# ...
- ajaxSubmit() 上传文件和进度条显示
1. 首先引用js文件 <script type="text/javascript" src="/js/jquery/jquery.form.js"&g ...
随机推荐
- C++设计模式-Decorator装饰模式
Decorator装饰模式作用:动态地给一个对象添加一些额外的职责,就增加功能来说,装饰模式比生成子类更为灵活. UML图如下: Component是定义一个对象接口,可以给这些对象动态地添加职责. ...
- nginx入门
1. 前言 Nginx是当前最流行的HTTP Server之一,根据W3Techs的统计,目前世界排名(根据Alexa)前100万的网站中,Nginx的占有率为6.8%.与Apache相比,Ngi ...
- Maven(二)使用eclipse创建maven多模块项目
maven作为一种自动化构建工具,在现在的企业应用开发中运用非常普遍. 企业项目一般都比较大,多采用maven管理的多模块项目,下面直接上创建步骤 一.创建一个maven项目
- ExpressJs server中Router的设置
expressjs的路由设置方法 一.基本方法: app.METHOD(PATH, HANDLER)把路径path和操作方法method(可以是http的get/put/delete等),映射到一个处 ...
- 慕课网-Java入门第一季-7-4 编程练习
来源:http://www.imooc.com/code/1634 小伙伴们,请根据所学知识,参考注释,在代码编辑器中将代码补充完整.编写一个 Java 程序,实现输出学生年龄的最大值 要求: 1. ...
- Sublime Text 3 引用插件
汉化插件 点击 View> Show Console 输入import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b ...
- mysqldump的使用
mysqldump按导入:mysqldump -u用户名 -p密码 -h主机 数据库 < 路径eg:mysql -uroot -p1234 db1 < c:\a.txtmysqldump导 ...
- this关键字
class Demothis关键字//哪个对象在调用this所在的函数,this就代表哪个对象.{ //当定义类中功能时,该函数内部要用到该函数的对象时,这时用this来表示这个对象. public ...
- 2016-10-17: source insight插件
使用快捷键注释,单行注释,多行注释,#if 0注释 将文件 mycomment.em点此下载放到sourceinsight的Base工程的路径下(一般是在C:\Documents and Settin ...
- 基于 HTTP/2 的全新 APNs 协议
https://developer.apple.com/library/content/documentation/NetworkingInternet/Conceptual/RemoteNotifi ...