式一：利用from表單的targer屬性 + 隱藏的iframe 達到類似效果， 支持提交含有文件和普通數據的複雜表單
方式二：使用jquery的
方式三：使用jquery插件ajaxFileUpload.js， 支持上傳文件，但不支持提交表單
方式四：使用jquery.from.js， 支持提交同時含有文件和普通數據的複雜表單
個人四種都用過, 更好喜歡第二種和第四種; 用第二種來解決ajax普通請求, 用第四種來解決文件上傳/表單提交; 不多說,上代碼
方式一: from + iframe
Test1.jsp：表單、iframe、提交表單
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>測試頁面1,創建表單、iframe、提交表單</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script type="text/javascript" src="..省略/jquery.1.8.2.min.js"></script>
<script>
$(function() { //值得注意的是iframe會維護瀏覽器的歷史,瀏覽器的後退/前進將根據ifream的訪問歷史來變化,而非主頁面
$("#btn").click(function() {
var value = $("#pic").val();
if (Utils.isEmpty(value)) {
alert("請選擇文件");
return false;
}
if (!value.match(/.jpg|.jpeg|.gif|.png|.bmp/i)) {
alert("文件格式錯誤");
return false;
}
$("#form0").submit();
});
});
</script>
</head>
<body>
<form id="form0" method="post" action="..省略/uploadOrgPic.html"
enctype="multipart/form-data" target="hiddenFrame">
上傳頭像: <input type="file" name="imageVo.image" id="pic" /> <input
type="button" value="提交" id="btn" />
</form>
<div id="result"></div>
<iframe src="about:bland;" id="hiddenFrame" name="hiddenFrame"
style="display: none;" frameborder="0"></iframe>
</body>
</html>Test2.jsp：後臺處理完成後的跳轉頁面 (後臺處理代碼此處就不貼了, 上傳文件相信大家都會的)
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>測試頁面2，處理結果、返回父頁面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script>
window.onload = function() { //檢查是否存在父窗口
if (window.parent != window) {
var resultDiv = window.parent.document.getElementById("result");
resultDiv.innerHTML = '因爲是測試,所以簡單的來這麼一句話';
}
}
</script>
</head>
<body>
</body>
</html>方式二:$.ajax({..})
值得注意的是: serialize() 可通過序列化表單值,創建URL編碼文本字符串,但不支持文件上傳的表單
<script>
$.ajax({
url : 你要請求的url鏈接, //默認爲當前頁面url
aysnc : true, //是否異步,默認true
cache : true, //使用緩存,默認true
type : "POST", //請求方式,默認Get
dataType : 'JSON', //預期服務器返回的數據類型 (若不指定jquery將根據HTTP包MIME信息來判斷)
headers : {
'ClientCallMode' : 'ajax'
}, //添加頭部,也可通過beforeSend函數添加
data : $('#formid').serialize(), //要發送的數據,將自動轉換爲請求字符串格式。 此處爲表單序列化後生成的字符串
success : function(data) { //執行成功的回調函數
alert("success");
},
error : function(request) { //執行錯誤的回調函數(包含三個參數:XMLHttrRequest、錯誤信息、捕獲的異常對象)
alert("error");
}
});
</script>方式三:使用jquery插件ajaxFileUpload.js，該方式提交時無需表單, 也提交不了表單, 只用於文件上傳
若在文件上傳同時還要傳遞其它的參數,通過設置data屬性即可實現; 但如果需要的參數過多, 則不建議使用這種方式, 個人更傾向於方式四
<script>
$("#uploadFile").click(function() {
var value = $("#imageInput").val();
if (Utils.isEmpty(value)) {
alert("請選擇文件");
return false;
}
if (!value.match(/.jpg|.jpeg|.gif|.png|.bmp/i)) {
alert("文件格式錯誤");
return false;
}
$.ajaxFileUpload({
url : 'url',
secureuri : false, //是否啓用安全提交,默認false
dataType : 'JSON', //預期服務器返回的數據類型
fileElementId : 'imageInput', //文件域id值
data : {
'name' : 'abc'
}, //其它參數
success : function(data, status) {
alert(data);
},
error : function(data, status, _exception) {
alert(_exception);
}
});
});
</script>方式四：jquery.form.js
<script>
function ajaxSubmitForm() {
var value = $("#pic").val();
if (Utils.isEmpty(value)) {
alert("請先選擇文件");
return false;
}
if (!value.match(/.jpg|.jpeg|.gif|.png|.bmp/i)) {
alert("文件格式錯誤");
return false;
}
var option = {
url : '..省略/uploadOrgPic.ac',
type : 'POST',
dataType : 'json',
headers : {
"ClientCallMode" : "ajax"
}, //添加請求頭部
success : function(data) {
alert(JSON.stringify(data));
},
error : function(data) {
alert(JSON.stringify(data) + "--上傳失敗,請刷新後重試");
}
};
$("#form0").ajaxSubmit(option);
return false; //最好返回false，因爲如果按鈕類型是submit,則表單自己又會提交一次;返回false阻止表單再次提交
}
</script>
