通过iframe实现简单的ajax表单提交

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

简单代码如下：

html代码：

显示的图片选择代码：

<div class="control-group control-item-avatar">
        <label>头像</label>
        <div class="control-item">
            <div class="people-avatar">
                <a href="javascript:void(0);" class="avatar" style="background-image: url(${nowUser.avatarUrl?default('${ctx}/static/images/noavatar.png')})" id="btn-avatar"> 
                <i style="display: none;"></i>
                </a>
            </div>
        </div>
    </div>

隐藏的表单代码：

<div class="hidden">
<form action="${ctx}/user/profile/avatarUp" method="post" id="edit-avatar" target="ifr-avatar" enctype="multipart/form-data">
   <input id="picfile" type="file" name="picfile" />
   <input type="hidden" name="icon_submit" value="True"/>
</form>
<iframe id="ifr-avatar" name="ifr-avatar">
</iframe>
</div>

js相关代码：

<script type="text/javascript">
$(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+')');
        }
      }
    });
  });
</script>

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

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