最近项目遇到的问题一关于jquery与json-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_19372/article/details/82305985

本人是采用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>