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转义字符介绍
Nov 05 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
css样式标签和js语法属性区别
Nov 06 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
Vue数据双向绑定的深入探究
Nov 27 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
May 26 Javascript
Angular8 Http拦截器简单使用教程
Aug 20 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 中的批处理的实现
2007/06/14 PHP
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
PHP substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
php身份证号码检查类实例
2015/06/18 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
python类继承与子类实例初始化用法分析
2015/04/17 Python
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
python函数的作用域及关键字详解
2019/08/20 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
班长岗位职责
2013/11/10 职场文书
关于毕业的广播稿
2014/01/10 职场文书
英语教师岗位职责
2014/03/16 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
2016高考寄语集锦
2015/12/04 职场文书
java泛型通配符详解
2021/07/25 Java/Android