之前做項目都是用現成的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表单提交的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。