视频网站开发：Ajax异步实现已登录用户收藏视频的功能

谁践踏了优雅 2022-04-17 20:54 219阅读 0赞

已登录用户收藏视频的功能是各大影视网站都具备的一项功能，也叫做加入看单或加入我喜欢。这一项功能主要是为了方便已经登录的用户可以收藏自己喜欢的视频，在想看的时候可以直接到自己的个人界面中观看这些自己收藏过的视频，极大地避免了用户因忘记视频名但是想知道而冥思苦想不可得的问题。

在近一个月前为自己的[553影院][553]添加了注册登录功能后，我又根据这个登录功能相继添加了许多大型视频网站拥有的功能，这些功能一般是在登陆后才能操作的，因为要向数据库存储你个人在网站上的行为信息，就必须要有对应的你的账号。比如发表对影视的带表情的评论回复功能，记录网站的访问日志功能，存储用户的登录日志功能，记录用户的搜索记录功能，记录用户的播放记录功能，实时小喇叭广播功能.....

这篇博客我就已登录用户收藏视频这一功能的实现来展开叙述。。。

实现这一功能的方法有很多，但是我还是感觉用Ajax异步收藏是个比较不错的方法，因为Ajax本身就是无需刷新浏览器界面就可以执行想要达到的效果，可以为用户带来较好的体验。实现Ajax异步收藏主要的步骤有两个，第一个是编写js代码，异步向收藏视频的类或Servlet发送传去的信息，以下是js代码

//Ajax异步收藏视频
    function sc(nick,title,url,type,img){//用户名，视频名，链接，类型，图片
       	var etitle=encodeURI(encodeURI(title));//需将中文视频名二次编码方可异步通信
    	var xmlHttp=false;
       	if(window.XMLHttpRequest){//搜狗浏览器(Mozilla)
       		xmlHttp=new XMLHttpRequest();
       	}else if(window.ActiveXObject){//QQ浏览器（IE)
           	xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
       	}
       	var url="/Store?url="+url+"&title="+etitle+"&type="+type+"&img="+img;
    	xmlHttp.open("post",url,true);
    	if(nick==""){
    		alert("请先登录！");
    		window.open("login.jsp");
    	}else{
        	xmlHttp.send();
    		alert("收藏成功-"+title);
    	}
    }

第二步是编写这个Servlet，对Ajax传来的数据进行处理（比如存入数据库）

response.setContentType("text/html");
    request.setCharacterEncoding("utf-8");
    String url=request.getParameter("url");//要收藏的视频的链接
    String title=request.getParameter("title");//要收藏的视频名
    title=URLDecoder.decode(title,"utf-8");
    String type=request.getParameter("type");//要收藏的视频的类型
    String img=request.getParameter("img");//要收藏的视频的图片
    Cookie[] cookies=request.getCookies();
    String nick="";//收藏者
    for(int i=0;cookies!=null&&i<cookies.length;i++){
    	if(cookies[i].getName().equals("user")){
    		nick=cookies[i].getValue().toString();
    	    nick=URLDecoder.decode(nick, "utf-8");
    	}
    }
    String time=SqlUtil.time();
    String query="select * from store where s_User='"+nick+"' and s_Url='"+url+"'";
    String insert="insert into store(s_User,s_Url,s_Vname,s_Path,s_Type,s_Time) "
    				+ "values('"+nick+"','"+url+"','"+title+"','"+img+"','"+type+"','"+time+"')";
    System.out.println(insert);
    UtilDao.addStore(query, insert);

以上代码尾部的一句是我在数据库实现类中定义的一个方法，它结合两个SQL语句执行的操作就是判断数据库中是否有该用户收藏该视频的记录，若没有，则执行插入操作，插入这条记录，反之则不添加。

/**
     * 6.添加收藏，如果库中已有该人对该视频的收藏，则返回，反之添加
     * @param query
     * @param add
     */
    public static void addStore(String query,String add){
    	try {
    		Class.forName(SqlUtil.driver);
    		con=DriverManager.getConnection(SqlUtil.url,SqlUtil.user,SqlUtil.pass);
    		st=con.createStatement();
    		rs=st.executeQuery(query);
    		if(rs.next()){//有该用户对该影视的播放记录，
    			return;
    		}else{//没有该条播放记录方添加
    			st.execute(add);
    		}
    		rs.close();
    		st.close();
    		con.close();
    	} catch (Exception e) {
    		e.printStackTrace();
    	}
    }

写到这里，网站实现用户收藏视频的效果就达到了。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70 1][]

好了，今天的博客就写到这里了，感谢大家的阅读，文末附上我的视频网站[553影院][553]，欢迎访问。我在[553影院][553]等你。

[553]: http://www.zy52113.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70]: /images/20220418/896f17c4d5aa482aaa8848e8c819d4fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzUwNTQ3_size_16_color_FFFFFF_t_70 1]: /images/20220418/0d8ec61f6eb94d82bb122a9e2aed6be8.png