首页 新闻 会员 周边 捐助

a标签同时向服务器发送异步请求和href请求

0
悬赏园豆:15 [待解决问题]

有一个超链接,实现的功能是下载文件,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);

 

 

在做下载测试时,我下载的是一个图片,图片能正常下载,但是下载次数无法更新,在火狐中异步请求直接没有响应,就是提示错误。。也不说错误原因

在谷歌中也是能正常下载,但是也是无法刷新次数,提示是...

有大神知道这是什么问题么?将两个请求分开,都是可以实现功能的

陌影的主页 陌影 | 初学一级 | 园豆:152
提问于:2016-02-09 00:17
< >
分享
所有回答(2)
-2

先把a标签的target设置成_blank试试看。

I,Robot | 园豆:9783 (大侠五级) | 2016-02-09 14:33

可以实现功能了!请问能简单的说下这个原理么?谢谢啦!

支持(0) 反对(0) 陌影 | 园豆:152 (初学一级) | 2016-02-09 14:44

@陌影: 把a标签的href设置成一个网页的链接,你再点击看一下效果就明白了。

支持(0) 反对(0) I,Robot | 园豆:9783 (大侠五级) | 2016-02-10 11:03
0

我也遇到了这个问题,刚解决, 顺便提供一种方法,希望对大家有帮助。

需要用到两个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 可以

ranying | 园豆:202 (菜鸟二级) | 2018-08-20 17:40
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册