时间:2021-07-01 10:21:17 帮助过:4人阅读
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提交表单局部刷新 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!