一、jquery.form.js下載地址
二、jquery.form.js使用方法如下:
| 函數(shù)名 | 描述 | 參數(shù) | 例子 |
|---|---|---|---|
| ajaxForm() | 增加所有需要的事件監(jiān)聽器，為ajax提交表單做準(zhǔn)備。ajaxForm并不能提交表單。在document的ready函數(shù)中，使用ajaxForm來為ajax提交表單進(jìn)行準(zhǔn)備。 | 單進(jìn)行準(zhǔn)備。接受0個(gè)或1個(gè)參數(shù)。參數(shù)可以是一個(gè)回調(diào)函數(shù)，也可以是一個(gè)Options對象。 | $("#formid").ajaxForm(); |
| ajaxSubmit() | 使用ajax提交表單。 | 接受0個(gè)或1個(gè)參數(shù)。參數(shù)可以是一個(gè)回調(diào)函數(shù)，也可以是一個(gè)Options對象。 | $("#formid").ajaxSubmit(); |
| formSerialize() | 將表單串行化(或序列化)為一個(gè)查詢字符串。這個(gè)方法將返回以下格式的字符串：name1=value1&name2=value2。 | 無 | $("#formid").formSerialize(); |
| fieldSerialize() | 將表單的字段元素串行化(或序列化)為一個(gè)查詢字符串。當(dāng)只有部分表單字段需要進(jìn)行串行化（或序列化）時(shí)，使用這個(gè)就很方便了。 返回以下格式的字符串：name=value1&name2=value2。 | 無 | $("#formid").formSerialize(); |
| fieldValue() | 返回匹配插入數(shù)組中的表單元素值。該方法以數(shù)組的形式返回?cái)?shù)據(jù)。如果元素值被判定可能無效，則數(shù)組為空。 | 無 | $("#formid: password").fieldValue(); |
| resetForm() | 將表單恢復(fù)到初始狀態(tài)。 | 無 | $("#formid").resetForm(); |
| clearForm() | 清除表單元素。該方法將所有的text、password、textarea置空，清除select元素中的選定，以及所有radio按鈕和checkbox按鈕重置為非選定狀態(tài)。 | 無 | $("#formid").clearForm(); |
| clearFields() | 清除字段元素。只有部分表單元素需要清除時(shí)方便使用。 | 無 | $("#formid .specialFields").clearFields(); |
三、options對象參數(shù)：
| 參數(shù) | 描述 | 默認(rèn)值 |
|---|---|---|
| target | 指明頁面中由服務(wù)器響應(yīng)進(jìn)行更新的元素。元素的值可能被指定為一個(gè) jQuery選擇器字>符串、一個(gè)jquery對象、一個(gè)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ù)帶三個(gè)調(diào)用參數(shù)：數(shù)組形式的表單數(shù)據(jù)，jQuery表單對 象，以及傳入ajaxForm/ajaxSubmit中的Options對象。 |
默認(rèn)值：null |
| success | 表單成功提交后調(diào)用的回調(diào)函數(shù)。然后dataType選項(xiàng)值決定傳回 responseText還是responseXML的值。 |
默認(rèn)值：null |
| dataType | 返回的數(shù)據(jù)類型：null、"xml"、"script"、"json"其中之一。 | 默認(rèn)值：null |
| resetForm | 表示如果表單提交成功是否進(jìn)行重置。 | 默認(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é)果如下圖：
