Ajax实现收藏论坛版块功能,并异步返回提示信息

一、描述

论坛的版块页面上有一个收藏本版的超链接,点击该超链接即可收藏该版块,但是为了防止重复收藏,以及未登录就收藏的错误操作,我们采用Ajax异步返回收藏提示信息。

二、实现细节

1、在jsp页面中点击收藏超链接,执行其onclick事件中的方法,而不是跳转到某个新的页面

2、在boardCollect.js文件中采用Ajax技术,执行后台的收藏版块的操作,并且异步写回提示信息。

3、根据返回的提示信息,显示页面中的相应提示信息控件。

三、源代码

1、boardCollect.js

// 创建请求
var http_request;
function createXMLHttpRequest(){
        http_request=false;
    if(window.XMLHttpRequest){
        http_request=new XMLHttpRequest();  //初始化http_request
        if(http_request.overrideMimeType){
            http_request.overrideMimeType(text/html);
        }
    }else if(window.ActiveXObject){     
        try{
            http_request=new ActiveXObject(Msxml2.XMLHTTP);  //在IE中创建XMLHttpRequest对象,新版IE
        }catch(e){
            try{
                http_request=new ActiveXObject(Microsoft.XMLHTTP);  //在IE中创建XMLHttpRequest对象旧版IE
            }catch(e){}
        }
    }
         
    if(!http_request){
        window.alert(不能创建XMLHttpRequest对象实例);
        return false;
    }
}
 
 
function boardCollect(id){ 
    showCollects(boardCollect.action?boardId=+id); 
}
 
 
function showCollects(url){
    //调用createXMLHttpRequest创建http_request
    createXMLHttpRequest();
    //onreadystatechange状态发生变化,返回processRequest方法进行处理
    http_request.onreadystatechange=processRequest;    
    http_request.open(GET,url,true); 
    http_request.send(null);
}
 
 
// 处理返回信息的函数
function processRequest(){
    if(http_request.readyState==4){        
        if(http_request.status==200){
            //正常返回,获取返回的responseText数据
            var com = eval('('+http_request.responseText+')');
            var Feedback = com.Feedback;           
            if(Feedback==true){
                //收藏成功
                document.getElementById(ntcwin).style.display=block;
                function remove(){
                    document.getElementById(ntcwin).style.display=none;
                }
                //显示1.5秒后消失
                setInterval(remove,1500);
                 
            }else if(Feedback==already collect){
                //已经收藏,不能重复收藏,将页面提示重复收藏的div显示出来           
                document.getElementById(fwin_a_favorite).style.display=block;
            }else{
                //未登录就收藏,修改页面上errorInfo显示提示错误信息
                document.getElementById(errorInfo).innerHTML=抱歉,您还未登录没有此权限,请登录后重试;
                document.getElementById(fwin_a_favorite).style.display=block;
            }
             
             
        }
    }
}
//隐藏tcl对应的div
function hideWindow(tcl){
    document.getElementById(tcl).style.display=none;

2、board.jsp(有些css代码没有上传,也许会出现显示格式问题)
<%@ page language=java pageEncoding=UTF-8%>
<%@ taglib uri=/struts-tags prefix=s%>
<%@ taglib uri=http://java.sun.com/jsp/jstl/core prefix=c%>
<%@ taglib uri=http://java.sun.com/jsp/jstl/fmt prefix=fmt%>
 
 
<%
String path = request.getContextPath();
String basePath = request.getScheme()+://+request.getServerName()+:+request.getServerPort()+path+/;
 
 
%>

3、后台处理收藏版块的java源代码
/**
     *收藏版块
     */
     
    public String boardCollect(){
        System.out.println(enter boardCollect try boardId=+boardId);
         
        try {
             
            HttpServletResponse response;
            response=ServletActionContext.getResponse();
            response.setContentType( text/json;charset=utf-8);
            response.setHeader( Cache-Control,no-cache);
            response.setHeader( Pargma,no-cache);
            PrintWriter out;
            out = response.getWriter();      
            //mcpForumPost = mcpForumPostDAO.findById(postId);
            JSONObject js = new JSONObject();
            ScpnUser u=(ScpnUser)this.getSession().get(user);          
             
            if(u!=null){               
                 
                //判断该用户是否已经收藏该版块
                String exitBoardCollect = SELECT COUNT(*) FROM mcp_forum_board_collect where user_id= +u.getUserId()+ and  board_id=+boardId;
                             
                System.out.println(exitBoardCollect:+exitBoardCollect);
                Integer count=jdbcTemplate.queryForInt(exitBoardCollect);
                if(count>0){
                    js.put(Feedback,already collect);
                }else{
                     
                    Timestamp currentTime = new Timestamp(System.currentTimeMillis());
                    SimpleDateFormat sdf = new SimpleDateFormat(yyyy-MM-dd HH:mm:ss);
                    String time = sdf.format(currentTime);
                     
                     
                    //将收藏记录插入版块收藏表
                    String insertBoardCollect = INSERT INTO mcp_forum_board_collect(board_id,user_id,board_collect_time) VALUES (+boardId+,+u.getUserId()+,'+time+');
                    System.out.println(insertPostCollect:+insertBoardCollect);
                     
                    jdbcTemplate.update(insertBoardCollect);
                     
                    //更新版块收藏数量
                    String updateColNum = UPDATE mcp_forum_board SET board_collectNum=1 where board_id=+boardId;
                    System.out.println(updateColNum:+updateColNum);
                     
                    jdbcTemplate.update(updateColNum);
                    userLogger.insert(UserLogger.UPDATE,u.getAccount()+收藏版块);
                    js.put(Feedback,true);
                }              
                
            }else {            
                js.put(Feedback,not login);
            }
             
            out.write(js.toString());
            out.close();          
             
        } catch (IOException e) {
            e.printStackTrace();
        } catch (JSONException e) {
            e.printStackTrace();
        }  
         
        return null;
    }
    

相关文章

JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表单提交的返回...
AJAX 每日更新前端基础,如果觉得不错,点个star吧 &#128515; https://github.com/WindrunnerMax/E...
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSe...
很早就听闻ajax的名声,但是却一直不知道怎么用,今天自己捣鼓了一下,竟然会用了,哈哈哈哈。 为了防止...
需要在服务器上进行哈 jquery的ajax方法: // jquery请求 $.ajax({ url: &quot;./server/slider.js...
Ajax函数封装ajax.js // Get / Post // 参数 get post // 是否异步 // 如何处理响应数据 // URL // var...