利用iframe实现无刷新提交

php利用iframe实现无刷新文件上传功能

上传原理很简单就是利用表单的打开方式为iframe的name名,这样就可以在当前页面的iframe打来了,实现文件上传,再利用js返回上传结果. form target .在 action 属性中规定的页面会在新窗口中打开.如果是iframe,则在此iframe中打开. phpAjaxUpload.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T…

利用iframe实现无刷新上传处理

继上一篇对上传异常进行处理之后,当上传异常的时候的错误体验并不是很好,这里介绍用iframe来进行错误提示拦截错误 @ExceptionHandler(MaxUploadSizeExceededException.class) public String handleException(Exception ex,HttpServletRequest request,HttpServletResponse response) { try { if (ex instanceof org.sprin…

iframe实现面页无刷新提交表单

一.表单提交到了哪里? 这似乎是个无知的问题,我们都知道表单提交到服务器,java,php,asp等服务器,然后由服务器去读.那么之后呢,服务器总要返回点什么吧,要么返回一个xml或json数据,要么返回一个页面,要么返回一个页面片段,但是返回到哪里了,这些结果在哪里展示?其实这就是常常被忽略的一个问题,尤其是 ajax用多了,觉得无刷新是理所当然的.在默认情况下,在什么页面提交的,就会将返回的数据(json或页面或页面片段)给这个页面.这里的页面指一个框架,带有<html></ht…

HTML无刷新提交表单

通常对于无刷新提交表单,我们都是运用ajax实现的.前段时间跟着老大了解到另一种无刷新提交表单的方法,是利用iframe框架实现的.现在整理出来分享给大家. 第一种: (html页面) <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="utf-8"> <title>无刷新提交表单</title> <style type=&q…

表单 - Form - 无刷新提交原理

为什么Form组件的表单提交可以做到无刷新? EasyUI在提交的时候,将表单作为一个隐藏的iframe进行的提交,并不是我们看到的那个表单进行的提交并且那个iframe使用了绝对定位,保证页面上不可见那么Form组件提交和Ajax提交怎么选择呢? 个人觉得大多数时候是差不多的,主要区别在于Form组件的提交本质还是表单,可以做到无刷新提交文件大概原理就是这样子…

简单方法实现无刷新提交Form表单

前几天遇到一个前端的问题.我希望提交表单后页面不跳转且不刷新当前页面,然而查了很多方法都没有解决. 由于Form 是提交后一定刷新页面的,所以我们可以用一个折中的办法.我们给Form 指定一个iframe,这样表单提交后刷新的就是我们指定的iframe 而不是页面了. <iframe id="fraSubmit" name="fraSubmit" style="display:none;"></iframe> 定义完成后在…

Ajax.BeginForm()实现ajax无刷新提交

1. 同时安装 Microsoft jQuery Unobtrusive ajax 和 jQuery Unobtrusive Ajax,如下图安装完成之后多了如下的js库 2. 引用该js库 layout中引用即可实现ajax无刷新提交…

Ajax无刷新提交

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…

axios页面无刷新提交from表单

页面部分大概意思一下 <form method="post" enctype="multipart/form-data"> ... </form> axios部分代码以vue示例: //提交表单 onSubmit(e) { e = e || event; e.preventDefault(); let self = this; let formData = new FormData(); formData.append("idCar…

jQuery实现form表单基于ajax无刷新提交方法详解

本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o…

form表单target的用法，实现无刷新提交页面

form表单的target,当将iframe设置为隐藏时,可以实现当前页表单提交而不进行跳转刷新.代码如下,首页在页面里准备一个form表单和一个iframe. <form action="提交的action" method="post" target="myIframe"> ..................... </form> <iframe name="myIframe" style=&…

利用Content-disposition实现无刷新下载图片文件

今天在使用 tinypng.com 这个在线压缩图片的网站时,对其处理完图片后,可以无刷新下载图片感到好奇,于是了解了一下相关实现.无刷新下载可以利用MIME type或者设置Content-disposition来实现. 无刷新下载文件无刷新下载 rar 之类的文件很好实现: 通过 meta 标签: <meta http-equiv="refresh" content="url=http://down.load/file.rar">: 通过 Java…

利用history实现无刷新跳转界面

看标题是不是感觉很拽的样子,其实没什么啦,也就是时下常说的单页面应用.这种web形式在如今的移动端十分流行,毕竟在移动端频繁得去刷新界面不是很友好,而且还费流量.今天我们要做一个小的app(移动端),来揭秘history的秘密.首先我们了解一下核心方法: window.history.pushState:方法:为histroy建立历史记录,该方法传入三个函数:1.对应url的信息2.下一个界面的title 3 .需要你动态改变的地址栏中德url. window.history.state:属性:…

Ajax无刷新提交表单和显示

ajax无刷新表单提交: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv…

Ajax技术(WEB无刷新提交数据)

(转自:http://www.jb51.net/article/291.htm) Ajax内部交流文档一.使用Ajax的主要原因 1.通过适当的Ajax应用达到更好的用户体验: 2.把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的. 二.引用 Ajax这个概念的最早提出者Jesse James Garrett认为: Ajax是Asynchronous JavaScript and XML的缩写. Aja…

页面被iframe与无刷新更换url方法

页面被iframe问题解决方法 if (window.top.location !== window.self.location) { const data = JSON.stringify({ iframedRedirectSuccess: true }); window.top.location.href = addURLParam(window.self.location.href, 'data', data); } 页面初始化获取参数 import URL from 'url-parse…

js无刷新提交表单

$("#form1").attr("target", "frameFile"); $("#form1").submit(); <iframe id='frameFile' name='frameFile' style='display: none;'></iframe> 将表单提交目标指向隐藏的iframe,用iframe代替form提交…

【前端学习笔记】利用iframe实现表单的无刷新提交案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <iframe name="formsubmit" id="myFrame" style="display: no…

form表单无刷新提交文件（iframe）

先看一段代码(PHP例子) 1.表单代码(form.html): <iframe name="testIframeName" style="display:none;"></iframe> <form target="testIframeName" method="post" action="formAction.php"> <input type="te…

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

iframe提交表单其实比ajax要方便一些,当然ajax也有ajax的好处,只是ajax编码处理有时有些麻烦,虽然经过转码是可以解决中文问题,但如果直接使用iframe不存这些问题了,下面来看看. 最近在做一个项目,用到上传图片功能,发现ajax不能enctype=”multipart/form-data” 属性的表单,没办法,只能使用form表单直接提交的方法了,但是form表单直接提交会跳转页面,这样很不友好,也不是项目需求,于是上网搜索了一番,发现可以使用隐藏的iframe来实现. 具体…

.net MVC借助Iframe实现无刷新上传文件

html: <div id="uploadwindow" style="display: none;"> <form action="/ShopActivitys/ImportActivityItems" id="form1" name="form1" enctype="multipart/form-data" method="post" targe…

打造颠覆你想象中的高性能，轻量级的webform框架---无刷新提交后台并返回参数（第五天）

问题5: 使用aspx 页面执行后台方法,总是要刷新整个页面?我想提交后台不刷新页面,同时返回参数执行前台的js 脚本,就是说类似于像 ajax 的效果一样,那我们该怎么做呢? 大家是否已经看了前面的文章,下面我们来总结一下如何去实现? 首先我们要知道 ,我们的aspx 页面默认情况下执行后台是通过 form1 表单提交到后台的,而我们前面 <from> 标签中,有一个属性叫做 target的属性,系统默认情况下是"-self",就是说返回的数据是指向自己的,…

form表单无刷新提交

Ajax最大的特点就是可以不刷新页面而实现数据的通信及更改页面信息.那么用AJAX进行后台通信传递字符串还是可以的,遇到上传文件该怎么办呢?基于安全考虑,JS是不能直接进行文件操作的,只好用原始的from来提交文件上传了.这样一来,用form不就要刷新页面了吗?其实也不是. 给我们的from加一个target属性,并且将这个属性的值设置为隐藏的iframe的ID,这样一来,刷新的页面是我们隐藏的iframe,我们的页面就不会刷新了.这个方法,时广大前辈的知识和经验的结晶,我是不费吹灰之力拿来用了…