本人是采用SSH架构搭建的项目
问题一:存在的问题是 获取的json数据 不显示。
UserAction代码
/**
* 获取用户所有task列表
*
* @param mapping
* @param form
* @param request
* @param response
* @return
* @throws Exception
*/
public ActionForward getUserTasksList(ActionMapping mapping,
ActionForm form, HttpServletRequest request,
HttpServletResponse response) throws Exception {
String userId = request.getParameter("userId");
String weekId = request.getParameter("weekId");
System.out.println("userId:" + userId + ",weekId:" + weekId);
List<STaskOfweek> list = taskTotalService
.queryTaskOfweekListByUserIdAndWeekId(Integer.valueOf(weekId),
Integer.valueOf(userId));
System.out.println("list.size:" + list.size());
// request.setAttribute("userTaskList", userTaskList);
List<UserTask> userTaskList = new ArrayList<UserTask>();
for (int i = 0; i < list.size(); i++) {
STaskOfweek sow = list.get(i);
UserTask ut =new UserTask();
ut.setTaskId(sow.getTaskId());
ut.setTaskName(sow.getTaskName());
ut.setWeekId(sow.getSWeek().getWeekId());
ut.setByAssessmanId(sow.getByAssessmanId());
userTaskList.add(ut);
}
Map map = new HashMap();
map.put("userTaskList", userTaskList);
JSONArray jo = JSONArray.fromObject(map);
System.out.println("str:"+jo.toString());
response.getWriter().write(jo.toString());
return null;
}
JSP页面代码
<script type="text/javascript">
var root = "${pageContext.request.contextPath}";
$(document).ready(function(){
$("#displayTable").click(function(){
var url=root+"/getUserTasksList.do";
jQuery.post(url,"weekId=14&userId=30",function(data){
var m="<table border='1'>";
//var items=data.userTaskList;//在此若取不到值可用var items = data[0];代替
//var items=eval(data.userTaskList);
var items = eval(data);
for(var i=0;i<items.length;i++){
var task=items[i];
m=m+"<tr><td>"+task.taskName+"</td><td>"+task.taskId+"</td></tr>";
}
m+="</table>";
document.getElementById("myTable").innerHTML=m;
},'json');
});
});
</script>
<body>
<input type="button" value="显示我的表格" id="displayTable"/>
<div id="myTable">测试json数据显示</div> </body>
感谢群里所有好心的朋友,我的问题最终得到解答。
贴出来,作个参考。
<script type="text/javascript">
var root = "${pageContext.request.contextPath}";
$(document).ready(function () {
var userId = $('#userId').val();
$("[id^=weekId]").each(function () {//循环
var weekId = $(this).val();
$("#myli" + weekId).click(function () {
var url = root + "/getUserTasksList.do";
jQuery.post(url, "weekId=" + weekId + "&userId=" + userId, function (data) {
var jsonDoc = eval('(' + data + ')');
var m = "<table border='1'>";
var items = jsonDoc[0].userTaskList;
for (var i = 0; i < items.length; i++) {
var task = items[i];
m = m + "<tr><td>" + task.taskId + "</td><td><a href='javascript:void(0);'>" + task.taskName + "</a></td></tr>";
}
m += "</table>";
if(document.getElementById("myTable"+ weekId)!=null){
document.getElementById("myTable"+ weekId).innerHTML = m;
}
});
});
});
});
</script>
<form action="" id="usertaskForm">
<table width="100%" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>
<td>
<div id="menu">
<h3>
用户
<font color="red">${requestScope.user.userName }</font>任务列表
</h3>
<ul>
<c:forEach items="${requestScope.yearList }" var="year">
<li>
<em></em><a href='javascript:void(0);'>${year.yearName }</a>
<ul>
<c:forEach items="${year.SMonths }" var="month">
<li>
<em></em><a href='javascript:void(0);'>${month.monthName}</a>
<ul>
<c:forEach items="${month.SWeeks }" var="week">
<li id="myli${week.weekId}">
<input type="hidden" name="weekId" value="${week.weekId}" id="weekId${week.weekId}"/>
<input type="hidden" name="userId"
value="${requestScope.user.userId }" id="userId"/>
<em></em><a href='javascript:void(0);'>${week.weekId}|${week.weekName}</a>
<ul>
<li>
<c:forEach items="${week.STaskOfweeks }" var="task">
<div id="myTable${week.weekId}"></div>
</c:forEach>
</li>
</ul>
</li>
</c:forEach>
</ul>
</li>
</c:forEach>
</ul>
</li>
</c:forEach>
</ul>
</div>
</td>
</tr>
</table>
分享到:
相关推荐
在项目中很多时候遇到这样的问题,需要动态的增加、删除表格的行与列,在学习jQuery的过程中,自己试着在网上找寻教程,发现都不符合自己的需要,所以就动手改写了一份简单的diy表格。目前实现动态增加 删除最后一行...
Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理...
然后 正好就遇到了浏览器端跨域访问的问题。 跨域的安全限制都是指浏览器端来说的,服务器端不存在跨域安全限制的问题。 目前浏览器端跨域访问常用的两种方法有两种: 1、通过jQuery的ajax进行跨域,这其实是采用的...
用户的地址选择往往是网络应用中不可缺少的一部分,可是遇到了以下问题: 地址数据难以收集 用户选择烦琐,需要手动查找冗长的下拉菜单 难以维护地理数据以及重用组件 LocationSelect插件具有以下特点,...
提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。 文档就绪函数 您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready ...
在项目中遇到一个问题,在火狐下,$.getJSON();请求数据一切正常,但是在IE下面,$.getJSON();只请求一次数据,第二次根本就不发送请求了,用fiddler抓取了才知道,第二次没有发送请求,改成了post就正常了 $.get...
《jQuery攻略》对使用jQuery过程中遇到的各类问题给出了解决方案,比如,如何使用jQuery框架、CSS选择器、DOM、事件处理、动画效果,以及如何开发Ajax应用程序、如何使用jQuery工具函数、如何使用插件扩展jQuery。...
百度了一堆都是说 jquery跨域之类的原因,比对项目,发现没有这样的原因;但是还是受到其中的启发,使用json可以防止这类问题,但是他们提供的办法都比较复杂,需要改前台和后台。 试了一下jquery自带的json方式提交...
对于使用ajax来请求数据已经不是第一次使用(一直觉得也就那么回事),就在昨天居然遇到了一个问题?项目中需要用到ajax来进行数据的请求,于是三下五除二的将ajax代码拷贝到项目中,前端,后台数据处理完毕,测试...
将加载的JSON文件保存到磁盘中:只需单击一次即可将JSON文件下载/保存到磁盘中。 单个编辑器中的不同视图:通过单击导航或更改模式下拉菜单,可以在单个编辑器窗口中以不同模式查看数据。在同一编辑器窗口中,您可以...
我-地震料测试 项目介绍 - - - - - - - - - -...外部JSON数据是通过JavaScript检索,也jQuery的AJAX调用+ JSONP解决读取来自Seismi.org服务器上的文件时遇到的跨域问题。 JavaScript代码调用谷歌的脚本文件来处理跨来源
每个多部分问题都模拟了前端开发人员面临的现实挑战。 需要编写干净的代码并应用您对变量、对象、JSON、函数和控制流的知识来成功解决挑战。 我做了什么: 为 index.html 使用 Bootstrap 的网格系统、导航栏和...
Java二进制IO类与文件复制操作实例,好像是一本书的例子,源代码有的是独立运行的,与同目录下的其它代码文件互不联系,这些代码面向初级、中级Java程序员。 Java访问权限控制源代码 1个目标文件 摘要:Java源码,...
【2020实战】学生志愿填报管理系统-前端部分 一。项目说明 本项目为2020年实战学生志愿填报信息管理系统的前端部分原始代码,基于html + js + jquery + bootstrap。...若遇到问题可在博客或b站进行留言〜
相信很多小伙伴都会遇到需要做表单的需求,就像我现在做的医院项目,茫茫多的表单无穷无尽。一开始做表单使用最笨的方法:一个个span去定义ID,每个数据都用ajax获取后赋值显示,然后在表单提交前一个个用jQuery根据...
###构建HTML5 Node.js 表示CSS3动画JavaScript jQuery的JSON(从CSV文件转换) Chart.js 古尔普问题与挑战Chart.js! 在没有外部数据库的项目上工作。MVP 2 对实时CSV电子表格进行更改后,请使用Gulp自动更新JSON...
简历项目 我如何完成这个项目? 如果您需要复习 JavaScript 语法,请转到; 如果您想了解这个项目是如何操作和遍历 DOM 的,请查看 。 浏览本课程中的视频和作业,学习构建简历所需的 JavaScript。 根据项目评分...
在使用jquery插件select2的过程中遇到了一些疑惑,无论是穿json数据还是通过jsonp方式取数据,都能够正确返回。可是下拉列表中的条目却不能被选中,对鼠标和键盘选择都无效。后来发现,select2插件在实现选中时是以...
Java二进制IO类与文件复制操作实例,好像是一本书的例子,源代码有的是独立运行的,与同目录下的其它代码文件互不联系,这些代码面向初级、中级Java程序员。 Java访问权限控制源代码 1个目标文件 摘要:Java源码,...