jQuery ajaxSubmit 实现ajax提交表单局部刷新


Posted in Javascript onJuly 04, 2016

AJAX简介

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

需要引入 : jquery-form.js

使用说明:

Java代码

$(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; 
}); 
});

调用前后方法:

Java代码

// pre-submit callback 
function showRequest(formData, jqForm, options) { 
// formData is an array; here we use $.param to convert it to a string to display it 
// but the form plugin does this for you automatically when it submits the data 
var queryString = $.param(formData); 
// jqForm is a jQuery object encapsulating the form element. To access the 
// DOM element for the form do this: 
// var formElement = jqForm[0]; 
alert('About to submit: \n\n' + queryString); 
// here we could return false to prevent the form from being submitted; 
// returning anything other than false will allow the form submit to continue 
return true; 
} 
// post-submit callback 
function showResponse(responseText, statusText) { 
// for normal html responses, the first argument to the success callback 
// is the XMLHttpRequest object's responseText property 
// if the ajaxSubmit method was passed an Options Object with the dataType 
// property set to 'xml' then the first argument to the success callback 
// is the XMLHttpRequest object's responseXML property 
// if the ajaxSubmit method was passed an Options Object with the dataType 
// property set to 'json' then the first argument to the success callback 
// is the json data object returned by the server 
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
'\n\nThe output div should have already been updated with the responseText.'); 
}

项目中可以写一个公用的方法:

Java代码

// 局部提交表单 
function formSubmit(formId, divId, url) { 
$('#' + formId).submit(function() { 
$(this).ajaxSubmit( { 
target : '#' + divId, 
url : url, 
error : function() { 
alert('加载页面' + url + '时出错!') 
} 
}); 
return false; 
}); 
}

=====================================================================

事例 刷新TABLE:

1.把TABLE单独放一个JSP,主页面 include TABLE页面。

2.主页面:

Java代码

window.onload=function (){ 
//AJAX 提交FORM刷新TABLE 
$('#queryForm').submit(function() { 
$(this).ajaxSubmit( { 
target : '#table1' 
}); 
return false; 
}); 
}

点击查询按钮 提交FORM。

3.JAVA:FORM提交调用的方法和 普通的ACTION写法一样, STRUTS里配置该ACTION跳转到 那个单独的TABLE JSP页面,返回成功后,就会看到刷新了TABLE。

Java代码

/** 
* AJAX汇总查询 未公开知情人列表 
* 部门合规风控专员 汇总查询 
*/ 
public String ajaxgatherinsiderlist() { 
//相关业务数据查询 
return SUCCESS; 
}

以上所述是小编给大家介绍的jQuery ajaxSubmit 实现ajax提交表单局部刷新 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 遍历对象的属性的代码
Dec 29 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
荐书|您有一份JavaScript书单待签收
Jul 21 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
express express-session的使用小结
Dec 12 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 #Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 #Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 #Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 #Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 #Javascript
全面了解js中的script标签
Jul 04 #Javascript
jQuery基础_入门必看知识点
Jul 04 #Javascript
You might like
如何突破PHP程序员的技术瓶颈分析
2011/07/17 PHP
php生成excel列序号代码实例
2013/12/24 PHP
PHP静态文件生成类实例
2014/11/29 PHP
浅谈PHP的反射机制
2016/12/15 PHP
学习YUI.Ext 第七天--关于View&JSONView
2007/03/10 Javascript
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
JS实现self的resend
2010/07/22 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
jQuery之日期选择器的深入解析
2013/06/19 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
nodejs集成sqlite使用示例
2017/06/05 NodeJs
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
Python获取文件ssdeep值的方法
2014/10/05 Python
Python脚本实现集群检测和管理功能
2015/03/06 Python
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
开业庆典答谢词
2014/01/18 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
新店开张活动方案
2014/08/24 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书
杭白菊导游词
2015/02/10 职场文书
电信营业员岗位职责
2015/04/14 职场文书
车辆管理制度范本
2015/08/05 职场文书
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers