ajax刷新iframe页面,通过iframe实现简单的ajax表单提交
之前做项目都是用现成的jquery插件实现表单的校验以及ajax提交,但是今天有个简单的头像图片ajax上传,以及一个很简单的表单提交,实在不想引入一个插件了,本着代码量最小,最简单的原则,照着豆瓣照抄了一个,基于jquery搞的一个简单的基于iframe的ajax表单提交功能,也就是通过隐藏的iframe上传图片的功能。原理很简单,就是在iframe里处理提交的表单的返回值,并且做出相应处理,从而实现页面无刷新的ajax上传图片效果。
简单代码如下:
html代码:
显示的图片选择代码:
头像
隐藏的表单代码:
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插件,页面少加载一点也是好的嘛~
ajax刷新iframe页面,通过iframe实现简单的ajax表单提交相关推荐
- html页面关闭前提示信息,【转】表单提交及关闭当前页面并刷新数据
在DWZ文档中,对于DWZ框架Ajax无刷新表单提交处理流程描述如下: 1. ajax表单提交给服务器 2. 服务器返回一个固定格式json结构 3. js会调函数 ...
- form 表单提交时用ajax异步请求导致ajax请求结果无法接收问题
1.背景描述,有个公司内部用的小系统,不想大动干戈用太多前端框架,就用HTML5写了个登陆页面,刚开始想着用form表单提交登陆账户信息.后来因为前后端分离,并且统一用ajax调用后台服务交互数据,因 ...
- 不使用Ajax,如何实现表单提交不刷新页面
不使用Ajax,如何实现表单提交不刷新页面? 目前,我想到的是使用<iframe>,如果有其他的方式,后续再补. 举个栗子: 在表单上传文件的时候必须设置enctype="mul ...
- php提交后刷新父页面,jquery – php ajax表单提交没有刷新父页面
我有一些问题的ajax表单提交 $("#send").on("click", function() { $.ajax({ type: "POST&qu ...
- [html] From表单提交时为什么会刷新页面?怎么预防刷新?
[html] From表单提交时为什么会刷新页面?怎么预防刷新? 因为早期网页交互模型只能是浏览器提交数据给服务器,服务器做出响应重新返回一个页面,浏览器加载这个页面进行显示.早期前端没有编程式发送网 ...
- php阻止form提交表单提交,防止表单提交时刷新页面-阻止form表单的默认提交行为...
最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...
- Pjax无刷新跳转页面实现,支持超链接与表单提交
什么是pjax? 当你点击一个站内的链接的时候,不是做页面跳转,而是只是站内页面刷新.这样的用户体验,比起整个页面都闪一下来说, 好很多. 其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏 ...
- extjs FormPanel更改为普通表单提交,提交到iframe显示
BasicForm提交源代码: * @return {BasicForm} this */ submit : function(options){ options = options || {}; i ...
- form + iframe 获取表单提交后返回的数据
原理: submit 提交表单没有回调函数,但是可以用iframe来接收返回结果,最后进行格式转换就ok了: 原文地址: http://blog.csdn.net/simeng_1016/articl ...
最新文章
- Java开发工具简介
- Promise的实例用法
- AWGN和Rayleigh信道下QPSK的误码率分析
- mac终端mysql的字符集_mac下修改mysql默认字符集为utf8
- ZooKeeper管理员指南——部署与管理ZooKeeper
- jooq权限配置_将jOOQ与Spring结合使用:配置
- JMX和Spring –第1部分
- mini6410 uboot board.c 分析
- ios开发网络学习九:NSURLSessionDownloadTask实现大文件下载
- 最新软件库iAPP源码+整套独立后台/前端后端
- CodeBlocks汉化包
- linux设置ipsan_linux下ipsan的配置
- 激光雷达系统原理及相关介绍
- 计算机组装与维修论文摘要,计算机组装与维护—本科毕业设计论文摘要.doc
- main方法是java app_Appmain1.java
- adb install 命令参数
- javaee之spring3
- 股票分析及利用tushare查看股票部分信息
- 模板第一次总结--语法
- Django实用技巧--后台管理
热门文章
- request.getParameterMap的学习
- redis淘汰策略面试题_redis有哪些数据淘汰策略
- 内部收益率irr_国寿鑫耀东方年金险,内部收益率IRR测算
- classes maven 为空 打包_Maven打包:将classes打成Jar,之后打到War中(或打成jar),过滤指定目录。...
- 元件原理图旋转45度_大口径大曲率半径光学元件的高精度检测
- Sklearn 损失函数如何应用到_机器学习大牛最常用的5个回归损失函数,你知道几个?...
- libcrypto yum 安装_YUM 安装 VSFTP出错
- 矩形做成翻页的效果html5,HTML5 在canvas中绘制矩形附效果图
- (已解决)登录火狐浏览器账号后没有同步数据--博主的奇妙寻号之旅
- 华清实训的收获(人工智能的小广告和福利)