javascript-使用el表達式獲取后台傳遞的數據

 

js獲取后台數據

CreateTime--2017年5月26日16:14:14
Author:Marydon

　　在js中使用el表達式的前提是：HTML引用js使用內聯方式（即在JSP頁面內部使用js），使用外聯（即引入的外部js文件）不支持使用el表達式。

　　1.使用el表達式獲取

　　　　數據格式：java-List<Map>

{data=[{TERM=第一期, WANGWU=199, LISI=229, ZHAOLIU=233, SANQI=234, ZHANGSAN=233},{TERM=第二期, WANGWU=156, LISI=186, ZHAOLIU=179, SANQI=206, ZHANGSAN=234}, {TERM=第三期, WANGWU=133, LISI=161, ZHAOLIU=246, SANQI=185, ZHANGSAN=240}, {TERM=第四期, WANGWU=194, LISI=126, ZHAOLIU=190, SANQI=207, ZHANGSAN=229},{TERM=第五期, WANGWU=149, LISI=166, ZHAOLIU=209, SANQI=174, ZHANGSAN=197}], code=0, expMsg=, msg=操作成功}

　　　　取值

/**
 * 在js中使用EL表達式獲取后台返回的數據
 */
var row = '${model.data}';

　　　　row 代表的是

[{TERM=第一期, WANGWU=199, LISI=229, ZHAOLIU=233, SANQI=234, ZHANGSAN=233}, {TERM=第二期, WANGWU=156, LISI=186, ZHAOLIU=179, SANQI=206, ZHANGSAN=234}, {TERM=第三期, WANGWU=133, LISI=161, ZHAOLIU=246, SANQI=185, ZHANGSAN=240}, {TERM=第四期, WANGWU=194, LISI=126, ZHAOLIU=190, SANQI=207, ZHANGSAN=229}, {TERM=第五期, WANGWU=149, LISI=166, ZHAOLIU=209, SANQI=174, ZHANGSAN=197}]

　　　　特別注意：不能用for循環

/**不能用for循環
 * for (var i =0; i<row.length; i++) {
 *    xAxisValues.push('${row[i].TERM}');
 * }
 */　　

　　　　只能用jstl標簽庫的c標簽迭代

<c:forEach var="row" items="${model.data}">
     xAxisValues.push('${row.TERM}');
</c:forEach>
console.log(xAxisValues);

　　2.使用小腳本獲取

/*
 * 在js中也可以使用小腳本獲取后台返回的數據
 */
var test = '<%=request.getAttribute("model")%>';

　　獲取的值是：

{data=[{TERM=第二期, WANGWU=156, LISI=186, ZHAOLIU=179, SANQI=206, ZHANGSAN=234}, {TERM=第三期, WANGWU=133, LISI=161, ZHAOLIU=246, SANQI=185, ZHANGSAN=240}, {TERM=第五期, WANGWU=149, LISI=166, ZHAOLIU=209, SANQI=174, ZHANGSAN=197}, {TERM=第一期, WANGWU=199, LISI=229, ZHAOLIU=233, SANQI=234, ZHANGSAN=233}, {TERM=第四期, WANGWU=194, LISI=126, ZHAOLIU=190, SANQI=207, ZHANGSAN=229}], code=0, expMsg=, msg=操作成功}

UpdateTime--2017年8月23日15:37:46

小結：

　　1. javascript獲取后台數據有兩種方式：使用小腳本；使用EL表達式；　　

　　2. 前提：引入js的方式必須是在本頁面上；

　　3. 對於后台返回的List，在js里面直接嵌套<c:forEach var="" items="${}"></c:forEach>即可。

實例：

　　后台返回的是頁面和數據，數據格式是一個list，前台用EL表達式接收的話，返回的是一個字符串，怎樣讓它的數據類型還是數組呀？ 

　　第一種方式：

/**
 * 方式一：使用c:forEach迭代（推薦方式）
 */
window.onload=function (){
    // 1.獲取文件路徑
    var filePath = "${model.filePath}";
    // 2.使用forEach循環執行 利用dcm插件批量打開文件
    <c:forEach var="fileName" items="${model.fileNames}">
        // 2.1 獲取文件名稱　　              
        var fileName = "${fileName}";
        // 2.2設置文件訪問路徑
        var path = "<%=basePath%>" + filePath;
        path += "/" +　fileName;
        // 2.3 添加要打開的文件
        document.getElementById("myMovieName").OpenImage(path,"dcm",fileName,"d:\\temp",0);
    </c:forEach>
} 

　　解析結果：

 

　　第二種方式

　　HTML部分

<div style="display: none" id="fileNamePool">
    <c:forEach var="fileName" items="${model.fileNames}">
        <input type="hidden" value="${fileName }" />
    </c:forEach>
</div>

　　javascript部分

/**
 * 方式二：往頁面賦值，再取值
 */
window.onload=function (){
    // 1.獲取文件路徑
    var filePath = "${model.filePath}";
    // 2.獲取頁面上指定區域的隱藏域
    var inputTags = $('#fileNamePool input:hidden');
    // 3. 使用dcm插件批量打開文件
    for (var i = 0; i < inputTags.length; i++) {
        // 3.1 獲取文件名稱
        var fileName = inputTags[i].value;
        // 3.2 設置文件訪問路徑
        var path = "<%=basePath%>" + filePath;
        path += "/" + fileName;
        // 3.2 添加要打開的文件
        document.getElementById("myMovieName").OpenImage(path,"dcm",fileName,"d:\\temp",0);
    }    
}

　　第三種方式

<script type="text/javascript">
   /**
    * 方式三：發送Ajax請求，重新獲取數據
    */
    window.onload=function (){
        var ORG_ID = "${model.ORG_ID}";
        var PATIENTCODE = "${model.PATIENTCODE}";
        var param = "ORG_ID=" + ORG_ID + "&PATIENTCODE=" + PATIENTCODE + "&RESULT_TYPE=jsonResult";
        
        var request = new $WebRequest(
                baseUrl + "/telemedicine/reseCons/showDcm.do", param, 
                function(result) {
                    getJsonResult(result, function (result) {
                        // dcm文件的名稱
                        var fileNames = result.fileNames;
                        // 文件路徑
                        var filePath = result.filePath;
                        for (var i = 0; i < fileNames.length; i++) {
                            var path = "<%=basePath%>" + filePath;
                            path += "/" + fileNames[i]; 
                            document.getElementById("myMovieName").OpenImage(path,"dcm",fileNames[i],"d:\\temp",0)
                        }
                    });
                },null,true);
        request.Start();
    }
</script>

 

 相關推薦：

 　　  js與jQuery實現方式對比匯總 

　　   js與jQuery方法對比