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插件,页面少加载一点也是好的嘛~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值