DWZ框架常見問題及解決

2018-11-17 15:41 更新

DWZ中如何整合第三方jQuery插件

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版本升級。

第三方jQuery插件注冊示例:

DWZ.regPlugins.push(function($p){
// $p 是作用域, jQuery選擇器從$p這個父容器中選擇,如果沒寫會引起第三方插件被重復初始化問題
$("img.lazy",  $p).lazyload({effect : "fadeIn"});
 
// $("xxxSeletor",  $p).xxxPlugin();
});

Error loading XML document:dwz.frag.xml

直接用IE打開index.html彈出一個對話框:Error loading XML document: dwz.frag.xml

原因:dwz.frag.xml是一個核心文件,需要加載才可以正常使用。IE ajax laod本地文件有限制, 是ie安全級別的問題, 不是框架的問題.

解決方法:放到apache或iis下就可以了. 如果不想安裝apache或iis用firefox打開就正常了。

IIS不能用Ajax訪問*.html后綴的頁面

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沖突,解決方法

如果多個navTab頁面或dialog頁面有相同的ID,假設這個ID為:xxxId

$("#xxxId",navTab.getCurrentPanel());               //獲取當前navTab中的xxxId

$("#xxxId",$.pdialog.getCurrent());              // 獲取當前dialog中的xxxId

jQuery1.4.2和jquery.validate.js在IE的兼容問題

jQuery1.4.2和jquery.validate.js在IE有兼容問題,ajax表單提交在IE不能觸發(fā)formonsubmit事件。

導致form提交后跳轉到了一個白頁面。

升級jQuery1.4.2注意事項

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問題

weblogic訪問xml文件,需要在web.xml中加入下面的聲明

 <mime-mapping>

 <extension>xml</extension>

 <mime-type>text/xml</mime-type>

 </mime-mapping>

這時再次訪問時weblgoic就給加上contentType了

如何自定義DWZ分頁參數(shù)參數(shù)

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>

如何關閉loading

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 事件。

DWZ局部刷新怎樣做?

API調(diào)用方式:

$("#xxxId").loadUrl(url,data, callback);

html擴展鏈接方式:

<a href="url" target="ajax"rel="xxxId"></a>

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號