用来异步提交表单或上传文件
使用iframe模仿ajax
代码如下:
/**
* 用于异步提交表单
* @author Long
* @returns AsyncForm
*/
var AsyncForm = (function() {
/**
* @param options
* @param callback
* @returns
* @desc 创建iframe
*/
var iframe = function(options) {
options = options || {
id : 'iframe' + Math.random(),
name : 'iframe',
src : ''
};
var iframe;
try {
iframe = document.createElement('<iframe name=' + options.name+ '>');
} catch (e) {
iframe = document.createElement('iframe');
iframe.name = options.name;
}
options.id && (iframe.id = options.id);
iframe.src = options.src;
iframe.style.cssText = options.cssText;
return iframe;
};
var getDoc = function(frame) {
var doc = frame.contentWindow ? frame.contentWindow.document
: frame.contentDocument ? frame.contentDocument
: frame.document;
return doc;
}
/**
* @param {form}
* @return {}
* @desc 上传文件
*/
function AsyncForm(form) {
var uuid = AsyncForm.uuid++;
this.state = 0;
this.form = form;
this.file=form;
var name = 'upload_file_' + uuid;
this.iframe = iframe({
name : name,
src : 'javascript:;',
cssText : 'display:none;'
});
document.body.appendChild(this.iframe);
this.form.target = name;
};
var callbackFunction;//回调函数
/**
* 处理返回值,执行回调函数
* @param {e} 事件对象
*/
var cb=function (e){
var doc = getDoc(this);
var docRoot = doc.body ? doc.body : doc.documentElement;
var responseText=eval("(" + docRoot.innerHTML + ")");
callbackFunction(responseText,e);
document.body.removeChild(this);
}
AsyncForm.uuid = 0;
AsyncForm.prototype = {
checkState : function() {
var up = this;
var iframe = getDoc(this.iframe);
var state = iframe.readyState;//获取iframe的状态
//检测iframe的初始化状态,若未初始化则继续检测直到初始化完成
if (state && state.toLowerCase() == 'uninitialized')
setTimeout(function() {up.checkState.apply(up)}, 50);
},
submit : function(callback) {
// return false;
callbackFunction=callback;
var async= this;
//兼容IE,IE中load事件中的this指向window,使用apply指定回调函数的this对象为iframe
if (this.iframe.attachEvent)
this.iframe.attachEvent('onload',function(e){cb.apply(async.iframe, [e])});
else//兼容非IE浏览器,this对象指向被绑定者本身
this.iframe.addEventListener('load',cb, false);
//检测iframe的状态,
//setTimeout中执行function的this对象指向window,使用apply将function的this指向AsyncForm的实例
setTimeout(function() {async.checkState.apply(async)}, 15);
this.form.submit();
},
readyState : function() {
return this.state;
},
cancel : function() {
}
};
return AsyncForm;
})();
调用很简单,一句话:
new AsyncForm(form).submit(function(responseText,e){
alert(responseText);
window.location.href=window.location.href;
});
responseText是返回值,可以是String ,int,json 任意类型的值
这里的参数“form”是表单dom对象,submit方法的参数是一个回调函数。
今后会加入一些不使用表单直接上传文件的功能,尽请期待。
如果哪位有更好的建议欢迎提意见
分享到:
相关推荐
在Web开发中,异步表单提交是一种常见需求,它能提供更好的用户体验,因为用户无需等待页面刷新即可完成数据的提交。jQuery.form插件正是为了满足这种需求而设计的,它扩展了jQuery库,使表单异步提交变得更加简单、...
`ajaxSubmit`是jQuery Form Plugin的一部分,它允许我们使用Ajax技术实现表单的异步提交,包括多文件上传。这种方式不仅可以提高用户体验,因为用户无需等待页面刷新,还能有效管理服务器资源,避免一次性处理大量...
### Java实现多文件异步上传知识点详解 在现代Web应用开发中,文件上传是一个非常常见的需求,尤其是在涉及图片、文档等多媒体数据的应用场景下。为了提高用户体验,异步上传技术得到了广泛的应用。本文将深入探讨...
jQuery Form插件极大地简化了异步表单提交的过程,使开发者能够专注于业务逻辑和用户体验。结合SSH框架,可以构建出高效、互动性强的Web应用。在实际项目中,根据需求灵活运用这些工具和技巧,能有效提升网站性能和...
下面我们将详细探讨异步表单请求的实现原理、步骤以及在Java中的应用。 1. **异步请求的工作原理** 异步请求的核心在于,浏览器不会阻塞其他任务,而是创建一个新的请求并在后台处理。当服务器返回响应时,...
对于开发人员来说,理解`jquery.form.js`的源码可以帮助深入掌握异步表单提交的原理和实现细节。通过查看源码,我们可以看到如何处理表单数据的序列化、如何监听和触发事件,以及如何与服务器进行通信。这对于我们...
在传统的文件上传方式中,用户提交表单时,浏览器会发送一个包含整个文件的数据的新请求,这可能导致页面长时间无响应,尤其是在处理大文件时。而异步上传,通常借助JavaScript、AJAX和Web服务技术,使得文件上传...
9. **用户体验**:在异步提交文件时,可以显示加载指示器,以告知用户操作正在进行。文件上传成功后,可以更新页面显示上传结果,或者通过弹窗通知用户。 10. **响应式设计**:为了适应不同设备和屏幕尺寸,确保...
AjaxForm是jQuery Form Plugin的一个功能,用于实现异步表单提交,特别是处理包含图片在内的复杂数据。本文将深入探讨如何使用ajaxForm进行异步表单提交。 首先,让我们了解什么是Ajax。AJAX(Asynchronous ...
在本教程中,我们将深入探讨如何利用jQuery实现异步提交文件的组件,这将帮助开发者提高用户体验,因为异步提交允许在不刷新整个页面的情况下进行文件上传。 首先,理解异步提交的基本概念至关重要。传统的文件上传...
### JavaScript 实现异步获取表单数据 #### 一、背景介绍 在现代Web开发中,异步操作是一项非常重要的技术。它允许浏览器在等待服务器响应的同时继续...希望这些知识点能帮助您更好地理解和应用JavaScript异步操作。
本文实例讲述了JQuery异步提交表单与文件上传功能。分享给大家供大家参考,具体如下: Jquery.form.js是一个可以异步提交表单及上传文件的插件。 示例如下: index.html <!DOCTYPE html> <html> <head&...
对于多部分表单(包含文件上传),可以使用FormData对象。 ```javascript var formData = new FormData($("#myForm")[0]); ``` ### 5. 安全与优化 异步提交虽好,但也需注意安全问题。例如,防止跨站脚本攻击(XSS...
总结来说,ASP.NET MVC3的表单提交和异步提交是构建Web应用程序不可或缺的元素。表单提交适合简单的交互,而Ajax提交则能提升用户体验,尤其是在需要频繁与服务器交互或更新局部页面时。理解并熟练运用这两种提交...
### AJAX异步提交表单知识点解析 #### 一、AJAX技术概述 AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以...
JavaScript作为客户端脚本语言,可以通过多种策略来防止用户意外或恶意地多次提交表单。以下是一些关键的知识点: 1. **禁用提交按钮**:最简单的预防方法是在用户点击提交按钮后立即将其禁用。这可以通过监听`...
综上所述,实现"javascript弹出层表单提交代码"涉及到了JavaScript的基础知识,如DOM操作、事件处理、异步通信,以及一些高级技巧,如使用第三方库提高开发效率。同时,良好的用户体验和数据验证也是不可忽视的部分...
`jsp异步上传文件`这个主题聚焦于如何利用JavaServer Pages (JSP)、Servlet以及JavaScript的ajaxFileupload.js插件来实现在Web应用中异步上传文件。这种方式可以提供更好的用户体验,因为文件上传不会阻塞页面的其他...
标签“ajax”和“异步文件上传”表明,这个主题是关于使用Ajax技术实现实时文件上传,而无需等待整个页面刷新。在实际项目中,你可能还需要考虑错误处理、文件大小限制、多文件上传、以及安全性等问题。 至于提供的...
在PHP开发中,表单文件上传是一个常见的...通过合理的前端JavaScript处理和后端PHP逻辑,我们可以实现安全、高效的异步文件上传功能。在实际开发中,还可以结合Ajax和其他库(如jQuery Form插件)进一步优化用户体验。