关于jsp和js---h5页面（1）

最新推荐文章于 2025-05-19 16:50:30 发布

夏阳_2021

最新推荐文章于 2025-05-19 16:50:30 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： javaWeb相关

本文链接：https://blog.youkuaiyun.com/woaijavaxiayang/article/details/79009259

javaWeb相关专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在SpringMVC框架中，如何通过ModelAndView和@ResponseBody注解返回数据到JSP和H5页面。在jsp中，可以直接通过${}获取model中的键值对，而在js中，Java对象需要转化为JSON字符串才能被接收。此外，还提到了JS和Java中全局变量的不同处理方式：JS全局变量声明时需赋值，而Java全局变量即使未赋值也会保留内存空间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，在springMVC中返回是以modelAndView的形式，将数据封装到model中，此是不用考虑数据格式，一般model中放置键值对的形式，值可以直接为对象本身，此时在jsp中${}可以直接获取

2，在springMVC中如果返回实体，需要加注解@ResponseBody,一般在ajax中常用，此时data.属性可以直接取值

3，在1中如果在js中获得及使用model中的此对象，对象在java中需要转为json字符串的格式，js中才可以接收此对象

4，jsp中常用的方法：

<c:if test="${abc.mediaType==1}">
		<c:forEach items="${abc.mediaList}" var="discoveryMediasitem" end="2">
			<section class="banner" style="background-image: url(${discoveryMediasitem.mediaPath});"></section>
		</c:forEach>
		</c:if>

<c:choose>
<c:when test="${goinApiDynamicInfoVO.constellation==0}">白羊座</c:when>
<c:when test="${goinApiDynamicInfoVO.constellation==1}">金牛座</c:when>
<c:when test="${goinApiDynamicInfoVO.constellation==2}">双子座</c:when>
<c:when test="${goinApiDynamicInfoVO.constellation==3}">巨蟹座</c:when>
<c:when test="${goinApiDynamicInfoVO.constellation==4}">狮子座</c:when>
<c:when test="${goinApiDynamicInfoVO.constellation==5}">处女座</c:when>
<c:when test="${goinApiDynamicInfoVO.constellation==6}">天秤座</c:when>
<c:when test="${goinApiDynamicInfoVO.constellation==7}">天蝎座</c:when>
<c:when test="${goinApiDynamicInfoVO.constellation==8}">射手座</c:when>
<c:when test="${goinApiDynamicInfoVO.constellation==9}">摩羯座</c:when>
<c:when test="${goinApiDynamicInfoVO.constellation==10}">水瓶座</c:when>
<c:when test="${goinApiDynamicInfoVO.constellation==11}">双鱼座</c:when>
<c:otherwise></c:otherwise>
</c:choose>

5,js中常用方法

展开隐藏详情：

<p class="imgInfo">${abc.content}</p>
			<a class="infoBtn" href="javascript:;">展开详情</a>

$(function(){
			var infoH = $('.imgInfo').height();
			if(infoH > 60){
				$('.infoBtn').addClass('show');
				$('.imgInfo').height(60);
			}else{
				$('.infoBtn').addClass('hide');
			}
			//如果没有评论，评论条隐藏
			var commentH = $('#commentContent');
			var commentAll = $('.comment');
			if(commentH.children('li').length==0){
				commentAll.hide();
			}
		})

.dyDetails .imgBox .infoBtn {
  display: block;
  text-align: center;
  margin: 20px auto;
  width: 100px;
  color: #ffd800;
  padding: 8px 15px;
  border: 1px solid #ffd800;
  background: url(../img/icon_03.png) no-repeat 90% center;
  background-size: 15px;
}
.dyDetails .imgBox .infoBtn img {
  width: 15px;
  margin-left: 5px;
}
.dyDetails .imgBox .infoBtn.close {
  background-image: url(../img/icon_04.png);
}

举报 删除 点赞 评论：

