一、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é)果如下圖: