<form action="/hehe" method="post">
<input type="text" value="hehe"/>
<input type="submit" value="upload" id="upload"/>
</form>
這是html中最常見最簡單的表單提交方式,但是這種方式必須會切換頁面,也許有些時(shí)候我們希望可以在同一個頁面與服務(wù)器進(jìn)行交互,并不希望提交完表單后切換到另一個頁面去,怎么辦呢,這里分享幾種表單提交的方式。
首先介紹一種曲線救國的解法,以上的代碼片段不用改變,只要添加以下代碼
<iframe id="uploadFrame" name="uploadFrame"></iframe>
并且在form表單中添加target屬性,target=uploadFrame,target屬性需要與iframe中的id的值一致(或者是name屬性的值,試一試就知道了)。
簡單解釋一下,其實(shí)這里我們的表單提交之后也是刷新了,但是為什么沒有跳轉(zhuǎn)頁面呢,就是因?yàn)檫@個iframe,其實(shí)我們刷新在iframe中了,而iframe是空的,也就跟沒有刷新是一樣的了,就給我們一種異步的感覺,這并不是正統(tǒng)的方法,但是也不失為一種曲線救國方式,當(dāng)然很多情況下這種方式也不適用,比如我們希望提交完成表單后從服務(wù)器取回點(diǎn)什么東西,這種方法顯然就不行了,這里我們還需要真正的異步提交表當(dāng)。
(二)jquery異步提交表單
這里介紹的是jquery的一種提交表單的插件ajaxupload,使用方式也是比較簡單的
<body>
<form action="/hehe" method="post">
<input type="text" value="hehe"/>
<input type="button" value="upload" id="upload"/>
<!--<input type="button" value="send" onclick="send()"/>-->
</form>
<script>
(function(){
new AjaxUpload("#upload", {
action: '/hehe',
type:"post",
data: {},
name: 'textfield',
onSubmit: function(file, ext) {
alert("上傳成功");
},
onComplete: function(file, response) {
}
});
})();
</script>
</body>
這里貼出了主要的代碼,在頁面渲染完成之后,我們就使用一個自執(zhí)行的函數(shù)給id為upload的按鈕添加異步上傳事件,new AjaxUpload(id,object)中的id對應(yīng)的就是綁定對象的id,至于第二個參數(shù)中介紹一下data是附加的數(shù)據(jù),name可以隨意,onSubmit函數(shù)是上傳文件之前的回調(diào)函數(shù),第一個參數(shù)file是文件名,ext是文件的后綴名,至于onComplete函數(shù)中可以處理服務(wù)器返回的數(shù)據(jù)。以上是兩種簡單的文件上傳客戶端的實(shí)現(xiàn)。