当前页面,就是AJAX下载实例,用户体验比较好。以下说说实现思路,希望对您有所帮助!

想办法获取到下载的真实路径,拿本站为例,因为本站使用了大部分的ajax,所以,有些步骤可以略过,这里只讲方法!

第一步:先请求/e/DownSys/DownSoft/?classid=1&id=1&pathid=0 这个地址,得到下载页面。

然后在下载页面中,有“点击下载”按钮字样。

第二步:提取“点击下载”的a链接的href值,这个值为真实的下载地址。

第三步:获取到真实的下载地址之后,那么就好办了。接下来就要想办法请求这个真实的下载地址,在页面中增加一个<iframe></iframe>然后将<iframe>的src属性,设置为 真实的下载地址,然后,将<iframe>隐藏,这样,就OK了,很简单的就是现实了AJAX下载。

以下是本站的代码片段带注释,应用到你的项目中可能还需要修改

<script>
$(function(){
    $(\'#downpath a\').click(function(){ //点击下载链接
        var url = $(this).attr(\'href\'); //提取下载地址(也就是a标签的href值)
        $.get(url,{},function(data){ //ajax get方式请求这个下载地址,会返回一个页面
            var data = data.toString();  //将页面转化为字符串
            if(data.indexOf(\'您还没登录\') != -1){  //检索返回来的字符串中是否包含"您还没登录"字样,如果没有检索到,那么就弹出登录框
                /*登陆弹框 开始*/
                $.layer({
                    type : 2,
                    title : \'Task3.com - 通行证\',
                    iframe : {src : \'/alert_login.html\'},
                    area : [\'500px\' , \'250px\'],
                    offset : [\'100px\',\'\']
                });
                /*登陆弹框 结束*/
            }else if(data.indexOf(\'无法下载此软件\') != -1){ //检索返回来的字符串中是否包含"无法下载此软件"字样,如果没有检索到,那么就弹出提示框
                /*提示框 开始*/
                $.layer({
                    area : [\'auto\',\'auto\'],
                    title : false,
                    time : 3,
                    dialog : {msg:data}
                                                                                                  
                });
                /*提示框 结束*/
            }else if(data.indexOf(\'点击下载\') != -1){  //检索返回来的字符串中是否包含"点击下载"字样,如果没有检索到,那么就弹出提示框
                var downurl = $(\'a\',data).attr(\'href\'); //提取真实的下载地址
                downurl = \'[!-------news.url--]e/\'+downurl.replace(\'../../\',\'\'); //处理真实的下载地址
                $(\'#ajax_down\').html(\'<iframe src="\'+downurl+\'" style="display:none"></iframe>\'); //向当前页面写入<iframe>
            }
        })
        return false;  //阻止页面跳转
    })
})
</script>

 

然后将<div id="ajax_down"></div>html代码写在页面任意地方。

点赞(0) 打赏

评论列表 共有 0 条评论

评论功能已关闭

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部