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 相关文章推荐
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
js实现漫天星星效果
Jan 19 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
微信小程序之数据双向绑定与数据操作
May 12 Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 Javascript
Layui 动态禁止select下拉的例子
Sep 03 Javascript
Openlayers实现点闪烁扩散效果
Sep 24 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
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
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
PHP的SQL注入过程分析
2012/01/06 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
理理Vue细节(推荐)
2019/04/16 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
如何解决vue在ios微信"复制链接"功能问题
2020/03/26 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
python编写网页爬虫脚本并实现APScheduler调度
2014/07/28 Python
python中list循环语句用法实例
2014/11/10 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
幼儿园社区活动总结
2014/07/07 职场文书
办理房产过户的委托书
2014/09/14 职场文书
小组组名及励志口号
2015/12/24 职场文书
Django中session进行权限管理的使用
2021/07/09 Python