`
王之子
  • 浏览: 109822 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

form 表单伪 Ajax 提交

阅读更多

    有时候,你可能有这样的需求,就是提交表单的时候,不想刷新本页面。但你又不想用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

 

 

 

个人主页: https://plus.google.com/+sherlockwang/posts

  • 大小: 4.7 KB
  • 大小: 2.9 KB
  • 大小: 2.8 KB
分享到:
评论

相关推荐

    ajax提交form表单和上传图片

    本教程将详细讲解如何利用jQuery、jQuery Form插件以及Spring MVC框架来实现Ajax提交表单并上传图片。通过这种方式,用户无需等待页面刷新,即可完成操作,提升了交互性。 首先,`jquery.js` 是jQuery库的核心文件...

    ajax提交form表单

    在IT领域,特别是Web开发中,使用Ajax(Asynchronous JavaScript and XML)进行form表单的无刷新提交是一项关键技能。这种技术允许网页在不重新加载整个页面的情况下与服务器交互,从而提高了用户体验。以下是对给定...

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

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

    ajax提交表单到后台

    3. **使用AJAX提交表单**:在JavaScript中监听表单的提交事件,使用`$.ajax`方法进行异步提交: ```javascript $('#myForm').on('submit', function(event) { event.preventDefault(); // 阻止默认的表单提交行为...

    Laravel-Bootstrap-Modal-Form, 使用AJAX提交模式中的Bootstrap 表单,使用 Laravel 验证.zip

    Laravel-Bootstrap-Modal-Form, 使用AJAX提交模式中的Bootstrap 表单,使用 Laravel 验证 Laravel-Bootstrap-Modal-Form你的Laravel 应用程序的表单验证扩展插件。 在将 Bootstrap 窗体嵌入到 Bootstrap/jquery模式...

    使用AJAX提交Form表单实例演示

    总结,这个实例演示了如何使用jQuery和AJAX来实现Form表单的无刷新提交。通过这种方式,用户可以在提交表单后立即看到结果,而无需等待页面刷新,提高了交互性和用户体验。记住,实际应用中你需要根据具体需求调整...

    ajax验证并提交表单的两种方法博客源码

    本资源通过ajax实现对提交的form表单的验证,该代码不但有针对property验证,也有针对object验证,还有一个异步获取对象的实例;包含完整的代码和库文件;在myeclipse8.5和apache-tomcat-6.0.30测试通过;访问网址:...

    防止Layui form表单重复提交的实现方法

    使用AJAX提交表单数据的好处是,可以避免页面刷新,并且可以自定义提交完成后的响应处理逻辑。在AJAX请求完成后,可以根据服务器返回的数据进行相应的页面更新,或者显示提交成功的提示。 为了进一步增强用户体验,...

    完成的 Ajax 提交表单

    本示例着重介绍如何使用Ext JS框架中的Ajax组件来实现异步提交表单,以及如何处理success和failure回调。 首先,Ext JS是一个强大的JavaScript库,用于构建富客户端应用程序。它提供了丰富的组件模型和数据绑定机制...

    jq ajax提交表单

    完整的jq ajax提交表单,奖解压后jq文档加入页面中,调用就可惟了。 表单结构 &lt;form id="myForm" action="comment.php" method="post"&gt; Name: &lt;input type="text" name="name" /&gt; Comment: &lt;...

    ajax提交表单插件ajaxform.js

    这是一个ajax提交表单插件,支持文件上传,用起来非常方便。具体使用说明 http://blog.csdn.net/qq122453418/article/details/79511164 欢迎留言

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

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

    使用jQuery ajax提交表单代码

    本文将深入探讨如何使用jQuery的ajax方法来提交表单,从而实现异步数据交换,提高用户体验。 首先,jQuery的$.ajax()函数是进行Ajax请求的核心,它允许我们与服务器进行异步数据通信。在“使用jQuery ajax提交表单...

    利用ajax提交表单完整流程

    本文将详细介绍如何利用AJAX提交表单的完整流程,以实现更加流畅和用户友好的交互体验。 ### 1. 创建HTML表单 首先,我们需要创建一个HTML表单,它包含了用户输入的数据和一个用于触发AJAX提交的按钮。例如: ```...

    Spring下的AJAX和Form表单提交及单/多方法控制器比较

    在本文中,我们将探讨在Spring框架下,使用AJAX与传统Form表单提交的区别,以及单方法控制器和多方法控制器的使用场景。首先,我们来看看AJAX提交与Form表单提交的基本概念。 **AJAX(Asynchronous JavaScript and ...

    非常简单的ajax表单提交

    jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传.

    ajax 无刷新实现表单提交

    ajax无刷新表单提交 2;ajax的运行历程 最简单明了的实例,清晰的帮你弄清上述概念,运行简单,只需解压该包,然后Myeclipse中file - import - general - import existed project to workspace,即可调试运行 调试...

    使用AJAX提交Form表单

    二、使用AJAX提交Form表单的步骤 1. 创建XMLHttpRequest对象:在JavaScript中,我们首先需要创建一个XMLHttpRequest对象,这通常是异步的,意味着它不会阻塞页面的其他操作。 ```javascript var xhr = new ...

    vue12ajax提交表单

    在Vue.js框架中,提交表单是一个常见的任务,特别是在与后端进行数据交互时,我们通常会使用Ajax技术来实现异步通信。Vue.js结合Ajax(通常指的是jQuery的$.ajax或者现代浏览器的fetch API)可以创建高效且用户体验...

    ajax提交表单小例子

    本示例主要涉及如何使用AJAX来提交表单,并解决在提交中文数据时可能出现的乱码问题。 首先,我们了解AJAX的基本结构。一个基本的AJAX请求通常包括以下几个步骤: 1. 创建XMLHttpRequest对象:这是AJAX的核心,...

Global site tag (gtag.js) - Google Analytics