FR.ajax

Ajax is a technology for exchanging data with a server, which allows you to update parts of a web page without reloading the entire page.

FR.ajax is a wrapped version of the jQuery.ajax() function, used in reports to send Ajax requests to a specific web page. The data parameter is encoded to handle Chinese, Japanese, and Korean characters.

options is an Ajax parameter. The following table explains this parameter.

The options parameter is provided in JSON format. The following table describes the attributes.

Attribute	Type	Description
url	String	(Required) Specifies the address to which the request is sent.
data	Object	(Optional) Specifies the data to be sent with the request. For GET requests, data is automatically converted into a query string and appended to the URL. Values must be specified in key-value pairs, which can be either a string (for example, p1=pavalue&p2=p2value) or an object (for example, {p1:p1value,p2:p2value}).
type	String	(Optional) Specifies the request method, which can be either POST or GET, with GET used by default.
dataType	String	(Optional) Specifies the expected data type returned by the server. If this attribute is not specified, the type will be intelligently inferred from the MIME information of the HTTP packet. Possible values include: Note: xml, html, and script are not supported on mobile terminals. xml: Returns an XML document. html: Returns HTML information in plain text. T <script> tags will be executed when inserted into the DOM. script: Returns plain-text JavaScript code. json: Returns JSON data. text: Returns a plain-text string. jsonp: Uses JSONP for cross-domain requests. Note: Only GET requests are supported when JSONP is used for cross-domain communication.
success:	Function	(Optional) Specifies the callback function to be invoked upon a successful request. The format is as follows: success: function(data, textStatus){   // data is the returned server data that has been processed based on the dataType parameter. //textStatus is the status "success". } Example: FR.ajax({     url: "/webapps/webroot/a.html",     success: function(data, textStatus)         {alert(this.url);     } });
error	Function	(Optional) Specifies the callback function to be invoked if the request fails. The format is as follows: error: function(XMLHttpRequest, textStatus, errorThrown){ //The parameters are, respectively, the XMLHttpRequest object, the error message, and the caught exception object.  //Typically, only one of textStatus or errorThrown will contain relevant information. } Example: FR.ajax({     url: "someurl",     error: function(XMLHttpRequest, textStatus, errorThrown) {         alert(this.url);     } });
complete	Function	(Optional) Specifies the callback function to be invoked once the request completes (whether successful or not). In this function, you can reference any option values of the Ajax request via this.xxx. complete: function(XMLHttpRequest, textStatus){   //The parameters are, respectively, the XMLHttpRequest object and a string describing the request outcome.  } Example: FR.ajax({     url: "someurl",     complete: function(XMLHttpRequest, textStatus) {         alert(this.url);     } });
timeout	Number	(Optional) Specifies the request timeout in milliseconds. This setting overrides the global timeout setting.
async	Boolean	(Optional) Defaults to true, meaning that all requests are asynchronous. If you need to send a synchronous request, set this attribute to false. Note: 1. Synchronous requests will lock the browser. You must wait for the request to complete before performing other actions. 2. Apps do not support synchronous loading.

You can use a JavaScript hyperlink added to a cell of a CPT report to send an Ajax request and handle different scenarios via various callback functions. The JavaScript codes are as follows:

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",//Use JSONP for cross-domain requests.
   timeout:5000,//Timeout in milliseconds
   //success:function(data) { //The content of the data parameter is determined by the server's returned value.
      //FR.Msg.alert("success",data.status);
   //},
   //error:function(errorThrown){
      //FR.Msg.alert("error",errorThrown);
   //},
   complete: function(res,textStatus){
      FR.Msg.alert("complete",textStatus);
    }
})
Show Code

In certain application scenarios, some operations can only be performed after you log in to the system, therefore, you must first check the current login status before proceeding, as shown in the following figure.

You can use FR.ajax to request and retrieve the login status without refreshing the page. The steps are as follows.

1. Create a general report, add a button widget to the parameter panel, and modify Button Name to Check Login Status, as shown in the following figure.

2. Select the button widget and add a click event to the widget, as shown in the following figure. The event requests the login status and returns the status without refreshing the page.

The JavaScript codes are as follows:

FR.ajax({
url: "/webroot/decision/login/info",
async: true,
complete: function (res, status) {
if (status == 'success') {
var u = FR.jsonDecode(res.responseText);
if (u != null && u.data) {
FR.Msg.alert("Prompt","Logged-in");
//u.data.ip, u.data.time, and u.data.city respectively return the last login IP address, time, and city
}else{
FR.Msg.alert("Prompt","Logged-out");
}
}
}});

3. Save the template and click Pagination Preview. The effect is the same as that shown at the beginning of this section.

For details, you can download the template Real Time Login Status Retrieval.cpt.

Note:

You need to install the FineVis Data Visualization plugin of V1.8.0 or later versions.

In the FVS visualization dashboard, add a JavaScript click event to the title component. The following figure shows the steps.

The JavaScript codes are as follows:

Note:

When using the codes in FVS, you need to replace FR.xxx with duchamp.xxx, and ensure that all parameters are specified in JSON format.

duchamp.ajax({
  url: "/webroot/decision/login/info",
  async: true,  complete: function (res, status) {
     if (status == 'success') {
       var u = duchamp.jsonDecode(res.responseText);
       if (u != null && u.data) {
         duchamp.Msg.alert({
         title: "Prompt",
         message: "Logged-in",
         });
//u.data.ip, u.data.time, and u.data.city respectively return the last login IP address, time, and city
         } else {
          duchamp.Msg.alert({
          title: "Prompt",
          message: "Logged-out",
          });
          }
     }
  }
});
Show Code

The following figure shows the preview effect.

For details, you can download the template Platform Login Status Retrieval by JS.fvs.