提供一種方法就是利用jquery.form.js。
（1）這個框架集合form提交、驗證、上傳的功能。
核心方法 -- ajaxForm() 和 ajaxSubmit()
$('#myForm').ajaxForm(function() {
alert("提交成功！歡迎下次再來！");
});
$('#myForm2').submit(function() {
$(this).ajaxSubmit(function() {
alert("提交成功！歡迎下次再來！");
});
return false; //阻止表單默認提交
});
ajaxForm() 和 ajaxSubmit() 都能接受0個或1個參數，當為單個參數時，該參數既可以是一個回調函數，也可以是一個options對象，上面的例子就是回調函數，
下面是options對象
代碼如下：
第一步：引用js
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
第二步：頁面寫form
<input type="text" id="text1">
<input type="text" id="text2">
<input type="text" id="text3">
<form method="post" enctype="multipart/form-data" id="formSubmit">
<div class="wrapBox">
<div class="fileBox clearfix">
<span class="pull-left">上傳文件:</span>
<input type="file" class="pull-left" id="loadFile" name="uploadFile">
</div>
</div>
<div class="wrapSubmitBox clearfix">
<input type="button" id="submitBtn" value="提交">
<input type="hidden" id="ajaxParam" name="ajaxParam">
</div>
</form>
//上傳文件的input 和提交按鈕要寫在form里面。<input type="hidden" id="ajaxParam" name="ajaxParam">是存儲$(“#text1”),$(“#text2”),$(“#text3”)需要傳給后台的數據。
//也可以寫在form里面。不需要hidden.用最下面options里的data的方式傳參。
第三步：寫js調用jquery.form.js，對form表單進行ajax提交 :
$("#formSubmit").click(function(){
var valtext1=$("#text1").val();
var valtext2=$("#text2").val();
var valtext3=$("#text3").val();
uploadJsonData="{'text1':"+valtext1+",'text2':"+valtext2+",'valtext3':"+valtext3+"}";
$("#ajaxParam").val(uploadJsonData);
$("#formSubmit");
var options = {
url:'上傳地址',
type:'post',
beforeSubmit: showRequest,
success:function(data){
if(data.success==1){
alert('上傳成功')
}
},
error:function(){
}
};
$("#formSubmit");.ajaxSubmit(options);
});
（2）options對象內的值有哪些？
var options = {
target: '#output', //把服務器返回的內容放入id為output的元素中
data:{param1:"自己的額外的參數"}, //這個參數是指通過ajax來提交給服務器，提交除了form內部input的參數，在后台中使用String param1=req.getParameter("param1");獲取。
beforeSubmit: showRequest, //提交前的回調函數
success: showResponse, //提交后的回調函數
url: url, //默認是form的action， 如果申明，則會覆蓋action
type: type, //默認是默認是自己在form標簽上指定的method（get or post），如果申明，則會覆蓋,如果沒有指定，則使用get。
dataType: null, //html(默認), xml, script, json...接受服務端返回的類型,這個參數值的是服務器返回的數據類型，默認的是null也就是服務器可以默認返回字符串，然后將這些字符串放在target內部，當然還有json、xml，其中最常用的便是null和json
clearForm: true, //成功提交后，清除所有表單元素的值
resetForm: true, //成功提交后，重置所有表單元素的值
timeout: 3000 //限制請求的時間，當請求大於3秒后，跳出請求
}
showRequest有三個參數formData, jqForm, options
function showRequest(formData, jqForm, options){
//formData: 數組對象，提交表單時，Form插件會以Ajax方式自動提交這些數據，格式如：[{name:user,value:val },{name:pwd,value:pwd}]
//jqForm: jQuery對象，封裝了表單的元素
//options: options對象
var queryString = $.param(formData); //name=1&address=2
var formElement = jqForm[0]; //將jqForm轉換為DOM對象
var address = formElement.address.value; //訪問jqForm的DOM元素
return true; //只要不返回false，表單都會提交,在這里可以對表單元素進行驗證
};