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()来调用进行提交返回后的处理

赞 (0)

相关推荐

  • ajax提交url与ajax提交表单的详细比较

    1:ajax自已构造一个url,这种方式传参数要用Data,不能用于表单提交. 例: 复制代码 代码如下: function createHtml(id){             $("#reloading").show();              //edit_bg是个div,提交时显示,这样可以使背景页面不能操作.             $("#edit_bg").show();             $.ajax({             type

  • jquery ajax提交表单数据的两种方式

    之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐.学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery.Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后台可以获取到Form表单的值).在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交,当然你要是想练练"打字水平"的话用第一种方式提交也未尝不可,相信开发者都不想费白劲吧!

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

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

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

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

  • 将form表单通过ajax实现无刷新提交的简单实例

    实例如下: //将form转换为AJAX提交 function ajaxSubmit(url,frm,fn){ var dataPara=getFormJson(frm); $.ajax({ url:url, type:"post", data:dataPara, async:false, dataType:'txt', success:fn }); } //将form中的值转换为键值对 function getFormJson(frm){ var o={}; var a=$(frm)

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

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

  • 纯javascript的ajax实现php异步提交表单的简单实例

    很多时候需要异步提交表单,当表单太多是时候,一个个getElementById变得很不实际 当然,jquery可以实现异步提交表单,jquery.form.js这个库貌似也挺流行 只是有时候并不想使用额外的库,所以就琢磨着自己写,用纯js来实现异步提交表单 实现如下(本例用POST方式提交,用php作为服务器脚本) HTM L文件:test <html> <head> <script type="text/javascript" src="nam

  • jquery ajax 如何向jsp提交表单数据

    jquery ajax 如何向jsp提交表单数据

    AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职的时候屡被淘汰.我也是一个WEB程序开发者,当然我也要 "随波逐流"一把,不然饭碗不保啊! 之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐.学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了 Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery.Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后

  • WordPress中利用AJAX技术进行评论提交的实现示例

    一直对 WordPress 的 Ajax 交互研究感兴趣,也一直很关注于这方面的技术,谈到 WordPress Ajax 就不得不谈到评论 Ajax提交,作为一个博客.论坛评论的 Ajax 提交不仅可以改善用户体验,还可以大幅缩减服务器开支,毕竟输出单条评论内容比重新组织输出一个页面要简单的多. 虽说现在访问量一直比较低,不存在服务器压力的问题,但一向注重用户体验的我,当然不能放弃这么一个提升用户体验的机会.今天抽了一下午的空,把这个主题的 Ajax 评论提交初步完成了. 直接开门见山,直接上代

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

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

  • ASP.NET基于Ajax的Enter键提交问题分析

    本文实例讲述了ASP.NET基于Ajax的Enter键提交.分享给大家供大家参考,具体如下: 近日遇到一个Enter键的问题,总结下: 1. 首先复习下html form对Enter的响应,不同的浏览器对Enter的处理略有不同,这里采用IE7 A. html form只有一个TextBox, 没有submit按钮, 点Enter 提交form. B. >1个TextBox, 没有submit按钮, 点Enter ,form没有响应. C. 页面有一个(或多个)submit按钮, 点Enter,

  • js表单提交和submit提交的区别实例分析

    本文实例分析了js表单提交和submit提交的区别.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <

随机推荐