演示地址:https://liyu365.github.io/BG-UI/
項(xiàng)目地址:https://github.com/liyu365/BG-UI
2.目錄結(jié)構(gòu)
public
┗css
┠vendor //存放第三方css文件
┗basic.css //基礎(chǔ)css
┗images
┗js
┠vendor //存放第三方j(luò)s文件
┠ajaxForm.js //所有ajax提交都由ajaxForm.js進(jìn)行包裝(非第三方插件,為作者編寫)
┗basic.js //基礎(chǔ)js
tpl
┠... //存放演示頁(yè)面,目錄結(jié)構(gòu)隨意
┠...
┗index.html //主頁(yè)面
server //存放測(cè)試用服務(wù)器腳本
index.html //入口(登錄頁(yè)面)
3.配置
在主頁(yè)面加載basic.js文件之前定義:
window.common_conf = {
defaultHash: 'page/desktop.html', //hash的缺省值
baseURL: './', //見(jiàn)下文"路由"
navJSON: '../server/nav.json' //導(dǎo)航菜單的json數(shù)據(jù),具體格式可以查看nav.json文件
};
4.路由
實(shí)現(xiàn)方式:監(jiān)聽(tīng)hashChange事件,利用"common_conf.baseURL" + "當(dāng)前頁(yè)面的hash"
形成請(qǐng)求地址,并用ajax請(qǐng)求服務(wù)器來(lái)獲取需要顯示的html。
5.表單的提交、驗(yàn)證、回調(diào)
5.1基本用法
只要頁(yè)面中的<form>
標(biāo)簽中包含class為.J_ajaxSubmitBtn
的元素,則此表單均受ajaxForm.js(非第三方插件,為作者編寫)控制。 當(dāng).J_ajaxSubmitBtn
元素被點(diǎn)擊后,ajaxForm.js會(huì)自動(dòng)收集<form>
標(biāo)簽上的屬性值,并形成一次ajax提交,例如:
<form
method="get"
action="../server/ajaxReturn.json"
data-validate="validate1"
data-callBack="callback1"
data-useDefaultCallBack="on"
data-sendingText="提交中"
>
<input type="text" placeholder="新聞標(biāo)題" name="title">
<button type="button" class="btn btn-primary J_ajaxSubmitBtn">查詢</button>
</form>
<script>
function validate1($from) {
var title = $from.find('input[name="title"]');
if ($.trim(title.val()) == '') {
return '新聞標(biāo)題不能為空';
}
return true;
}
function callback1(returnData, $from) {
console.log($from);
}
</script>
-
method
:提交方式(必須設(shè)置) -
action
:提交地址(必須設(shè)置) -
data-validate
:提交之前的驗(yàn)證函數(shù)名 -
data-callBack
:服務(wù)器響應(yīng)后的自定義回調(diào)函數(shù)名 -
data-useDefaultCallBack
:服務(wù)器響應(yīng)后是否執(zhí)行框架的默認(rèn)動(dòng)作。只要值不為'off'都會(huì)調(diào)用。 -
data-sendingText
:提交過(guò)程中.J_ajaxSubmitBtn
的提示文字
5.2默認(rèn)動(dòng)作
前面的data-useDefaultCallBack
配置項(xiàng)已經(jīng)提到了,瀏覽器接到響應(yīng)后ajaxForm.js會(huì)執(zhí)行一些默認(rèn)的動(dòng)作。 執(zhí)行的默認(rèn)動(dòng)作由服務(wù)器返回的json進(jìn)行定義:
{
"referer": "",
"refresh": true,
"state": "success",
"message": "提交成功"
}
-
referer
:刷新的目標(biāo)地址,留空則表示刷新當(dāng)前頁(yè) -
refresh
:true|false
是否刷新 -
state
:提交是否成功,只有當(dāng)值為"success"時(shí)才視為成功(才會(huì)判斷是否執(zhí)行刷新操作) -
message
:提示信息,state不為"success"時(shí)會(huì)進(jìn)行提示
注意這里的
referer
的值為將要顯示的頁(yè)面對(duì)應(yīng)的hash。如果提供的referer
以http或https開頭,則整個(gè)控制臺(tái)都會(huì)被刷新
5.3驗(yàn)證
<form>
標(biāo)簽中的data-validate
用來(lái)配置驗(yàn)證函數(shù)名,此驗(yàn)證函數(shù)在進(jìn)行ajax提交前會(huì)接收到被jQuery封裝的form DOM對(duì)象(具體可查看"5.1基本用法"中的代碼示例)。 自定義函數(shù)返回true
則正常提交;可以返回字符串來(lái)對(duì)錯(cuò)誤信息進(jìn)行提示,錯(cuò)誤的提示方式已經(jīng)在框架中進(jìn)行了封裝。