ajax刷新iframe页面,通过iframe实现简单的ajax表单提交

之前做项目都是用现成的jquery插件实现表单的校验以及ajax提交,但是今天有个简单的头像图片ajax上传,以及一个很简单的表单提交,实在不想引入一个插件了,本着代码量最小,最简单的原则,照着豆瓣照抄了一个,基于jquery搞的一个简单的基于iframe的ajax表单提交功能,也就是通过隐藏的iframe上传图片的功能。原理很简单,就是在iframe里处理提交的表单的返回值,并且做出相应处理,从而实现页面无刷新的ajax上传图片效果。

简单代码如下:

html代码:

显示的图片选择代码:

头像

a8ca7db54f8fcf5d1082c9f1d03b51d1.png

隐藏的表单代码:

js相关代码:

$(function() {

$('#btn-avatar').bind('hover', function(e) {

$('#btn-avatar > i').toggle();

});

$('#btn-avatar').bind('click', function(e) {

e.preventDefault();

$('#picfile').trigger('click');

});

$('#picfile').bind('change', function(){

$('#edit-avatar').submit();

$('#picfile').val('');

});

$('#ifr-avatar').bind('load', function(e) {

var response = $("#ifr-avatar").contents().text();

if(response){

response = $.parseJSON(response);

if(response.r) {

alert('上传头像失败,请重试');

}else {

var pic_url = response.pic_url;

$('#btn-avatar').css('background-image','url('+pic_url+')');

}

}

});

});

看代码就能看出来,主要就是在form里通过target="ifr-avatar"指定了表单的action地址打开的地方,也就是本页面上的一个iframe,再通过jquery绑定了iframe的load事件,获取表单的后台处理返回值,再通过返回值判断图片的上传状态,从而实现ajax效果。

简单粗暴,省的引入一大堆的jquery插件,页面少加载一点也是好的嘛~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/245495.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java跟python对比_【多年的Java程序员总结Java与Python的对比 】

多年的Java程序员总结Java与Python的对比作为一个有多年职场经验的技术员,每当我遇到同行时,我都会问一句“你现在用的是什么语言?你喜欢用哪种语言?”至于答案,容后再说。但统计过后,以Java和Python为多&a…

rs485全双工中只接一组_RS485通讯的正确接线方式

RS485通讯的正确接线方式RS485理想用线为双绞线:半双工的两线最好用双绞线中的一对,这样两线双绞,加在两线上的干扰电平抵消实现抗干扰效果。全双工时接收两线用一对,发送两线用另一对。RS485没有功率传输要求,所以对线…

bat文件设置dns服务器,.bat文件设置IP、DNS

这几天遇到个烦心事,每次开机之后都要去手动去设置一下IP地址,一大串的数字还是有点麻烦,于是就想写个批处理文件设置IP注意:在DOS下设置IP时需要管理员权限运行1.查看机子设置IP需要用到的名字名字是Ethernet2.查看机子在DOS下设…

cv2 画多边形不填充_你不知道的4种方法:python方法绘制扇形

1 说明:1.1 是问答中的我的一个回答。1.1 因为问答中没有代码块的,所以我改为这里写文章,然后链接过去。1.2 4种方法:turtle法、OpenCV法、pygame法和matplotlib法。2 turtle法:2.1 代码:#第1步&#xff1a…

不同角色进入使用不同功能_如何在不同页面上使用不同的Joomla CSS

简介: 我们的一位用户希望其网站首页具有不同的背景。 Joomla确实提供了几种自定义单个页面的方法。本教程将向您介绍两个Joomla选项。让我们开始吧 ...我们的一位用户希望其网站首页具有不同的背景。 Joomla确实提供了几种自定义单个页面的方法。本教程将向您介绍两…

emc文件存储服务器,emc存储怎么挂在linux服务器上

emc存储怎么挂在linux服务器上 内容精选换一换安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具,将文件上传到云服务器。例如QQ.exe。在本地主机和Windows云服务器上分别安装数据传输工具,将文件上传到云服务器。例如QQ.exe。本地磁盘映射…

如何在excel中判断某一点在某一区域内_SEM优化师常用的Excel表格函数集合

在竞价优化中如何用最短时间又高效的完成工作呢?其实是有技巧的,今天给大家分享一篇能够帮助竞价员高效快速的完成工作的一些工具,如果感觉有用就赶快收藏吧!EXCEL使用技能1. 数据透视表▲ 功能:它是excel中的一项功能…

前后端分离session_前后端分离:基于JWT用户认证分析

作者:lion1ouhttps://lion1ou.win/2017/01/18/在前后端分离开发时为什么需要用户认证呢?原因是由于HTTP协定是不储存状态的(stateless),这意味着当我们透过帐号密码验证一个使用者时,当下一个request请求时它就把刚刚的资料忘了。…

