ajax实现异步刷新

2019-10-13 11:08:22来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

ajax实现异步刷新

1. 导入 json 包:

jackson-annotations-2.8.9.jar
jackson-core-2.8.9.jar
jackson-databind-2.8.9.jar
json.jar

2. js 代码

$.ajax({
        url: "url",
        type: "post/get",
        data: {
            key1:val1,
            key2:val2,
        },
        dateType:'json',
        success: function(data){
            /*将旧列表内容移除*/
            $("#comment_list li").remove(); 
            if( data!=null ){                    
                                        
                for(var i=0;i<data['comment'].length;i++){
                     /*循环更新列表内容*/
                    $("#comment_list").append(
                            "<li class='comment-content'> " +
                                "<span class='comment-f'> #" + (data['comment'].length-i) + "</span>" +
                                "<div class='comment-main' " +
                                    "<p>" + 
                                        "<a class='address'> " + data['comment'][i]['acount'] + "</a>" +
                                        "<span class='time' > " + data['comment'][i]['time'] + "</span>" + "<br>" + data['comment'][i]['content'] +
                                    "</p>" +
                                "</div>" +
                            "</lic>"
                    )
                }    
                document.getElementById("comment-textarea").value = "";
            }
                
        }
            
    })

3. controller 代码

@RequestMapping(value="/url")
@ResponseBody
public Map<String, Object> commentAdd(String acount,Integer articleId,String content,String time,Integer editor){
        
  Map<String,Object> map = new HashMap<String, Object>();
   List<Comment> comments = null;
        
   time = new TimeFormat().timeFormat(new Date());
        
   int r = commentService.commentAdd(acount, articleId, content, time,null);
        
   if(r != 0 ){
     comments = commentService.getCommentsByArticleId(articleId,null);
       map.put("comment", comments);
   }
        
  System.out.println("==>"+acount+articleId+content+time);
    
   return map;
}

 


原文链接:https://www.cnblogs.com/lcsin/p/11667054.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:大型分布式项目实战视频教程,帮你实现加薪升职

下一篇:spring-data-redis-cache 使用及源码走读