Long Bro博客——查看其它Long Bro影院
Java Web视频网站开发:ajax结合js实现tab切换选项卡效果

  作者:赵成龙  发布时间:2018-11-15 21:37:49  所属类别:IT技术  浏览量:583



 

通过前几篇博客,我们会发现,Ajax确实很强大,为我们的网站开发实现了很多方便的功能。今天,借篇首来普及一下Ajax。

Ajax(全称Asynchronous JavaScript and XML),是几个老技术的综合,包含

(1)异步数据获取技术,使用XMLHTTPRequest

(2)基于标准的表示技术,使用XHTML和css

(3)动态显示和交互技术,使用DOM(Document object Model文档对象模型)

(4)数据互换和操作技术,使用XML与XSTL

(5)JavaScript,将以上技术融合在一起

5个部分。其中,异步获取数据技术是所有技术的基础。它在1998年前后得到了应用,也算是一个经久不衰的老技术了。2005年初,ajax被大众所接受。Google在它著名的交互应用程序中使用了异步通信。

接下来叙述本篇博客的主题:用Ajax结合js实现一个伪tab的效果,开局先放几张图。

LongBro博客

LongBro博客

LongBro博客

以上图中主要实现的功能是,当鼠标放到电视剧上时,用ajax异步加载电视剧的排行榜并显示;其他同理。这样形成了一个平时常用的tab切换选项卡的效果。

1.首先,在jsp中添加HTML代码,添加四个影视类型,以及一个放置排行榜前十的影视的地方,如下所示。并对影视类型添加onmouseover事件,传入类型参数。

LongBro博客

  2.编写js代码,首先编写qiehuan函数,然后使用window.onload=qiehuan('dianshi');来使页面初次加载时加载电视剧的排行榜

/**
* 根据类型异步加载其下的影视榜,并显示到指定位置
* @param type
*/
function qiehuan(type){
var u="/spiderank.jsp?type="+type;
xmlHttp.open("post",u,true);
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.getElementById("video").innerHTML=xmlHttp.responseText;
}
};
xmlHttp.send();
//当前绿色显示,其他黑色显示
var ts=new Array("dianshi","dianying","zongyi","dongman");
for(i=0;i<4;i++){
//alert("\""+ts[i]+"");
if(type.equal(ts[i])){
alert(ts[i]);
//document.getElementById(ts[i]).style.color="green";
}else{
//document.getElementById(ts[i]).style.color="black";
}
}

}
window.onload=qiehuan('dianshi');

  3.编写另一jsp代码,该jsp代码根据js中ajax传来的影视类型加载对应排行榜,输出对应排行榜,在js中通过ajax将此排行榜显示至指定位置。其中调用了一个自己定义的Java方法ArrayList<VideoObj> vos=Movie.getdata(main);
,该方法爬取所有类型排行榜并返回,此处不再列出,如有需要,可在下方评论出说明,或至本人视频网站吐槽墙说明。  

  <%

String type=request.getParameter("type");//爬取的类型
String main="https://www.360kan.com";
ArrayList<VideoObj> vos=Movie.getdata(main);
System.out.println(vos.size());
int begin=0;//开始序号
int end=0;//结束序号
int j=0;//排行榜中序号
if(type.equals("dianshi")){
begin=0;
end=10;
}else if(type.equals("zongyi")){
begin=10;
end=20;
}else if(type.equals("dianying")){
begin=20;
end=30;
}else{
begin=30;
end=40;
}
for(int i=begin;i<end;i++){
VideoObj vo=vos.get(i);
int pai=vo.getPai();
String sp="";
String name=vo.getName();
String href=vo.getHref();
String pn=vo.getPn();
if(name.length()>6){
name=name.substring(0,5)+"...";
}
//获取播放链接
String purl=Movie.getPUrl(href);
if(j==0){
sp="<first>"+(j+1)+"</first>";
}else if(j==1){
sp="<second>"+(j+1)+"</second>";
}else if(j==2){
sp="<third>"+(j+1)+"</third>";
}else{
sp="<other>"+(j+1)+"</other>";
}
out.write(sp+" <a href=\"/player.jsp?type="+type+"&url="+href+"\" target='_blank'>"+name+"</a> <font>"+vo.getPn()+"</font><br>");
j++;
}
%>

  代码列到这里功能也就实现了,感谢大家的阅读,欢迎大家访问本人视频网站使用吐槽墙功能及音乐网站。我在这儿等着你们。  





本文出自LongBro博客,如需转载请注明出处。
本文链接:http://www.longqcloud.cn/blogs/62.html
上一篇:JavaWeb视频网站开发:实现小喇叭功能
下一篇:JavaWeb视频网站开发:Ajax实现异步分批加载数据




如果你觉得这篇文章对你有用,欢迎 打赏(打赏记录)

打赏多少,你高兴就行,谢谢你对Long Bro这小子的支持  ^-^

来自:219.157.79.110的评论

..

2018-05-23 12:56:16


来自:122.238.173.127的评论

java 开发的还是很强大的了

2018-11-19 15:21:44


来自:111.193.15.168的评论

http://www.google-store.cn

2018-12-06 07:52:51