jQuery插件一般是$(document).ready()中初始化
$(document).ready(function(){
// 文檔就緒,初始化jQuery插件
});
//或者或縮寫形式
$(function(){
// 文檔就緒,初始化jQuery插件
});
因為DWZ RIA是富客戶端思路,第一次打開時加載界面到瀏覽器端,之后和服務器的交互是存數(shù)據(jù)交互,不占用界面相關的網(wǎng)絡流量。
也就是說,只需要在一個完整的頁面(通常是起始頁,如index.aspx/index.php/index.jsp等),只有這個頁面包含完整的html結構(<head><body>),<head>中引入全部css、js 。其它的頁面只需要頁面碎片,就是<body></body>中的部分。
因為ajax加載基本原理是:ajax加載一段html代碼片段放到當前頁面的某個容器中(通常是一個div)。當然也可以是xml結構、json結構,只是在插入到當前頁面之前也要轉化成html代碼片段。如果你ajax加載一個完整的頁面(就是包括<head><body>標簽的),插入的當前document就有問題了,因為一個document不可能有多個<head><body>標簽。
理解了富客戶端思路你也就明白了為什么DWZ框架中整合第三方jQuery插件不能在<head>中通過$(document).ready()初始化。
DWZ1.5.2之后版本初始化第三方jQuery插件方式:
V1.5.2版本調(diào)整DWZ插件注冊和初始化機制。方便DWZ和其它第三方jQuery插件整合,不需要修改dwz.ui.js源碼,可以按照DWZ插件注冊機制引入外部js。建議把第三方jQuery插件注冊相關代碼放到外部js文件中,方便以后DWZ版本升級。
DWZ.regPlugins.push(function($p){
// $p 是作用域, jQuery選擇器從$p這個父容器中選擇,如果沒寫會引起第三方插件被重復初始化問題
$("img.lazy", $p).lazyload({effect : "fadeIn"});
// $("xxxSeletor", $p).xxxPlugin();
});
直接用IE打開index.html彈出一個對話框:Error loading XML document: dwz.frag.xml
原因:dwz.frag.xml是一個核心文件,需要加載才可以正常使用。IE ajax laod本地文件有限制, 是ie安全級別的問題, 不是框架的問題.
解決方法:放到apache或iis下就可以了. 如果不想安裝apache或iis用firefox打開就正常了。
Ajax訪問*.html后綴的頁面在Apache很好的工作,但在IIS不行,IIS下firebug調(diào)試報錯ajax 405Method Not Allowed。
Http405原因是IIS不允許ajax post方式訪問*.html后綴的頁。
IIS在使用Ajax post方式請求頁面時,一定要動態(tài)網(wǎng)頁后綴的或者用改用get方式!這是IIS的問題,不是框架bug。
也可以試試修改IIS配置,添加擴展名(.html)的腳本映射。
如果多個navTab頁面或dialog頁面有相同的ID,假設這個ID為:xxxId
$("#xxxId",navTab.getCurrentPanel()); //獲取當前navTab中的xxxId
$("#xxxId",$.pdialog.getCurrent()); // 獲取當前dialog中的xxxId
jQuery1.4.2和jquery.validate.js在IE有兼容問題,ajax表單提交在IE不能觸發(fā)formonsubmit事件。
導致form提交后跳轉到了一個白頁面。
jQuery1.4.2對json要求非常嚴格key、value都要用引號抱起來,否則就無法解析。jQuery1.3.2以前版本沒有這種限制。
{"statusCode":"200","message":"操作成功"}
$.ajax()發(fā)送ajax請求成功后調(diào)用success方法,success根據(jù)dataType來解析返回的內(nèi)容httpData()。
分析jQuery1.4.2源碼發(fā)現(xiàn)dataType=”json”的處理方式完全不一樣了。1.3.2之前版本是用window.eval()來解析JSON結構,1.4.2版本添加了paseJSON()方法來解析。
估計是window.eval()存在安全漏洞,1.4.2版本進行了改進,對JSON格式也要求更嚴格了。
ECMAScript 5發(fā)布有段時間了,其中就包括了解析JSON的原生API-JSON.parse。許多瀏覽器已經(jīng)支持了。
主流js庫如JQuery,Ext,Prototype都優(yōu)先使用JSON.parse,不支持該方法的瀏覽器則使用newFunction或eval。
為何優(yōu)先使用JSON.parse,我想一個就是性能,原生的總是要快一些吧。此外JSON.parse較eval也更安全。
這里也當然不能落后了,優(yōu)先使用JSON.parse,不行再用newFunction方式。最后失敗了會給failure的第二個參數(shù)msg賦值為"parsejson error"
parseJSON: function( data ) {
if ( typeof data !== "string"|| !data ) {
return null;
}
data = jQuery.trim( data );
if ( /^[\],:{}\s]*$/.test(data.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, "@")
.replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, "]")
.replace(/(?:^|:|,)(?:\s*\[)+/g, "")) ) {
return window.JSON && window.JSON.parse ?
window.JSON.parse( data ) :
(new Function("return " +data))();
} else {
jQuery.error( "Invalid JSON: " + data );
}
}
weblogic訪問xml文件,需要在web.xml中加入下面的聲明
<mime-mapping>
<extension>xml</extension>
<mime-type>text/xml</mime-type>
</mime-mapping>
這時再次訪問時weblgoic就給加上contentType了
pagerForm默認使用的當前頁參數(shù)是pageNum, 每頁顯示條數(shù)numPerPage,查詢排序字段名orderField, 升序降序orderDirection, 更改其它參數(shù)需要設置DWZ.init(pageFrag,options)的options[“pageInfo”]:
<form id="pagerForm" action="xxx" method="post">
<input type="hidden" name="pageNum"value="1" />/><!--【必須】value=1可以寫死-->
<input type="hidden" name="numPerPage"value="20" /><!--【可選】每頁顯示多少條-->
<input type="hidden" name="orderField"value="xxx" /><!--【可選】查詢排序字段-->
<input type="hidden" name="orderDirection" value="asc|desc" />/><!--【可選】升序|降序-->
</form>
<script type="text/javascript">
$(function(){
DWZ.init("dwz.frag.xml",{
loginUrl:"login.html", // 跳到登錄頁面
statusCode:{ok:200, error:300, timeout:301}, //【可選】
pageInfo:{pageNum:"pageNum", numPerPage:"numPerPage",orderField:"orderField",orderDirection:"orderDirection"}, //【可選,這里自定義分頁參數(shù)】
debug:false, // 調(diào)試模式 【true|false】
callback:function(){
initEnv();
$("#themeList").theme({themeBase:"themes"});
}
});
});
</script>
dwz的ajax方法每次調(diào)用都會出現(xiàn)讀取數(shù)據(jù)的loading,怎么修改可選的?我自己寫了一個局部更新的ajax函數(shù),結果loading太煩人怎么關掉好?
dwz.ui.js中注冊了ajax全局事件:
var ajaxbg = $("#background,#progressBar");
ajaxbg.hide();
$(document).ajaxStart(function(){
ajaxbg.show();
}).ajaxStop(function(){
ajaxbg.hide();
});
$.ajax() 有個參數(shù)global (Boolean) : (默認: true) 是否觸發(fā)全局 AJAX 事件.設置為 false 將不會觸發(fā)全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。
API調(diào)用方式:
$("#xxxId").loadUrl(url,data, callback);
html擴展鏈接方式:
<a href="url" target="ajax"rel="xxxId"></a>
更多建議: