利用js实现页面跳转,带数据

抽点时间分享个小东西。

利用js来实现页面跳转。

 

结论：

js实现页面跳转，并带数值过去；简答有效的方式就是建立一个临时form，用于数据传输。

起因：系统要搞个操作日志记录。点击查看文件的排行榜，可以点击直接查看。

 

 

系统中的文件分为两种：

• 一种是从其他网站爬过来的文章，将内容（建议存html，当然如果想要统一样式的话就存纯文本，分隔符等也存进去）存入数据库中。查看文件时，将存入的内容之间贴到html相应的位置。

like this：

 效果感觉还可以的。

 

• 还有一种是文件：doc，xlsx，pdf此类。

 

由于文件在不同栏目下，访问地址或者说请求的接口不同。所以我就只记录了访问文件的url；

当初并没有记录此文件是在数据库中还是磁盘文件中，事后发现没必要记录。

 

基本思路：查询数据库，得到排行榜。点击文件，ajax调用接口。

然后

这个时候要考虑的是，我应该怎么判断他返回的是文件还是下载，以及How to do！

 

①、尝试访问

②、观察返回结果

③、建立临时form 或者 打开新窗口展示PDF文件或下载

 

文件a标签，onclick事件

 

function showZXWJ(data1){
    //点击时刷新最新表格的访问量数据
    initTable(1,5);
    $.ajax({
        url: data1,
        success:function(data){
            if(data){
                var dataValue = data.items;
                var str = dataValue[0].content;
                var title = dataValue[0].lawsName;
                //将转移字符，替换为html
                str = str.replace(/\n  /g,"<br/>　　");
                str = str.replace(/\r/g,"");
                str = str.replace(/\n/g,"<br/>");
                str = str.replace(/(^\s*)|(\s*$)/g,'');
                str = "　　" + str;
                var url = <%=basePath%>+'shouyeShowFile.do';
                //建立一个临时表，用于装载ajax请求得到的数据，数据可能很大，所以肯定选的是post
                var form = $("<form></form>").attr("action", url).attr("method", "post");
                form.append($("<input></input>").attr("type", "hidden").attr("name","fileName" ).attr("value", title));
                form.append($("<input></input>").attr("type", "hidden").attr("name","content" ).attr("value", str));
                form.appendTo('body').submit().remove();
            } else {
                window.open(data1);
            }
        }
    });
}

 

先尝试请求，当返回有值（因为系统接口中，所有关于查看下载的接口都没有返回值，所以可以这样判断，或者你可以看返回的结果有没有什么共通性）

时候，就建立临时表单用于传输装载数据。

否则开辟新窗口，下载OR展示。

 

form表单传输访问的接口如下。

@RequestMapping(value="shouyeShowFile.do")
	public String findOne(FileBean fileBean,Model model){
		
		model.addAttribute("vo", fileBean);
		
		return "shouyeFileShow";
	}

 

展示页面，主要代码如下：

<body>
<div class="contentxw" id="viewData" style="">
		<div class="padd">
			<div class="BreadcrumbNav">
				<span
					style="float: right; cursor: pointer; color: #1a72a5; font-size: 30x;"
					onclick="back()"><img src="images/icofh.png" alt=""
					align="center"></span>
			</div>
			<div class="article oneColumn pub_border" id="scrollDiv"
				style="overflow-y: auto; height: 450px;">
				<h1>
					<span id="title" style="font-weight: bold;font-size: 28px;">${vo.fileName}</span>
				</h1>
				<div class="pages-date">
					<span class="fontsj" id="wenHao"></span>
				</div>
				${vo.content}
			</div>
		</div>
	</div>
</body>

 

 

总结：

js实现页面跳转，并带数值过去；简答有效的方式就是建立一个临时form，用于传输数据。

 

 

 

<wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">