<div class="reportBox">
		<c:forEach items="${goinInformTypes}" var="informTypesItem">
			<a class="waves-effect waves-button" href="javascript:;" onclick="reportDynamic('${informTypesItem.id}')">${informTypesItem.description}</a>
		</c:forEach>
		<a class="cancel waves-effect waves-button" style="color: red;"
			href="javascript:;">取消</a>
	</div>
	<!-- 如果是发布动态者点三个点则弹出删除动态 -->
	<div class="deleteDynamicBox">
		<a class="waves-effect waves-button" href="javascript:;" onclick="deleteDynamic()">删除动态</a>
		<a class="cancel waves-effect waves-button" style="color: red;"
			href="javascript:;" onclick="cancelDeleteDynamic()">取消</a>
	</div>
	<!-- 删除回复或评论 -->
	<div class="deleteBox">
		<a class="waves-effect waves-button" href="javascript:;"
			onclick="deleteReply()">删除回复</a> <a
			class="cancel waves-effect waves-button" href="javascript:;"
			onclick="cancelDeleteReply()">取消</a>
	</div>
	<div class="wrapper-black"></div>
		<div class="swiper-container">
			<div class="swiper-wrapper">
			<c:if test="${goinApiDynamicInfoVO.mediaType == 1 }">
				<c:forEach items="${goinApiDynamicInfoVO.dynamicMedias}"
					var="dynamicMediasitem" end="8">
						<div class="swiper-slide"><div class="swiper-zoom-container"><img src="${dynamicMediasitem.mediaPath}"/></div></div>
				</c:forEach>
			</c:if>
			</div>
		</div>
	<script type="text/javascript" src="static/goin/js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="static/goin/js/waves.min.js"></script>
	<script type="text/javascript" src="static/goin/js/layer/layer.js"></script>
	<script type="text/javascript" src="static/goin/js/swiper/swiper.min.js" ></script>
	<script type="text/javascript" src="static/goin/js/common.js"></script>
	<script type="text/javascript" src="static/timeago/timeago.js"></script>
	<script type="text/javascript">
 	var ifSupport ='0';
 	var test ='123';
 	//评论id
 	var $commentId;
 	//评论者id
 	var $commenterId;
 	//回复类型，0为对评论回复，1为对回复的回复
 	var $replyType;
 	//回复id，只有对回复进行回复的时候存在
 	var $replyId;
 	//来自谁的回复
 	var $fromUid;
 	//获取词条p标签，用于插入回复内容
 	var $nReplyText;
 	//此条回复为谁回复;
 	var $fromNickname;
 	//此条回复为向谁回复;
 	var $toUidNickname;
 	//评论的li标签
 	var $commentText;
 	//取评论标签的全局变量
 	var $nReplyTextForReply;
 	//对评论的回复全局变量
 	var $replyCommentText;
 	//回复评论的rep-list变量
 	var $deleteCommentText;
	//刷新此页面，加载的函数
	 $(document).ready(
			function(){
				$("#supportImg").attr("src","static/goin/img/icon_07.png");
				 var mySupport=${myselfSupport};
					if(mySupport!=0){
						$("#supportImg").attr("src","static/goin/img/icon_08.png");
						ifSupport ='1';
					} 
			});
		//喜欢函数
		function support(userId){
			//发送异步请求
			//图标更新
			//喜欢
			if(ifSupport=='0'){
				$.ajax({
					url : "${ctx}/goin/goinApiDynamic/interface/SupportOrNot",
			    data:  {userId:userId,dynamicId:"${goinApiDynamicInfoVO.id}",type:"0"},  
				success : function(data) {
					//alert(data);
				}
			});
				$("#supportImg").attr("src","static/goin/img/icon_08.png");
	  			ifSupport='1';
  	  		var lnum = $('#likeNum').text();
  	  		var i = parseInt(lnum);
  	  		i = i+1;
  	  		$('#likeNum').text(i);
			}else{
			//不喜欢
				$.ajax({
					url : "${ctx}/goin/goinApiDynamic/interface/SupportOrNot",
			    data:  {userId:userId,dynamicId:"${goinApiDynamicInfoVO.id}",type:"1"},  
				success : function(data) {
				
				}
			});
				$("#supportImg").attr("src","static/goin/img/icon_07.png");
	  			ifSupport='0';
  	  		var lnum = $('#likeNum').text();
  	  		var i = parseInt(lnum);
  	  		i = i-1;
  	  		$('#likeNum').text(i);
			}
		}
 		//评论函数
  		function comment(type){
  			var commentContent = $("#myComment").val();
  			//动态发布者不可以给自己评论
  			if(commentContent==""|| ('${currentUserId}'== '${goinApiDynamicInfoVO.issueUserId}'&& $commentId==null) ){
  				//alert("请输入内容后再提交！")
  				if(commentContent==""){
  					layer.msg('请输入内容后再提交！');
  				}else{
  					layer.msg('主人不可评论！');
  				}
  				clearVariable();
  				$(" #myComment").val("");
  	  			$("#myComment").attr('placeholder','在这里说点什么吧');
  				return;
  			}
  			//对评论或者回复进行回复
  			if($commentId!=null){
  				$.ajax({
  	  				contentType: "application/x-www-form-urlencoded; charset=UTF-8",
  					url : "${ctx}/goin/goinApiDynamic/interface/Comment/addReply",
  				    data:  {userId:"${currentUserId}",commentId:$commentId,content:commentContent,fromUid:$fromUid,replyType:$replyType,replyId:$replyId,myNickname:$toUidNickname,fromNickname:$fromNickname},  
  				    //dataType : 'json',
  				    type : 'POST',
  					success : function(data) {
  						//alert(data);
  						//debugger;
  						//清空全局变量
  						
  						//对于所点击的p标签插入数据,返回的data为这条回复的id,判断用户是主人还是客人
  						 if('${currentUserId}'=='${goinApiDynamicInfoVO.issueUserId}'){
  							 if(null!=$nReplyTextForReply){
  								 //对回复的回复
  								$nReplyTextForReply.append("<a id="+'replyForComment'+" href="+'javascript:;'+" onclick="+
  			  							'"replyForComment('+"'"+$commentId+"'"+','+"'"+"${currentUserId}"+"'"+','+null+",'1',"+"'"+data+"'"+','+"'"+'${goinApiDynamicInfoVO.nickname}'+"'"+','+null+')">'+
  			  							        '<p>'+
  												'<span class="me">主人回复</span>:'+commentContent+
  												'</p></a>') 
  							 }else{
  								 //对评论的回复
  								$replyCommentText.append("<div class="+'rep-list'+">"+
  										"<a id="+'replyForComment'+" href="+'javascript:;'+" onclick="+
  			  							'"replyForComment('+"'"+$commentId+"'"+','+"'"+"${currentUserId}"+"'"+','+null+",'1',"+"'"+data+"'"+','+"'"+'${goinApiDynamicInfoVO.nickname}'+"'"+','+null+')">'+
  			  							        '<p>'+
  												'<span class="me">主人回复</span>:'+commentContent+
  												'</p></a>'+
  								"</div>")
  							 }
  							
  						}else{
  							$nReplyTextForReply.append("<a id="+'replyForComment'+" href="+'javascript:;'+" onclick="+
  							'"replyForComment('+"'"+$commentId+"'"+','+"'"+"${currentUserId}"+"'"+','+null+",'1',"+"'"+data+"'"+','+"'"+'${goinApiDynamicInfoVO.nickname}'+"'"+','+null+')">'+
  									'<p>'+
  									'<span>'+$toUidNickname+'</span>:'+commentContent+
  									'</p></a>')
  							
  						} 
  						//$nReplyText.append('=======')
  						/* $(" #myComment").val("");
  			  			$("#myComment").attr('placeholder','在这里说点什么吧'); */
  						clearVariable();	
  					}
  				});
  			}else{
  				//普通的评论
  				$.ajax({
  	  				contentType: "application/x-www-form-urlencoded; charset=UTF-8",
  					url : "${ctx}/goin/goinApiDynamic/interface/Comment",
  				    data:  {userId:"${currentUserId}",dynamicId:"${goinApiDynamicInfoVO.id}",content:commentContent,type:type},  
  				    dataType : 'json',
  				    type : 'POST',
  					success : function(data) {
  						//alert(data);
  						 $('#commentContent').append('<li class="flex">'+
  								'<div class="rep-user"><a href="findUserInfo?userId=${goinA.commenterId}"><img src="'+data.photoPath+'"height="40px"/></a></div>'+
  								'<div class="text-box">'+
  									'<p class="user-name">'+data.nickname+'<time> 刚刚</time></p>'+
  									'<a href="javascript:;" onclick='+
  									    '"replyForComment('+"'"+data.id+"'"+','+"'"+"${currentUserId}"+"'"+','+null+",'0',"+null+','+"'"+'${goinApiDynamicInfoVO.nickname}'+"'"+','+null+')">'+
  									'<p class="user-text">'+data.content+'</p></a>'+
  							'</div>'+
  							'</li>') 
  							
  							clearVariable();
  					}
  				});
  				var lnum = $('#comentCount').text();
  	  	  		var i = parseInt(lnum);
  	  	  		i = i+1;
  	  	  		$('#comentCount').text(i);
  	  	 
  			}
  			$('.comment').show();
  			$(" #myComment").val("");
  			$("#myComment").attr('placeholder','在这里说点什么吧');
  		}
 		
 		//回复的a对象
  		$(document).on("click",'.rep-list a',function(){
  			$nReplyText = $(this);
  		})
	    //回复的对象
	    $(document).on("click",'.rep-list',function(){
	    	$nReplyTextForReply = $(this);
  		})
	    //评论的li对象 
	    $(document).on("click",'.flex',function(){
	    	$commentText = $(this);
  		})
  		//评论的li对象 
	    $(document).on("click",'.flex .text-box',function(){
	    	$replyCommentText = $(this);
  		}) 
  		
  		//回复评论的rep-list 
	    $(document).on("click",'.flex .text-box .rep-list',function(){
	    	$deleteCommentText = $(this);
  		}) 
  		
		//回复函数
		function replyForComment(commentId,fromUid,commenterId,replyType,replyId,fromNickname,toUidNickname){
		//	alert(commentId,fromUid,commenterId,replyType,replyId,fromNickname,toUidNickname)
			//test='789';
			//放置全局变量的值
			//评论id
		 	$commentId=commentId;
			//来自谁的评论
		 	$fromUid = fromUid;
		 	//评论者id
		 	 $commenterId=commenterId;
		 	//回复类型，0为对评论回复，1为对回复的回复
		 	 $replyType=replyType;
		 	//回复id，只有对回复进行回复的时候存在
		 	 $replyId=replyId;
		  	//此条回复为谁回复;
		  	 $fromNickname = fromNickname;
		  	//此条回复为向谁回复;
		     $toUidNickname = toUidNickname;
		 	//判断当前用户是否是评论或回复的发起者,则弹出是否删除
		 	 if('${currentUserId}'==fromUid){
		 		deleteCommentOrReply();
		 	} else if('${currentUserId}'==commenterId || '${currentUserId}'== '${goinApiDynamicInfoVO.issueUserId}'){
		 		 //获取点击事件
				$("#myComment").attr('placeholder','对'+fromNickname+'进行回复');
				$("#myComment").focus();
		 	} 
		}
		
		//删除评论弹窗
		function deleteCommentOrReply(){
			$('.deleteBox').removeClass('moveDown');
			$('.deleteBox').addClass('show');;
			$('.deleteBox').addClass('moveUp');
			$('.wrapper-black').addClass('show');
		}
		
		//删除评论或者回复，后台请求，页面变动
		function deleteReply(){
		//	alert(test)
			//调用ajax请求后台
			//debugger;
		   $.ajax({
  				contentType: "application/x-www-form-urlencoded; charset=UTF-8",
				url : "${ctx}/goin/goinApiDynamic/interface/Comment/deleteCommentOrReply",
			    data:  {userId:"${currentUserId}",replyId:$replyId,commentId:$commentId},  
			    dataType : 'json',
			    type : 'POST',
				success : function(data) {
					//debugger;
					//判断是删除评论还是回复
					if($replyId!=null){
						//说明删除回复
					//	debugger;
						$nReplyText.remove();
						if($deleteCommentText.children('a').length==1){
							$deleteCommentText.remove();
						}
						
					}else{
					//	debugger;
						//说明删除评论,并减少评论数
						$commentText.remove();
						var lnum = $('#comentCount').text();
		  	  	  		var i = parseInt(lnum);
		  	  	  		i = i-1;
		  	  	  		$('#comentCount').text(i);
		  	  	        //如果没有评论，评论条隐藏
		  				var commentH = $('#commentContent');
		  				var commentAll = $('.comment');
		  				if(commentH.children('li').length==0){
		  					commentAll.hide();
		  				}
					}
					clearVariable();
				}
			});
		   cancelDeleteReply();
		}
		//取消删除回复
		function cancelDeleteReply(){
		$('.deleteBox').removeClass('moveUp');
			$('.deleteBox').addClass('moveDown');
			$('.deleteBox').removeClass('show');
			$('.wrapper-black').removeClass('show')
		}
		
		function clearVariable(){
			 //评论id
  	  	 	$commentId=null;
  	  	 	//评论者id
  	  	   $commenterId=null;
  	  	 	//回复类型，0为对评论回复，1为对回复的回复
  	  	 	$replyType=null;
  	  	 	//回复id，只有对回复进行回复的时候存在
  	  	 	$replyId=null;
  	  	 	//来自谁的回复
  	  	    $fromUid=null;
  	  	 	//获取词条p标签，用于插入回复内容
  	  	 	$nReplyText=null;
  	  	 	//此条回复为谁回复;
  	  	 	$fromNickname=null;
  	  	 	//此条回复为向谁回复;
  	  	 	$toUidNickname=null;
  	  	 	//评论的li标签
  	  	 	$commentText=null;
  	  	 	//插入的回复标签
  	  	    $nReplyTextForReply =null;
  	  	 	//删除的标签
  	     	$nReplyText=null;
  	  	 	//对评论回复的标签
  	     	$replyCommentText=null;
  	  		//删除评论的回复中rep-list
  	     	$deleteCommentText=null;
		}
		//举报函数：
		function reportDynamic(informId){
			//alert(informId)
			$.ajax({
  				contentType: "application/x-www-form-urlencoded; charset=UTF-8",
				url : "${ctx}/goin/goinApiDynamic/interface/reportDynamic",
			    data:  {userId:"${currentUserId}",informId:informId,dynamicId:"${goinApiDynamicInfoVO.id}"},  
			    type : 'POST',
				success : function(data) {
					//debugger;
					layer.msg('已举报该内容');
				}
			});
		}
		//判断是删除动态还是举报动态
		$('.report a').on('click',function(){
			if('${currentUserId}' == '${goinApiDynamicInfoVO.issueUserId}'){
				//则弹出删除框
				$('.deleteDynamicBox').removeClass('moveDown');
				$('.deleteDynamicBox').addClass('show');;
				$('.deleteDynamicBox').addClass('moveUp');
				$('.wrapper-black').addClass('show');
			}else{
				//弹出举报框
				$('.reportBox').removeClass('moveDown');
				$('.reportBox').addClass('show');;
				$('.reportBox').addClass('moveUp');
				$('.wrapper-black').addClass('show');
			}
		})
			//取消删除动态
		function cancelDeleteDynamic(){
		$('.deleteDynamicBox').removeClass('moveUp');
			$('.deleteDynamicBox').addClass('moveDown');
			$('.deleteDynamicBox').removeClass('show');
			$('.wrapper-black').removeClass('show')
		}
		//删除动态函数
		function deleteDynamic(){
			 $.ajax({
  				contentType: "application/x-www-form-urlencoded; charset=UTF-8",
				url : "${ctx}/goin/goinApiDynamic/interface/deleteDynamic",
			    data:  {userId:"${currentUserId}",dynamicId:"${goinApiDynamicInfoVO.id}"},  
			    type : 'POST',
				success : function(data) {
					debugger;
					layer.msg('已删除此动态');
					//页面返回
					window.location.href="dynamic_detail_back"; 
				}
			});
			cancelDeleteDynamic();
		}

