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 相关文章推荐
JavaScript 学习笔记(六)
Dec 31 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
微信小程序 腾讯地图显示偏差问题解决
Jul 27 Javascript
jquery传参及获取方式(两种方式)
Feb 13 jQuery
JS中作用域以及变量范围分析
Jul 18 Javascript
js实现筛选功能
Nov 24 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下使用strpos需要注意 === 运算符
2010/07/17 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
Python实现一个论文下载器的过程
2021/01/18 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
人事主管的岗位职责
2013/11/16 职场文书
终止劳动合同协议书
2014/04/14 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
冰峪沟导游词
2015/02/09 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫
nginx之queue的具体使用
2022/06/28 Servers