`

最近项目遇到的问题一 关于jquery与json

 
阅读更多

本人是采用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插件Json2Template写的简单项目

    在本文中,我们将深入探讨如何使用Jquery插件Json2Template进行项目开发。Json2Template是一款基于jQuery的库,它允许开发者将JSON数据动态渲染为HTML模板,极大地提高了前端界面的数据展示效率。在学习和应用这个...

    Jquery跨域Json请求处理

    跨域问题是前端开发中不可避免的一个挑战,通过合理运用JSONP等技术,可以在不违反浏览器安全策略的情况下,实现跨域数据的高效获取与处理。需要注意的是,在实际应用中应考虑多种跨域解决方案,并结合项目需求选择...

    Jquery解析Json数据

    在描述的链接中,可能包含了关于如何在实际项目中使用jQuery解析JSON的具体示例。 首先,我们需要理解jQuery的核心方法`$.parseJSON()`,这个方法用于将一个JSON格式的字符串转换为JavaScript对象。例如,假设我们...

    jquery-autoComplete 处理返回的json对象问题

    本文将深入探讨如何处理jQuery-autoComplete插件在接收到JSON对象返回数据时可能遇到的问题。 `jQuery-autoComplete` 是jQuery UI的一个插件,它允许我们为输入框提供动态的下拉建议。这个功能通过监听用户输入并...

    jquery-xmlToJson.js

    该插件的兼容性设计意味着它可以与jQuery的各个版本无缝集成,无论你的项目使用的是较旧还是较新的jQuery版本。 XML到JSON的转换过程中,"jquery-xmlToJson.js"首先会解析XML文档,识别其中的元素、属性和文本内容...

    jQuery解析json数据实例分析

    通过上述内容的分析,我们可以看出在前端使用jQuery解析和处理JSON数据的重要性,同时也能了解到在Web开发过程中,字符编码问题、数据格式的正确传输以及客户端与服务器端的交互方式等方面需要特别注意的细节。...

    基于jquery json制作的饼状图数据图表特效源码.zip

    在IT行业中,前端开发是构建Web应用程序的重要环节,它涉及到用户与网站的交互以及...记得在使用过程中,要理解每一部分代码的作用,这样不仅可以帮助你更好地利用这个示例,还能让你在未来遇到类似问题时能快速解决。

    二级联动json

    在IT领域,二级联动是一种常见的交互设计,常用于...在实际开发中,遇到问题可以参考jQuery和JSON的官方文档,或者在开发者社区寻找类似的解决方案。同时,理解并熟练运用jQuery和JSON是提升Web开发效率的关键技能。

    jQuery遍历json中多个map的方法

    在进行Web前端开发时,我们经常会遇到需要操作JSON数据的情况。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。它基于JavaScript的一个子集,因此...

    一个用于将JSON数据转换为Table的JavaScript库

    8. **文档与示例**:为了更好地理解和使用这个库,开发者通常会提供详细的文档和示例代码,帮助你快速上手并解决遇到的问题。 9. **社区支持与贡献**:开源项目往往有活跃的社区,你可以通过GitHub或其他平台找到...

    java+ajax+json+jquery完整实例

    在这个实例中,遇到的四个问题可能包括:请求参数的正确传递、JSON数据的序列化与反序列化、Ajax回调函数的正确执行,以及前端与后端数据同步的时机控制。解决这些问题通常需要对这些技术有深入的理解,包括理解HTTP...

    封装好的Jquery 的ajax 的json的AutoComplete控件(用户控件)

    标题中的“封装好的Jquery的ajax的json的AutoComplete控件”是指一个已经预先开发并优化的JavaScript组件,主要用于在Web应用中实现自动补全功能。这个控件基于jQuery库,利用了其强大的DOM操作能力和事件处理机制。...

    ecshop jquery下载

    结合以上信息,我们可以推测这可能是某个开发者在更新或修复ECShop项目中遇到的问题,他们可能需要引入这些jQuery文件以替换或增强ECShop内建的JSON处理能力,同时避免与原有代码的冲突。在实际开发过程中,了解如何...

    ecshop解决与jQuery冲突文件

    当ECSHOP与jQuery同时使用时,如果不妥善处理,可能会遇到命名空间冲突,影响到两者正常的功能实现。 为了解决这个问题,我们需要引入`json2.js`文件。`json2.js`是JSON(JavaScript Object Notation)的一个实现,...

    jQuery 遍历json数组的实现代码

    在下面的函数中,我们遇到了一个二维的JSON对象,这个对象内嵌着数组,每个数组元素都是一个对象。 示例代码如下: ```javascript function e() { var json = [ {"kl_id":"2","kl_title":"Testdate","kl_content...

    jQuery1.12.4+jQuery中文手册.rar

    - 遇到具体问题时,查阅CHM文件中的API文档,了解具体函数或方法的用法和参数。 - 结合实际项目练习,将jQuery的知识应用到网页交互、动态效果和Ajax通信中,提升开发效率。 以上是对jQuery 1.12.4及其相关资源的...

    js实现json数组分组合并操作示例

    提到的在线工具,如JSON代码检验、美化、格式化工具等,可以帮助开发者在开发过程中验证JSON数据的正确性,格式化代码,以及进行XML与JSON之间的转换,对于调试和优化JSON数据非常有帮助。 7. **JSON操作技巧**: ...

    JSON使用

    https://samueli.iteye.com/blog/225841”表明这是一个在线技术博客的文章,通常这种文章会详细讲解某个主题,包括JSON的基础概念、语法特性、如何在实际项目中使用JSON,以及可能遇到的问题和解决方案。 标签...

    ajax 跨域请求问题 jquery jsonp

    **Ajax跨域请求问题与jQuery JSONP解析** 在Web开发中,Ajax技术被广泛用于实现页面的异步更新,但浏览器的同源策略(Same-Origin Policy)限制了Ajax请求只能向同源(协议、域名、端口均相同)的服务器发送。这在...

    前端项目-jquery.ui-contextmenu.zip

    在`jquery.ui-contextmenu`项目中,我们通常会遇到以下几个关键知识点: 1. **jQuery UI**:jQuery UI库是基于jQuery的,提供了许多可定制的UI组件。它通过CSS样式和JavaScript事件处理来增强HTML元素,使其具有...

Global site tag (gtag.js) - Google Analytics