主要的js方法：

js与java不同，js声明全局变量需要赋值，否则方法释放后，全局变量就没有值了，但是java可以不赋值，即使方法释放，全局变量仍保存值，可以认为js声明全局变量时没有赋予内存空间，但是java有赋予内存空间

获取点击事件的对象//回复评论的rep-list 
	    $(document).on("click",'.flex .text-box .rep-list',function(){
	    	$deleteCommentText = $(this);
  		}) 
a标签绑定点击事件：
<a class="waves-effect waves-button" href="javascript:;"
			onclick="deleteReply()">删除回复</a>
获取数据自增：
var lnum = $('#comentCount').text();
  	  	  		var i = parseInt(lnum);
  	  	  		i = i+1;
  	  	  		$('#comentCount').text(i);
ajax,在返回值为字符串非对象时不要加json:
$.ajax({
  	  			contentType: "application/x-www-form-urlencoded; charset=UTF-8",
  				url : "${ctx}/goin/goinApiDynamic/interface/Comment/addReply",
  			        data:  {userId:"${currentUserId}",commentId:$commentId,content:commentContent,fromUid:$fromUid,replyType:$replyType,replyId:$replyId,myNickname:$toUidNickname,fromNickname:$fromNickname},  
  				    //dataType : 'json',
  				    type : 'POST',

a标签按钮置灰：
$('#joinAct').attr('href','javascript:return false;'); 
					$('#joinAct').attr('style','opacity: 0.2;'); 
					$('#joinAct').text('已报名');
在指定元素的前后加元素：
var count = $('.headerlist').children('li').length;
						if(count<4){
							$(".headerlist li").eq(count-1).before('<li><img src="'+data+'" width="30px" height="30px"/></li>');
						}
在元素的内部加元素：
$nReplyTextForReply.append("<a id="+'replyForComment'+" href="+'javascript:;'+" onclick="+
  							'"replyForComment('+"'"+$commentId+"'"+','+"'"+"${currentUserId}"+"'"+','+null+",'1',"+"'"+data+"'"+','+"'"+'${goinApiDynamicInfoVO.nickname}'+"'"+','+null+')">'+
  									'<p>'+
  									'<span>'+$toUidNickname+'</span>:'+commentContent+
  									'</p></a>')
提示信息：
layer.msg('请输入内容后再提交！');

success : function(data) {})

日期格式化：<time>
<fmt:formatDate
	value="${goinApiDynamicCommentAndReplyVOsItem.createDate}" pattern="yyyy/MM/dd" />
</time>