`
反求诸己
  • 浏览: 543103 次
  • 性别: Icon_minigender_1
  • 来自: 湖南娄底
社区版块
存档分类
最新评论

利用 iframe 假装异步提交表单(转)

 
阅读更多
利用 iframe 假装异步提交表单

我有话说异步提交表单,但需要跨域,POST 是靠不住的,幸好 YUI3 提供了强大的 Y.Get.script 模块。后来,伟大的饺子哥说,可以直接用 Form 提交,纳尼?看看代码吧 : 

<iframe name="mangguo"></iframe>假如有个表单: 

<form method="post" action="http://www.mangguo.org/index.php" target="mangguo"> 
<input type="text" name="test" /> 
<button type="submit">提交表单</button> 
</form>提交后数据将发送到 http://www.mangguo.org/index.php 页面,但由于指定了 target=”mangguo”,所以不在当前窗口打开(也就是不刷新页面的效果),而是在 name=”mangguo” 的 iframe 中打开。
分享到:
评论

相关推荐

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

    jQuery.form插件正是为了满足这种需求而设计的,它扩展了jQuery库,使表单异步提交变得更加简单、灵活且强大。本文将详细介绍如何使用jQuery.form插件,实现完美的表单异步提交。 首先,我们需要了解jQuery.form...

    jquery异步提交form表单

    jQuery的`$.ajax()`函数或`.submit()`配合`.ajaxSubmit()`方法为我们提供了异步提交表单的能力,保持页面不刷新,提高交互体验。 首先,我们来看一下`jquery.form.js`这个文件。这是jQuery Form Plugin的一个核心...

    iframe实现异步无刷新提交

    &lt;title&gt;iframe异步提交 提交" onclick="submitForm()"&gt; &lt;iframe id="hiddenIframe" style="display:none;"&gt;&lt;/iframe&gt; function submitForm() { var iframe = document.getElementById('...

    用iframe提交表单,主要是将表单提交到iframe中,可实现无刷新提交。

    用iframe提交表单,主要是将表单提交到iframe中,可实现无刷新提交。 html页面: &lt;iframe name="FORMSUBMIT" width="1" height="1" &gt;&lt;/iframe&gt; ...

    php之表单文件iframe异步上传

    在文件上传场景中,我们可以利用`&lt;iframe&gt;`来承载表单提交的结果,因为它的加载不会影响主页面的状态。 异步上传的核心在于利用JavaScript来监听`&lt;iframe&gt;`的`load`事件。当用户选择文件后,表单提交到`&lt;iframe&gt;`,...

    iframe实现图片异步上传.doc

    `&lt;iframe&gt;`元素是关键,它的`name`属性被用作表单的`target`,使得表单提交不会导致页面重载,而是通过`iframe`进行。 2. **JSP与标签库**: JSP(JavaServer Pages)用于动态生成HTML,其中`&lt;c:forEach&gt;`是JSTL...

    关于iframe跨域POST提交的方法示例

    以前在面试的时候经常遇到问关于跨域的事儿,所以自己对跨域有一定的概念性了解,知道什么是跨域以及解决跨域的方法,但是具体实际从来没有操作过,直到最近在公司项目中,遇到了一个需要使iframe跨域进行POST提交的...

    js跨域iframepostMessage提交表单

    综上所述,"js跨域iframepostMessage提交表单"的实现策略结合了iframe、form、postMessage以及事件监听等多个JavaScript特性,有效解决了跨域提交表单,尤其是包含文件上传的复杂场景,并且能获取返回值,提高了用户...

    iframe 异步加载技术及性能分析

    友好`iframe`通常利用JavaScript通信(如`postMessage` API)来在主页面和`iframe`之间传递信息,实现异步加载和交互。 每种加载方法在不同场景下都有其适用性。在选择加载策略时,应考虑内容的重要性、加载时间、...

    使用iframe实现提交表单不刷新页面

    为了实现这一需求,我们可以利用HTML的`&lt;iframe&gt;`元素,这是一种无刷新提交表单的方法。`&lt;iframe&gt;`允许我们将一个网页嵌入到另一个网页中,使其在后台运行,从而达到不影响主页面的效果。 首先,我们需要在HTML文档...

    layui弹出层按钮提交iframe表单的方法

    如下所示: layer.open({ id: 'LAY_layuipro', //设定一个id,防止重复弹出 ... var inputForm = $(window.frames[layui-layer-iframe + index].document).contents().find(#userForm); inputForm.

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

    Java Web中的Ajax异步提交方式上传文件是一种常见且高效的用户交互技术,它允许用户在不刷新整个页面的情况下发送数据到服务器并接收响应。本项目利用Maven构建,前端使用jQuery库以及jQuery-form插件,后端则采用...

    php无刷新提交表单

    无刷新提交是指用户在网页上操作时(例如提交表单),页面无需进行完整的刷新就能完成数据的提交并显示结果的一种技术。这种技术能显著提升用户体验,减少用户等待时间,并保持页面当前的状态不被破坏。 在实际应用...

    使用隐藏的Iframe实现ajax无刷新上传

    使用隐藏的Iframe实现Ajax无刷新上传的基本思路是:创建一个隐藏的Iframe作为文件上传的目标,当用户选择文件并提交表单后,表单数据会通过POST方式发送到服务器端处理文件上传操作。由于Iframe的存在,上传过程不会...

    ajax(iframe)无刷新提交表单、上传文件

    当使用iframe作为表单提交的目标时,表单数据实际上是在后台异步提交的,用户无需等待表单提交和页面刷新,从而实现无刷新上传。一旦服务器处理完成,可以通过JavaScript(如回调函数)来处理服务器返回的结果,例如...

    js加iframe轻松实现异步图片上传 可以预览 兼容FF,chrome,ie9

    3. 创建一个`&lt;form&gt;`元素,将用户选择的文件作为`&lt;input type="file"&gt;`的一部分,将`form`的`target`属性设置为刚才创建的IFrame的ID,这样表单提交就会在IFrame内进行。 4. 使用JavaScript触发`form`的`submit`...

    ajax_XML_iframe无刷新异步读取 源代码

    标题中的"ajax_XML_iframe无刷新异步读取 源代码"指的是使用Ajax技术和XML以及IFrame实现的无刷新异步数据读取技术。在Web开发中,这种技术能够提高用户体验,因为用户无需等待整个页面刷新即可获取或更新数据。 ...

    HTML5 postMessage+iframe实现文件跨域异步上传

    首先,我们创建一个包含文件上传表单的页面,表单需要设置`target`属性为一个`iframe`的ID,这样提交后会把结果加载到`iframe`中,而不会刷新整个页面。例如: ```html 上传 &lt;iframe id="uploadFrame" style=...

Global site tag (gtag.js) - Google Analytics