SpringBoot踩坑指南（二）：超链接--html链接传值及在新html取值和显示上一步操作封装的属性信息

最新推荐文章于 2024-05-20 16:04:00 发布

FromNowOnUntilTheEnd

最新推荐文章于 2024-05-20 16:04:00 发布

阅读量5.1k

点赞数 1

分类专栏： SpringBoot 文章标签： html链接传值在新html取上一html传过来的值

本文链接：https://blog.csdn.net/qq_36688143/article/details/79462757

版权

SpringBoot 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

SpringBoot踩坑指南（一）：超链接--不能不经过请求直接跳转到新的html及a标签传值点击打开链接

一、html链接传值

注意：①需要把传的值通过字符串拼接，不能直接写成"servlet/TestServlet?name_user=aaa&name_pwd=bbb" 这种形式

②解决中文乱码问题：原传值的html中encodeURI(url)，新的html中decodeURI(location.href)解码

                  success:function(msg){
			 console.log(msg);
			 //成功
			 if (msg.code = "100") {
				//此处拼接内容
				 url = "showJustArticle.html?id="+msg.map.article.id+
				       "&title="+msg.map.article.title+"&content="+msg.map.article.content+
				       "&userId="+msg.map.article.userId
		         window.location.href = encodeURI(url);
			 } else {
				  alert("发表失败！");
		     }
		  },

二、在新html取上一html传过来的值及显示上一步操作封装的属性信息（显示刚才发表的文章）

好处：不需要使用session来存上一步封装的信息，因为session是存储特定用户会话所需的属性及配置信息

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示刚才发表的文章</title>
<script type="text/javascript"
	src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="/js/common/bootstrap.min.js"></script>
<script type="text/javascript">
  /**
   * 获取参数的键值对对象。
   * @returns {Object}
   */
   var getParam = function () {
       try{
    	   	//遍历获得刚刚传过来的值
			var url = decodeURI(location.href);
			var result = url.split("?")[1];
			var keyValue = result.split("&");
			var obj = {};
			//保存刚才的值的数组
			var save = {};
			for (var i = 0; i < keyValue.length; i++) {
				var item = keyValue[i].split("=");
				obj[item[0]] = item[1];
				save[i] = obj[item[0]];
			}
			
			//把值拼接到html中
			$('#id').text("id：" + save[0]);
			$('#title').text("标题：" + save[1]);
			$('#content').text("内容：" + save[2]);
			$('#userId').text("userId：" + save[3]);
			return obj;
		} catch (e) {
			console.warn("There has no param value!");
		}
	};
	
	/**
	 * 页面加载完毕打印键值对对象
	 */
	window.onload = function() {
		//控制台打印传来的值
		console.log(getParam());
	}
</script>
</head>
<body>
	<div id="id" class="idArticle"></div>
	<p></p>
	<div id="title" class="titleArticle"></div>
	<p></p>
	<div id="content" class="contentArticle"></div>
	<p></p>
	<div id="userId" class="userIdArticle"></div>

	<p>
		<button type="button" id="comment" >点击评论</button>
	</p>

</body>
</html>

FromNowOnUntilTheEnd

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot踩坑指南（二）：超链接--html链接传值及在新html取值和显示上一步操作封装的属性信息

SpringBoot踩坑指南（一）：超链接--不能不经过请求直接跳转到新的html及a标签传值点击打开链接一、html链接传值注意：①需要把传的值通过字符串拼接，不能直接写成"servlet/TestServlet?name_user=aaa&amp;name_pwd=bbb" 这种形式②解决中文乱码问题：原传值的html中encodeURI(url)，新的html中decodeURI(loca...
复制链接

扫一扫