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>
javascript-使用el表达式获取后台传递的数据的更多相关文章
- jsp用el表达式获取后台传来的值,或者获取session中的值
<script type="text/javascript"> var usernameC = ${sessionScope.SESSION_USER_PROFILE. ...
- EL表达式获取数据
EL 全名为Expression Language. EL主要作用 获取数据: •EL表达式主要用于替换JSP页面中的脚本表达式,以从各种类型的web域 中检索java对象.获取数据.(某个web域 ...
- SSH 框架controller向jsp传递List jsp中使用el表达式获取
mvc可以使用ModelAndViev传递数据选择跳转的视图 controller中的代码, 把一个模拟的表单studentListSimulate传给ModelAndView @RequestMap ...
- 转:el表达式获取map对象的内容 & js中使用el表达式 & js 中使用jstl 实现 session.removeattribute
原文链接: ①EL表达式取Map,List值的总结 ②在jsp中使用el表达式通过键获得后台的一个map<Long,String>的值 ③在javascript中使用el表达式(有图有真相 ...
- EL表达式获取Map和List中的值
EL表达式获取Map和List中的值 EL表达式取Map中的值: 当Map中是String,String时 后台servlet中: Map<String, String> map1 = ...
- JAVAWEB开发之Session的追踪创建和销毁、JSP具体解释(指令,标签,内置对象,动作即转发和包括)、JavaBean及内省技术以及EL表达式获取内容的使用
Session的追踪技术 已知Session是利用cookie机制的server端技术.当client第一次訪问资源时 假设调用request.getSession() 就会在server端创建一个由 ...
- EL表达式获取对象属性的原理
EL表达式获取对象属性的原理是这样的: 以表达式${user.name}为例 EL表达式会根据name去User类里寻找这个name的get方法,此时会自动把name首字母大写并加上get前缀,一旦找 ...
- 【JSP EL】<c:if> <c:foreach >EL表达式 获取list长度/不用循环,EL在List中直接获取第一项的内容/EL获取Map的键,Map的值
1.EL表达式 获取list长度 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" ...
- jsp页面之间传参用el表达式获取
jsp页面之间传参用el表达式获取 参数方法:${param.参数名} session方法:${session.变量名}
随机推荐
- 【kubernetes】ubuntu14.04 64位 搭建kubernetes过程
背景: Kubernetes介绍:http://kubernetes.io/docs/getting-started-guides/ github地址:https://github.com/kuber ...
- CSS3选择器、低版本解决方案及各浏览器私有前缀
一.基本选择器 通配选择器:* 元素选择器:div.p… ID选择器:#id 类选择器:.className 群组选择器:选择器1,选择器2 主流浏览器全部支持 二.层次选择器 后代选择器: div ...
- 关于 CommonJS AMD CMD UMD
1. CommonJS CommonJS 原来叫 ServerJS, 是服务器端模块的规范,Node.js采用了这个规范. 根据CommonJS规范,一个单独的文件就是一个模块.加载模块使用requi ...
- [TCO2013]DirectionBoard
题意:给一个网格,每个格子有一个方向表示在这个格子上要往哪个方向走,你可以改变某些格子的方向,问最少多少次操作使得从任意格子出发都能回到这个格子 woc这都不会我还是回家种田去吧... 题目的要求是改 ...
- 【模拟】【set】hdu 4789 ICPC Ranking
写了一晚上,TLE到死,我选择GG 喵的好像还是前几年我校出的题,这整场都……tm…… 改日在战 /*TLE代码*/ #include<cstdio> #include<vector ...
- MySort的后续学习
本周老师在课上布置的一个MySort的任务 在结合了老师的模板后,我在课上写出了如下代码: import java.util.*; public class MySort { public stati ...
- python基础之递归,匿名,内置函数
递归函数: 什么是递归函数? 函数递归调用:在调用一个函数的过程中,又直接或间接地调用了该函数本身. 递归必须要有两个明确的阶段: ①递推:一层一层递归调用下去,强调:每进入下一层问题规模减少 ②回溯 ...
- Android Studio自动化快速实现Parcelable接口序列化
1.在线安装 然后打开File -> Settings -> Pugins -> Browse Repositories 如下,输入android parcelable code g ...
- Problem B: 零起点学算法92——元素前移1位
#include<stdio.h> int main() { ],b[]; while(scanf("%d",&n)!=EOF) { ;i<n;i++) ...
- Oracle10g 创建一个DataBase实例
Oracle10g创建DataBase实例如下:第一步:Oracle - OraDb10g_home1 -> 配置和移植工具 -> 打开Database Configuration Ass ...