有时候,你可能有这样的需求,就是提交表单的时候,不想刷新本页面。但你又不想用Ajax,有什么方法呢?这时可以在页面中用<form>和<iframe>实现。原理大概是这样实现的。
大家注意到这个form的target的了么?这个target属性的值frameFile,是form之后的iframe的name值,这样的写法是让当前的form表单在提交表单内容的时候转交给iframe中进行页面中表单处理,
并且不会产生当前页面跳转!
这个iframe拿到post过来的表单数据后会开始在自身内部访问post过来的页面地址,在内部中它会刷新页面,但是这已不重要了,因为当前的iframe已经被我display:none隐藏了!所以这样给用户看起来像是无刷新的页面,其实只是做一个一个小小的技巧!
现在的问题是你可能要在提交成功后给用户一个友好的提示,该怎么做到呢?
这是你可以先在页面中格式好一段HTML提示,然后把它隐藏起来,像下面这样子
然后在服务器端PHP后台这样处理
<?php header('Content-Type: text/html; charset=utf-8'); $html_str = '<script type="text/javascript"> window.parent.document.getElementById("join_circle_success_tip").innerHTML=\''.$html_str.'\'; window.parent.document.getElementById("join_circle_success_tip").style.display="block"; </script>'; exit($html_str); ?>
由于提交到 iframe 窗口中,所以在代码必须用 window 的 parent 属性才能访问到父窗口。
那种文件伪Ajax上传的方式就是这样实现的。因为Ajax不支持文件上传,所以不想刷新本页面,这种方法非常有用。
原文链接:http://woqilin.blogspot.com/2012/05/blog-post_4234.html
相关推荐
本教程将详细讲解如何利用jQuery、jQuery Form插件以及Spring MVC框架来实现Ajax提交表单并上传图片。通过这种方式,用户无需等待页面刷新,即可完成操作,提升了交互性。 首先,`jquery.js` 是jQuery库的核心文件...
在IT领域,特别是Web开发中,使用Ajax(Asynchronous JavaScript and XML)进行form表单的无刷新提交是一项关键技能。这种技术允许网页在不重新加载整个页面的情况下与服务器交互,从而提高了用户体验。以下是对给定...
AjaxForm是jQuery Form Plugin的一个功能,用于实现异步表单提交,特别是处理包含图片在内的复杂数据。本文将深入探讨如何使用ajaxForm进行异步表单提交。 首先,让我们了解什么是Ajax。AJAX(Asynchronous ...
3. **使用AJAX提交表单**:在JavaScript中监听表单的提交事件,使用`$.ajax`方法进行异步提交: ```javascript $('#myForm').on('submit', function(event) { event.preventDefault(); // 阻止默认的表单提交行为...
Laravel-Bootstrap-Modal-Form, 使用AJAX提交模式中的Bootstrap 表单,使用 Laravel 验证 Laravel-Bootstrap-Modal-Form你的Laravel 应用程序的表单验证扩展插件。 在将 Bootstrap 窗体嵌入到 Bootstrap/jquery模式...
总结,这个实例演示了如何使用jQuery和AJAX来实现Form表单的无刷新提交。通过这种方式,用户可以在提交表单后立即看到结果,而无需等待页面刷新,提高了交互性和用户体验。记住,实际应用中你需要根据具体需求调整...
本资源通过ajax实现对提交的form表单的验证,该代码不但有针对property验证,也有针对object验证,还有一个异步获取对象的实例;包含完整的代码和库文件;在myeclipse8.5和apache-tomcat-6.0.30测试通过;访问网址:...
使用AJAX提交表单数据的好处是,可以避免页面刷新,并且可以自定义提交完成后的响应处理逻辑。在AJAX请求完成后,可以根据服务器返回的数据进行相应的页面更新,或者显示提交成功的提示。 为了进一步增强用户体验,...
本示例着重介绍如何使用Ext JS框架中的Ajax组件来实现异步提交表单,以及如何处理success和failure回调。 首先,Ext JS是一个强大的JavaScript库,用于构建富客户端应用程序。它提供了丰富的组件模型和数据绑定机制...
完整的jq ajax提交表单,奖解压后jq文档加入页面中,调用就可惟了。 表单结构 <form id="myForm" action="comment.php" method="post"> Name: <input type="text" name="name" /> Comment: <...
这是一个ajax提交表单插件,支持文件上传,用起来非常方便。具体使用说明 http://blog.csdn.net/qq122453418/article/details/79511164 欢迎留言
jQuery.form插件正是为了满足这种需求而设计的,它扩展了jQuery库,使表单异步提交变得更加简单、灵活且强大。本文将详细介绍如何使用jQuery.form插件,实现完美的表单异步提交。 首先,我们需要了解jQuery.form...
本文将深入探讨如何使用jQuery的ajax方法来提交表单,从而实现异步数据交换,提高用户体验。 首先,jQuery的$.ajax()函数是进行Ajax请求的核心,它允许我们与服务器进行异步数据通信。在“使用jQuery ajax提交表单...
本文将详细介绍如何利用AJAX提交表单的完整流程,以实现更加流畅和用户友好的交互体验。 ### 1. 创建HTML表单 首先,我们需要创建一个HTML表单,它包含了用户输入的数据和一个用于触发AJAX提交的按钮。例如: ```...
在本文中,我们将探讨在Spring框架下,使用AJAX与传统Form表单提交的区别,以及单方法控制器和多方法控制器的使用场景。首先,我们来看看AJAX提交与Form表单提交的基本概念。 **AJAX(Asynchronous JavaScript and ...
jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传.
ajax无刷新表单提交 2;ajax的运行历程 最简单明了的实例,清晰的帮你弄清上述概念,运行简单,只需解压该包,然后Myeclipse中file - import - general - import existed project to workspace,即可调试运行 调试...
二、使用AJAX提交Form表单的步骤 1. 创建XMLHttpRequest对象:在JavaScript中,我们首先需要创建一个XMLHttpRequest对象,这通常是异步的,意味着它不会阻塞页面的其他操作。 ```javascript var xhr = new ...
在Vue.js框架中,提交表单是一个常见的任务,特别是在与后端进行数据交互时,我们通常会使用Ajax技术来实现异步通信。Vue.js结合Ajax(通常指的是jQuery的$.ajax或者现代浏览器的fetch API)可以创建高效且用户体验...
本示例主要涉及如何使用AJAX来提交表单,并解决在提交中文数据时可能出现的乱码问题。 首先,我们了解AJAX的基本结构。一个基本的AJAX请求通常包括以下几个步骤: 1. 创建XMLHttpRequest对象:这是AJAX的核心,...