`
恋上你的味道
  • 浏览: 101114 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

javascript实现异步提交表单或上传文件

阅读更多
用来异步提交表单或上传文件
使用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方法的参数是一个回调函数。
今后会加入一些不使用表单直接上传文件的功能,尽请期待。
如果哪位有更好的建议欢迎提意见
1
0
分享到:
评论

相关推荐

    使用jQuery.form插件,实现完美的表单异步提交

    在Web开发中,异步表单提交是一种常见需求,它能提供更好的用户体验,因为用户无需等待页面刷新即可完成数据的提交。jQuery.form插件正是为了满足这种需求而设计的,它扩展了jQuery库,使表单异步提交变得更加简单、...

    使用ajaxSubmit文件实现多文件的异步上传

    `ajaxSubmit`是jQuery Form Plugin的一部分,它允许我们使用Ajax技术实现表单的异步提交,包括多文件上传。这种方式不仅可以提高用户体验,因为用户无需等待页面刷新,还能有效管理服务器资源,避免一次性处理大量...

    java实现多文件异步上传

    ### Java实现多文件异步上传知识点详解 在现代Web应用开发中,文件上传是一个非常常见的需求,尤其是在涉及图片、文档等多媒体数据的应用场景下。为了提高用户体验,异步上传技术得到了广泛的应用。本文将深入探讨...

    jquery-form 异步提交表单

    jQuery Form插件极大地简化了异步表单提交的过程,使开发者能够专注于业务逻辑和用户体验。结合SSH框架,可以构建出高效、互动性强的Web应用。在实际项目中,根据需求灵活运用这些工具和技巧,能有效提升网站性能和...

    异步 提交表单请求

    下面我们将详细探讨异步表单请求的实现原理、步骤以及在Java中的应用。 1. **异步请求的工作原理** 异步请求的核心在于,浏览器不会阻塞其他任务,而是创建一个新的请求并在后台处理。当服务器返回响应时,...

    jquery异步提交form表单

    对于开发人员来说,理解`jquery.form.js`的源码可以帮助深入掌握异步表单提交的原理和实现细节。通过查看源码,我们可以看到如何处理表单数据的序列化、如何监听和触发事件,以及如何与服务器进行通信。这对于我们...

    ASP.NET实现异步上传文件Demo

    在传统的文件上传方式中,用户提交表单时,浏览器会发送一个包含整个文件的数据的新请求,这可能导致页面长时间无响应,尤其是在处理大文件时。而异步上传,通常借助JavaScript、AJAX和Web服务技术,使得文件上传...

    java web ajax异步提交方式上传文件

    9. **用户体验**:在异步提交文件时,可以显示加载指示器,以告知用户操作正在进行。文件上传成功后,可以更新页面显示上传结果,或者通过弹窗通知用户。 10. **响应式设计**:为了适应不同设备和屏幕尺寸,确保...

    ajaxForm异步提交表单(含图片)

    AjaxForm是jQuery Form Plugin的一个功能,用于实现异步表单提交,特别是处理包含图片在内的复杂数据。本文将深入探讨如何使用ajaxForm进行异步表单提交。 首先,让我们了解什么是Ajax。AJAX(Asynchronous ...

    jquery 实现异步提交文件组件(含说明)

    在本教程中,我们将深入探讨如何利用jQuery实现异步提交文件的组件,这将帮助开发者提高用户体验,因为异步提交允许在不刷新整个页面的情况下进行文件上传。 首先,理解异步提交的基本概念至关重要。传统的文件上传...

    【JavaScript源代码】JavaScript实现异步获取表单数据.docx

    ### JavaScript 实现异步获取表单数据 #### 一、背景介绍 在现代Web开发中,异步操作是一项非常重要的技术。它允许浏览器在等待服务器响应的同时继续...希望这些知识点能帮助您更好地理解和应用JavaScript异步操作。

    JQuery异步提交表单与文件上传功能示例

    本文实例讲述了JQuery异步提交表单与文件上传功能。分享给大家供大家参考,具体如下: Jquery.form.js是一个可以异步提交表单及上传文件的插件。 示例如下: index.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&...

    异步提交 表格异步提交

    对于多部分表单(包含文件上传),可以使用FormData对象。 ```javascript var formData = new FormData($("#myForm")[0]); ``` ### 5. 安全与优化 异步提交虽好,但也需注意安全问题。例如,防止跨站脚本攻击(XSS...

    asp.net mvc3 表单提交和异步提交

    总结来说,ASP.NET MVC3的表单提交和异步提交是构建Web应用程序不可或缺的元素。表单提交适合简单的交互,而Ajax提交则能提升用户体验,尤其是在需要频繁与服务器交互或更新局部页面时。理解并熟练运用这两种提交...

    ajax异步提交表单

    ### AJAX异步提交表单知识点解析 #### 一、AJAX技术概述 AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以...

    javascript方式防止表单重复提交

    JavaScript作为客户端脚本语言,可以通过多种策略来防止用户意外或恶意地多次提交表单。以下是一些关键的知识点: 1. **禁用提交按钮**:最简单的预防方法是在用户点击提交按钮后立即将其禁用。这可以通过监听`...

    javascript弹出层表单提交代码

    综上所述,实现"javascript弹出层表单提交代码"涉及到了JavaScript的基础知识,如DOM操作、事件处理、异步通信,以及一些高级技巧,如使用第三方库提高开发效率。同时,良好的用户体验和数据验证也是不可忽视的部分...

    jsp异步上传文件

    `jsp异步上传文件`这个主题聚焦于如何利用JavaServer Pages (JSP)、Servlet以及JavaScript的ajaxFileupload.js插件来实现在Web应用中异步上传文件。这种方式可以提供更好的用户体验,因为文件上传不会阻塞页面的其他...

    ajax异步上传文件实现

    标签“ajax”和“异步文件上传”表明,这个主题是关于使用Ajax技术实现实时文件上传,而无需等待整个页面刷新。在实际项目中,你可能还需要考虑错误处理、文件大小限制、多文件上传、以及安全性等问题。 至于提供的...

    php之表单文件iframe异步上传

    在PHP开发中,表单文件上传是一个常见的...通过合理的前端JavaScript处理和后端PHP逻辑,我们可以实现安全、高效的异步文件上传功能。在实际开发中,还可以结合Ajax和其他库(如jQuery Form插件)进一步优化用户体验。

Global site tag (gtag.js) - Google Analytics