AJAX提交与FORM提交的区别说明

现在来对比一下ajax与隐藏form提交的利与弊。

1.隐藏form提交,更新数据完成后,需要转到一个空白页面再对原页面进行提交后处理;ajax则不用,可以直接返回原页面进行提交后的处理。可见ajax可以比隐藏form提交少增加一个页面。

2.ajax出于安全性考虑,不能对文件进行操作,所以就不能通过ajax来实现文件上传,而通过隐藏form提交则可以实现这个功能,所以这就是目前用隐藏form提交的主要用途。

现在接下来讲述如何通过隐藏form来实现文件上传

1)首先定义一个用于填写表单内容的form

<form name="form1"></form>

2)接着定义一个用于提交的form

<form name="form2" target="myIframe">  //用于指定提交返回的页面显示在这个隐藏的iframe中

<iframe name="myIframe" style="display:none"></iframe>  //用于存放提交返回后的空白页面

<div id="formInner" style="display:none"></div>  //用于获取form1的html内容,获得form1的表单元素

</form>

3)在form1提交时,进行如下javascript处理

var formInner= document.getElementById("formInner");
formInner.innerHTML = form1.innerHTML;  //复制form1的html代码
form2.action = form1.action;
form2.submit();

4)提交后,进入后台处理,后台处理完成后,需要返回一个空白页面blank.jsp,这个页面是在隐藏的iframe中生成的,所以可以通过parent对象对原页面进行操作。

比如原页面定义了一个updatePageFromSubmit(),则在blank.jsp页面中可以通过parent.updatePageFromSubmit()来调用进行提交返回后的处理

时间: 2024-10-24 01:19:39

AJAX提交与FORM提交的区别说明的相关文章

AJAX提交与FORM提交的区别说明_AJAX相关

现在来对比一下ajax与隐藏form提交的利与弊. 1.隐藏form提交,更新数据完成后,需要转到一个空白页面再对原页面进行提交后处理:ajax则不用,可以直接返回原页面进行提交后的处理.可见ajax可以比隐藏form提交少增加一个页面. 2.ajax出于安全性考虑,不能对文件进行操作,所以就不能通过ajax来实现文件上传,而通过隐藏form提交则可以实现这个功能,所以这就是目前用隐藏form提交的主要用途. 现在接下来讲述如何通过隐藏form来实现文件上传 1)首先定义一个用于填写表单内容的f

ajax与隐藏form提交的利与弊

 本篇文章主要是对AJAX提交与FORM提交的区别进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 现在来对比一下ajax与隐藏form提交的利与弊.   1.隐藏form提交,更新数据完成后,需要转到一个空白页面再对原页面进行提交后处理:ajax则不用,可以直接返回原页面进行提交后的处理.可见ajax可以比隐藏form提交少增加一个页面.   2.ajax出于安全性考虑,不能对文件进行操作,所以就不能通过ajax来实现文件上传,而通过隐藏form提交则可以实现这个功能,所以这就是

easyui datebox- 请教个问题, 我 datebox , 初始化 一个值, 为什么 form 提交的时候是空的,

问题描述 请教个问题, 我 datebox , 初始化 一个值, 为什么 form 提交的时候是空的, 有人么,, 请教个问题, 我 datebox , 初始化 一个值, 为什么 form 提交的时候是空的, 一定要手动选中一个值才可以, 界面上可以看到已经初始化的日期是正确的. 点击提交, form提交的数据中这个date的时间没有数据.自己选中一个日期后,在点提交,提交的数据中这个date 的值有数据 createEmptyTime('#next_start_time'); $('#next

上传-jQuery ajax form提交在IE8下不执行回调函数

问题描述 jQuery ajax form提交在IE8下不执行回调函数 // 上传文件function myUploadExcel(obj) {var options = { url : ""${ctx}/ins/pro/upLoadTempFile.do?filename=""+obj.value dataType : ""text"" beforeSubmit : function(formDatajqFormoption

jquery.form.js实现将form提交转为ajax方式提交的方法

 这个框架集合form提交.验证.上传的功能.  这个框架必须和jquery完整版结合,否则使用min则无效. 原理:利用js进行对form进行组装成ajax的url和data,原理还是用ajax来提交,其实这完全可以自己写,但是有这个框架可能会更简单. 一.最简单例子: 第一步:引用js  1 2 3 4 <!--这里的min是自己用js压缩工具对完整版进行的压缩 并不是真正的min,所以好使--> <script type="text/javascript" sr

jquery.form.js实现将form提交转为ajax方式提交的方法_jquery

本文实例讲述了jquery.form.js实现将form提交转为ajax方式提交的方法.分享给大家供大家参考.具体分析如下: 这个框架集合form提交.验证.上传的功能. 这个框架必须和jquery完整版结合,否则使用min则无效. 原理:利用js进行对form进行组装成ajax的url和data,原理还是用ajax来提交,其实这完全可以自己写,但是有这个框架可能会更简单. 一.最简单例子: 第一步:引用js <!--这里的min是自己用js压缩工具对完整版进行的压缩 并不是真正的min,所以好

使用Ajax方法实现Form表单的提交及注意事项

写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说想要将控制权放在前端,通过js来操作页面的跳转或者数据变化. 一般这种异步的操作,我们都会想到ajax方式,因此在实现了功能后就整理了这篇文章,通过ajax方法实现form表单的提交并进行后续的异步操作. 常见的form表单提交方式 <!DOCTYPE HTML PUBLIC "-//W3C/

jquery+ajax验证不通过也提交表单问题处理_jquery

validationEngine给我们为前端的表单验证减少了很大的工作量.大部分情况我们使用validationEngine验证表单的形式有几种方式: 1 使用正常的表单提交.这种情况validationEngine验证不通过是不会提交表单的. 2 使用ajax提交表单,但是没有使用ajax验证.          这种方式也比较简单,在我们使用ajax请求前检查验证是否通过就可以,例如: 复制代码 代码如下: //验证不通过时return      if(!$("form#ajaxForm&q

C# web 页面Form提交iframe加载同时进行,iframe无法加载

问题描述 C# web 页面Form提交iframe加载同时进行,iframe无法加载 由于页面处理时间长,我自己做了个进度条,就是一个静态也页面,ajax每秒请求一次看处理到 哪儿了. 这个静态页面在新窗口打开一切正常,但是放到处理页面用iframe打开无法加载 ,src的地址正常,用火狐浏览器重新为src赋值(值不变)就能正常显示,用js重新为src赋值也不行, 解决方案 解决方案二: 这是用火狐的ifrbug查看元素显示的 解决方案三: 关于Iframe无法加载的问题