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方法对比

 

javascript-使用el表达式获取后台传递的数据的更多相关文章

  1. jsp用el表达式获取后台传来的值,或者获取session中的值

    <script type="text/javascript"> var usernameC = ${sessionScope.SESSION_USER_PROFILE. ...

  2. EL表达式获取数据

    EL 全名为Expression Language. EL主要作用 获取数据: •EL表达式主要用于替换JSP页面中的脚本表达式,以从各种类型的web域 中检索java对象.获取数据.(某个web域 ...

  3. SSH 框架controller向jsp传递List jsp中使用el表达式获取

    mvc可以使用ModelAndViev传递数据选择跳转的视图 controller中的代码, 把一个模拟的表单studentListSimulate传给ModelAndView @RequestMap ...

  4. 转:el表达式获取map对象的内容 & js中使用el表达式 & js 中使用jstl 实现 session.removeattribute

    原文链接: ①EL表达式取Map,List值的总结 ②在jsp中使用el表达式通过键获得后台的一个map<Long,String>的值 ③在javascript中使用el表达式(有图有真相 ...

  5. EL表达式获取Map和List中的值

    EL表达式获取Map和List中的值   EL表达式取Map中的值: 当Map中是String,String时 后台servlet中: Map<String, String> map1 = ...

  6. JAVAWEB开发之Session的追踪创建和销毁、JSP具体解释(指令,标签,内置对象,动作即转发和包括)、JavaBean及内省技术以及EL表达式获取内容的使用

    Session的追踪技术 已知Session是利用cookie机制的server端技术.当client第一次訪问资源时 假设调用request.getSession() 就会在server端创建一个由 ...

  7. EL表达式获取对象属性的原理

    EL表达式获取对象属性的原理是这样的: 以表达式${user.name}为例 EL表达式会根据name去User类里寻找这个name的get方法,此时会自动把name首字母大写并加上get前缀,一旦找 ...

  8. 【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" ...

  9. jsp页面之间传参用el表达式获取

    jsp页面之间传参用el表达式获取 参数方法:${param.参数名} session方法:${session.变量名}

随机推荐

  1. Flask实战第44天:完成前台注册功能

    注册功能后端逻辑 用户注册要把注册的表单提交上来,因此,我要先对表单进行验证,编辑front.forms from apps.forms import BaseForm from wtforms im ...

  2. RabbitMQ (十三) 集群+单机搭建(window)

    拜读了网上很多前辈的文章,对RabbitMQ的集群有了一点点认识. 好多文章都说到,RabbitMQ的集群分为普通集群和镜像集群,有的还加了两种:单机集群和主从集群. 我看来看去,看了半天,怎么感觉, ...

  3. poj 2940

    Wine Trading in Gergovia Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 3187   Accepte ...

  4. 常见OJ提交结果对照表

    Waiting:你的程序刚刚提交,正在等待OJ评测你的程序.   Compiling:OJ正在编译你的程序.   Accepted:OK!你的程序是正确的 ^_^.   Wrong Answer:你的 ...

  5. [COCI2011-2012#7] KAMPANJA

    这个题似曾相识啊,以前是用搜索剪枝+0/1边权bfs做的(题面可以参照上一篇这个题的博客). 有一类问题就是求 包含若干关键点的最小强联通子图大小是多少. 如果关键点数量是变量,那么就是NP问题了.. ...

  6. canvas之arcTo

    arc与arcTo,从名字都能看出来相似.arcTo也是画曲线的方法,而且他画出的曲线也是正圆的一段弧线.但他的参数和arc简直是不共戴天~ ctx.arcTo(x1,y1,x2,y2,radius) ...

  7. Don't know how to define struct flock on this system, set --enable-opcach=no

    解决方法一: 最后查看php官方文档解决. 在configure 里面加上   --with-libdir=lib64 解决方法二: 编辑/etc/ld.so.conf 根据系统,加入include ...

  8. ObjC的initialize和init

    Objective-C很有趣的一个地方是,它非常非常像C.实际上,它就是C语言加上一些其他扩展和一个运行时间(runtime). 有了这个在每个Objective-C程序中都会起作用的附加运行时间,给 ...

  9. awk算术运算一例:统计hdfs上某段时间内的文件大小

    计算hdfs指定目录中所有文件名中包含2011-04-24的文件大小,并换算成GB:  $HADOOP_HOME/bin/hadoop fs -du /user/hdfs/s3/ifocus/*201 ...

  10. 如何还原phpstorm默认设置

    我不知道phpstorm有没有这个功能,反正我是没找到. 首先,找到phpstorm的配置文件,一般在C:\Users\Administrator 每个人的都可能不一样. 如果phpstorm打开的话 ...