反饋已提交

網絡繁忙

FR.ajax

版本

報表伺服器版本功能變動
11.0.7

補充 FVS 視覺化看板相關API說明

適用於安裝了「FineVis資料視覺化」插件 V1.8.0 及之後版本的使用者

11.0-

ajax 是一種與伺服器交換資料的技術,可以在不重新載入整個頁面的情況下更新網頁的一部分。

FR.ajax 是封裝過的 jQuery.ajax() 函式,在報表中對特定網頁進行 ajax 請求, data 參數做了中日韓文編碼處理。

參數說明

options 是 ajax 參數,如下表說明:

參數類型說明
optionsObject必填,ajax參數

[options]以 json 格式提供,屬性如下表所示:

屬性類型說明
urlString必填,傳送請求的地址
dataObject選填,傳送到伺服器的資料。GET 請求中將自動轉換為請求字串格式,附加在 URL 後。

值必須是 Key/Value 格式,可以是字串如 p1=pavalue&p2=p2value,或者是物件如 {p1:p1value,p2:p2value}

typeString選填,請求方式 POST/GET ,預設為 GET
dataTypeString

選填,預期伺服器傳回的資料類型。如果不指定,將自動根據 HTTP 包 MIME 資訊來智慧判斷。可用值有:

注:行動端不支援 "xml"、"html"、"script"

"xml":傳回 XML 文檔 
"html":傳回純正文 HTML 資訊;包含的 script 標籤會在插入 dom 時執行。
"script":傳回純文字 JavaScript程式碼。
"json":傳回 JSON 資料。
"text":傳回純文字字串。
"jsonp" : 跨域採用 jsonp 方式

successFunction

選填,請求成功後的回呼函式,格式如:

success: function(data, textStatus){  
// data 為伺服器傳回的,並根據 dataType 參數進行處理後的資料。
//textStatus 為狀態值 success
}

如下範例:

FR.ajax({
url: "/webapps/webroot/a.html",
success: function(data, textStatus{
alert(this.url);
}
});
errorFunction

選填,請求失敗時呼叫此函式,格式如:

error: function(XMLHttpRequest, textStatus, errorThrown)
//參數分別為 XMLHttpRequest 物件、錯誤資訊、擷取的異常物件。
//通常 textStatus 和errorThrown 之中只有一個會包含資訊
 }

如下範例:

FR.ajax({
url: "some.jsp",
error: function(XMLHttpRequest, textStatus, errorThrown{
alert(this.url);
}
});
completeFunction選填,請求完成後回呼函式(請求成功或失敗之後均呼叫),function 中可以透過 this.xxx 來呼叫該 ajax 請求中的選項值。
complete: function(XMLHttpRequest, textStatus){  
//參數分別為 XMLHttpRequest 物件和一個描述成功請求是否成功的字串
 }

如下範例:

FR.ajax({
url: "some.jsp",
complete: function(XMLHttpRequest, textStatus{
alert(this.url);
}
});
timeoutNumber選填,設定請求逾時時間(毫秒),此設定將改寫全局設定。
async Boolean

選填,預設為 true,所有請求均為非同步請求。如果需要傳送同步請求,請將此選項設定為 false。

注1:同步請求將鎖住瀏覽器,使用者其他操作必須等待請求完成才可以執行

注2:App不支援同步載入。 

程式碼範例

在 cpt 的儲存格超連結 JavaScript 腳本中發 ajax 請求,且在不同的回呼函式中處理不同的情況:

var username = "1";
var password = "1";
FR.ajax({   
   url:"http://env.finedevelop.com:59204/Test
/ReportServer?op=fs_load&cmd=sso"
,
   data:{
        fr_username:username,
        fr_password:password
   },
   dataType:"jsonp",//跨域採用jsonp方式     
   timeout:5000,//逾時時間(單位:毫秒)
   //success:function(data) { //data參數視回傳值情況而定
        //FR.Msg.alert("success",data.status);
   //},   
   //error:function(errorThrown){   
        //FR.Msg.alert("error",errorThrown);
   //},
   complete: function(res,textStatus)
        FR.Msg.alert("complete",textStatus); 
   }  
})
隱藏程式碼

普通報表和決策報表應用範例

某些應用場景下,如果只允許在登入狀態下執行一些操作,不登入就不能執行,要先判斷當前的登入狀態。如下圖所示:

就可以透過 FR.ajax 在不重新整理頁面的情況下,請求登入狀態並傳回,如下實現方式。

1)建立範本,新增一個按鈕,按鈕名稱修改為「查看登入狀態」。如下圖所示:

2)點選按鈕,為按鈕新增一個「點選」事件,事件內容為在不重新整理頁面的情況下,請求登入狀態並傳回。如下圖所示:

JavaScript 程式碼如下:

FR.ajax({
url: "/webroot/decision/login/info",
asynctrue,
complete: function (res, status{
if (status == 'success') {
var u = FR.jsonDecode(res.responseText);
if (u != null && u.data) {
FR.Msg.alert("通知","登入狀態");
//u.data.ip u.data.time u.data.city 分別可傳回上次登入ip、時間、城市
}else{
FR.Msg.alert("通知","登出狀態");
}
}
}});

3)儲存範本,點選「分頁預覽」,效果如應用場景中所示。

點選可下載範本:實時獲取登入狀態.cpt

FVS 視覺化看板應用範例

注:需安裝「FineVis資料視覺化」插件 V1.8.0 及之後的版本。

FVS 視覺化看板中給 標題組件 新增一個「JavaScript」互動點選事件,步驟如下圖所示:

JavaScript 程式碼如下:

注:FVS 中使用程式碼時需注意將 FR.xxx 換成 duchamp.xxx ,且參數格式均為 json 格式。

duchamp.ajax({
  url: "/webroot/decision/login/info",
  asynctrue,
  complete: function (res, status{
     if (status == 'success') {
       var u = duchamp.jsonDecode(res.responseText);
       if (u != null && u.data) {
         duchamp.Msg.alert({
         title: "通知",
         message: "登入狀態",
         });
//u.data.ip u.data.time u.data.city 分別可傳回上次登入ip、時間、城市
         } else {
          duchamp.Msg.alert({
          title: "通知",
          message: "登出狀態",
          });
          }
     }
  }
});

預覽效果如下圖所示:

點選下載範本:JS實現查看平台登入狀態.fvs

附件列表


主題: 二次開發
已經是第一篇
已經是最後一篇
  • 有幫助
  • 沒幫助
  • 只是瀏覽
  • 圖片不清晰
  • 用語看不懂
  • 功能說明看不懂
  • 操作說明太簡單
  • 內容有錯誤
中文(繁體)

文 檔回 饋

滑鼠選中內容,快速回饋問題

滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

不再提示

10s後關閉