一硼莽、jquery.form.js下載地址
二庶溶、jquery.form.js使用方法如下:
| 函數(shù)名 | 描述 | 參數(shù) | 例子 |
|---|---|---|---|
| ajaxForm() | 增加所有需要的事件監(jiān)聽器，為ajax提交表單做準(zhǔn)備。ajaxForm并不能提交表單偏螺。在document的ready函數(shù)中行疏，使用ajaxForm來為ajax提交表單進行準(zhǔn)備。 | 單進行準(zhǔn)備套像。接受0個或1個參數(shù)酿联。參數(shù)可以是一個回調(diào)函數(shù)，也可以是一個Options對象夺巩。 | $("#formid").ajaxForm(); |
| ajaxSubmit() | 使用ajax提交表單贞让。 | 接受0個或1個參數(shù)。參數(shù)可以是一個回調(diào)函數(shù)柳譬，也可以是一個Options對象喳张。 | $("#formid").ajaxSubmit(); |
| formSerialize() | 將表單串行化(或序列化)為一個查詢字符串。這個方法將返回以下格式的字符串：name1=value1&name2=value2征绎。 | 無 | $("#formid").formSerialize(); |
| fieldSerialize() | 將表單的字段元素串行化(或序列化)為一個查詢字符串蹲姐。當(dāng)只有部分表單字段需要進行串行化（或序列化）時，使用這個就很方便了人柿。 返回以下格式的字符串：name=value1&name2=value2。 | 無 | $("#formid").formSerialize(); |
| fieldValue() | 返回匹配插入數(shù)組中的表單元素值忙厌。該方法以數(shù)組的形式返回數(shù)據(jù)凫岖。如果元素值被判定可能無效，則數(shù)組為空逢净。 | 無 | $("#formid: password").fieldValue(); |
| resetForm() | 將表單恢復(fù)到初始狀態(tài)哥放。 | 無 | $("#formid").resetForm(); |
| clearForm() | 清除表單元素。該方法將所有的text爹土、password甥雕、textarea置空，清除select元素中的選定胀茵，以及所有radio按鈕和checkbox按鈕重置為非選定狀態(tài)社露。 | 無 | $("#formid").clearForm(); |
| clearFields() | 清除字段元素。只有部分表單元素需要清除時方便使用琼娘。 | 無 | $("#formid .specialFields").clearFields(); |
三峭弟、options對象參數(shù)：
| 參數(shù) | 描述 | 默認(rèn)值 |
|---|---|---|
| target | 指明頁面中由服務(wù)器響應(yīng)進行更新的元素。元素的值可能被指定為一個 jQuery選擇器字>符串脱拼、一個jquery對象瞒瘸、一個DOM元素。 |
默認(rèn)值：null |
| url | 指定提交表單數(shù)據(jù)的URL熄浓。 | 默認(rèn)值：表單的action屬性值 |
| type | 指定提交表單數(shù)據(jù)的方法(method)："GET"或"POST"情臭。 | 默認(rèn)值：GET |
| beforeSubmit | 表單提交前被調(diào)用的回調(diào)函數(shù)。如果回調(diào)函數(shù)返回false表單將不被提 交「┰冢回調(diào)函數(shù)帶三個調(diào)用參數(shù)：數(shù)組形式的表單數(shù)據(jù)竟秫，jQuery表單對 象，以及傳入ajaxForm/ajaxSubmit中的Options對象朝巫。 |
默認(rèn)值：null |
| success | 表單成功提交后調(diào)用的回調(diào)函數(shù)鸿摇。然后dataType選項值決定傳回 responseText還是responseXML的值。 |
默認(rèn)值：null |
| dataType | 返回的數(shù)據(jù)類型：null劈猿、"xml"拙吉、"script"、"json"其中之一揪荣。 | 默認(rèn)值：null |
| resetForm | 表示如果表單提交成功是否進行重置筷黔。 | 默認(rèn)值：null |
| clearForm | 表示如果表單提交成功是否清除表單數(shù)據(jù)。 | 默認(rèn)值：null |
四仗颈、例子如下：
demo.html代碼如下：
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>ajax表單處理</title>
</head>
<body>
上傳圖片：<input type="file" name="banner" id="banner"/>
預(yù)覽圖片：<img src="" id="banner_see">
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
$('#banner').on('change', function () {
if ($("#mbanner").length > 0) {
} else {
$("#banner").wrap("<form id='mbanner' action='demo.php' method='post' xenctype='multipart/form-data'></form>");
}
/*ajax提交*/
$("#mbanner").ajaxSubmit({
dataType: 'json',
beforeSend: function () {
},
uploadProgress: function (event, position, total, percentComplete) {
},
success: function (data) {
if (data.result == 'true') {
$('#banner_see').attr('src',data.img);
} else {
$('#banner').val("");
}
},
error: function (xhr) {
}
});
});
</script>
demo.php代碼如下：
<?php
if (file_exists("./" . $_FILES["banner"]["name"]))
{
$arrRet=array(
'result'=>'false'
);
}
else
{
$ret=move_uploaded_file($_FILES["banner"]["tmp_name"],"./" . $_FILES["banner"]["name"]);
if($ret){
$arrRet=array(
'result'=>'true',
'img'=> $_FILES["banner"]["name"]
);
}else{
$arrRet=array(
'result'=>'false'
);
}
}
echo json_encode($arrRet);
?>
結(jié)果如下圖：