我的世界服务器开启显示坐标的指令,我的世界坐标怎么看 坐标指令

在我的世界游戏中,坐标这个问题如果玩的很6的话能够帮助我们瞬间移动,去到任何想去的地方,这时有不少玩家不禁想问了,我的世界坐标怎么看,坐标指令又是什么呢?坐标(coordinates)在数字上反映了您在主世界中…

扑克牌图片一张一张_培养孩子的数学力,不妨试试这五个扑克牌游戏

宝宝的数学认知会随着年龄的增长而逐渐增强,3-4岁的宝宝能感知和区分物体的大小、多少等量方面的特点;4-5岁的宝宝能理解数与数之间的关系;5-6岁的宝宝能够理解加和减的实际意义,并进行10以内的加减运算。而扑克牌是家中常备的娱乐…

三十二楼层选几层最好_买房楼层怎么选?建筑学家建议:一栋楼不管几层,最好避开这3层...

对于很多人买房,可以说是一生最重要的事情之一。大部分人买房都可能和自己的家人居住一生,特别是现在房价那么高的情况下,买了房如果不如意的话,想再换房可就非常难了。特别是楼层的选择,很多人都不会选择楼层&#xf…

服务器文件相对路径,服务器文件的相对路径

服务器文件的相对路径 内容精选换一换编译构建服务提供了常用的构建模板(构建环境),不同的构建模板中预装了对应构建所需工具集,MSBuild构建镜像一般预装了msbuild、nuget、.NET Frameword等常用工具。使用msbuild构建工具执行引擎、构造工程&#xff0c…

每天九点十分开始每半小时一次执行一个cron_每天通勤4小时!西咸双城生活的上班族,不简单...

在西安,你每天上班路上花费多长时间?大多数人的答案可能都在一个小时之间。然而,在西安,有一群辗转于西安和咸阳两座城市的上班族,他们平均每天早上六点出门,晚上八点回家,在公交、地铁、电动车…

时间设置偏移秒_零偏移有源低通滤波器,第2部分

本系列文章分为4个部分,分别讨论了:使用Sallen-Key有源滤波器时应避免的陷阱、Sallen-Key低通滤波器所建议的补救措施、接近零偏移的Chebyshev低通滤波器,以及采纳网友建议所带来的不利后果。 本系列文章的第1部分解决了使用Sallen-Key有源滤…

线程与进程的区别_Java线程和PC进程的区别

进程和线程的区别进程:资源分配的基本单位,多存在于操作系统任务中线程:资源调度的基本单位,一般存在于某个程序中JVM主内存与工作内存间具体的交互A:作用范围主内存变量B:作用范围工作内存变量lock(锁定)A…

linux nand 坏块_Nand Flash 中的坏块(Bad Block)

Nand Flash 中,一个块中含有 1 个或多个位是坏的,就称为其为坏块 Bad Block。坏块的稳定性是无法保证的,也就是说,不能保证你写入的数据是对的,或者写入对了,读出来也不一定对的。与此对应的正常的块,肯定是写入读出都是正常的。坏块有两种:(1) 出厂时就有存在的坏块:一种是出厂…

生产管理erp系统源码_仁和ERP企业管理系统提高生产管理流程

传统的制造企业管理理念只会阻碍公司经营发展,在管理流程根本上去改变,还得从企业各部门管理思想的转变做基础,优化公司核心业务流程做标准,双向进行改革创新,将管理流程提升为企业的核心竞争力!这将是企业…

date oracle 显示毫秒_Oracle date timestamp 毫秒 - 时间函数总结

yyyy-mm-dd hh24:mi:ss.ff 年-月-日 时:分:秒.毫秒关于毫秒:Oracle 毫秒的存储必须字段类型为 timestamp(6) –数字表示存储的毫秒位数--当前毫秒级时间select to_char(current_timestamp,yyyy-mm-dd hh24:mi:ss.ff6) from dual;--字符串转为…

怎么把字符串变成数组_字符串哈希:从零开始的十分钟包会教程

大家吼啊!这是我下定决心写专栏以来的第二篇文章,请大家多多资瓷!!同样我们先以上次的话起头吧!恭喜你找到了这篇博客!虽然这个标题看起来非常像是nc营销号的标题但是!请相信我一次这是真的&…

body 没有被撑开_body没有高度设置背景色为什么可以全屏显示?

原标题:body没有高度设置背景色为什么可以全屏显示?--- 关于html和body的那些事还记得我们开发全屏页面或者是移动端页面时经常会设置一句话html, body { height: 100%; }是不是只知道用?却不知道怎么回事?原因是,当没…