有一个超链接,实现的功能是下载文件,href提交的地址就是处理这个下载请求的,同时还有一个需求就是在下载时,统计下载次数,因此给这个超链接添加了onclick方法进行异步请求刷新得,每点击一次就+1。
<table class="tblShow"> <tr> <th>文件名称</th> <th>上传时间</th> <th>下载次数</th> <th>文件操作</th> </tr> <c:forEach items="${pageBean.files }" var="file"> <tr> <td>${file.framename }</td> <td>${file.uploadtime }</td> <td id="cnt">${file.cnt }</td> <td><a id="download" onclick="refresh(${file.fid })" href='<c:url value="/MyFileServlet?method=download&id=${file.fid }" />'>下载 </a> </td> </tr> </c:forEach> </table>
function refresh(fid) { utils.ajax({ method : "POST",//请求方式 asyn:true,//异步请求 url : "<c:url value='/MyFileServlet' />",//请求url params : "method=refresh&fid=" + fid,//请求体 type : "json",//返回值是json callback : function(data) {//回调函数 var cnt = document.getElementById("cnt");
cnt.innerHTML = data.cnt;//更新下载次数 } }); return false; }
(function(w) { w.utils = { "ajax" : function(request) { var xmlHttp = createXMLHttpRequest();//创建异步对象 if (!request.method) { request.method = "GET";// 请求方式默认为get方式 } if (!request.asyn) { request.asyn = "true";// 默认为异步请求 } xmlHttp.open(request.method, request.url, request.asyn);// 连接服务器 if (request.method && request.method.toUpperCase() == "POST") { xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); } xmlHttp.send(request.params);// 发送请求 xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { var data; if (!request.type) { data = xmlHttp.responseText; } else if (request.type.toUpperCase() == "TEXT") { data = xmlHttp.responseText; } else if (request.type.toUpperCase() == "JSON") { data = eval("(" + xmlHttp.responseText + ")"); } else if (request.type.toUpperCase() == "XML") { data = xmlHttp.responseXML; } request.callback(data); } ; }; } }; })(window);
在做下载测试时,我下载的是一个图片,图片能正常下载,但是下载次数无法更新,在火狐中异步请求直接没有响应,就是提示错误。。也不说错误原因
在谷歌中也是能正常下载,但是也是无法刷新次数,提示是...
有大神知道这是什么问题么?将两个请求分开,都是可以实现功能的
先把a标签的target设置成_blank试试看。
可以实现功能了!请问能简单的说下这个原理么?谢谢啦!
@陌影: 把a标签的href设置成一个网页的链接,你再点击看一下效果就明白了。
我也遇到了这个问题,刚解决, 顺便提供一种方法,希望对大家有帮助。
需要用到两个a 标签,一个显示作为 onclick 触发事件,一个隐藏 作为跳转页面 。
<a id='realHref"+id+"' style='display:none' href='"+row.link+"' target='_blank'>#</a>
<a href='javascript:void(0)' onclick='viewArticle("+id+")' class='btn btn-xs green btn-info' title='阅读全文' target='_blank'>阅读全文</a>
document.getElementById("realHref"+id).click();
// 触发要跳转的 a 标签
function viewArticle(id) {
document.getElementById("realHref"+id).click();
//$("#realHref"+id).trigger('click');
}
注意:JQuery好像不行,原生js 可以