第一种通过XMLHttpRequest实现：
需要手动创建XMLHttpRequest对象，较繁琐。
js代码：
<script type="text/javascript">
function getComments(){
//获得评论框内的值
var comment = document.getElementById("comment-textarea").value;
if(comment ==""){
alert("请输入评论!");
return;
}
//创建XMLHttpRequest对象
xmlHttp = createXMLHttp();
var articleid= document.getElementById("articleid").value;
//url并拼接传递参数
var url ="/blog/getcomment?articleId="+escape(articleid)+"&comment="+escape(comment);
//查询GET，修改POST请求；异步请求用true，同步用false
xmlHttp.open("GET",url,true);
//当返回状态发生变化，调用回调函数callback（）
xmlHttp.onreadystatechange=callback;
xmlHttp.send(null);
}
//AJAX回调函数
function callback() {
//状态有四种，4表示成功
if(xmlHttp.readyState==4){
//状态200表示成功
if(xmlHttp.status==200){
//此时result为json格式数据
var result = xmlHttp.responseText;
alert(result);
Console.log(result);
//推荐用JSON.parse方法解析json，eval方法有安全隐患
var msg =JSON.parse(result);
var res ="";
//遍历解析数据并拼接html
for(var i=0;i<msg.length;i++){
var date = transferTime(msg[i].date);
res +="<ol class=\"commentlist\" >\n" +
" <li class=\"comment-content\"><span class=\"comment-f\" ></span>\n" +
" <div class=\"comment-avatar\"><img class=\"avatar\" src=\"/images/icon/icon.png\" alt=\"\" /></div>\n" +
" <div class=\"comment-main\">\n" +
" <p>来自<span class=\"address\">匿名</span>的用户<span class=\"time\" >"+date+"</span><br>\n" +
" </p><div id=\"resulte\" class=\"comment-content-detail\" >"+msg[i].comment+"</div>\n" +
" <p ></p>\n" +
" </div>\n" +
" </li>\n" +
" </ol>\n";
}
//使用innerHTML方法 替换id为postcomments块的代码
document.getElementById("postcomments").innerHTML =res;
}
}
}
//创建XMLHttpRequest对象
function createXMLHttp() {
var xmlHttp;
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
if (!xmlHttp) {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
}
return xmlHttp;
}
}body代码：
<div id="postcomments">
<ol class="commentlist" th:each="list:${commentlist}">
<li class="comment-content"><span class="comment-f"></span>
<div class="comment-avatar"><img class="avatar" src="/images/icon/icon.png" alt="" /></div>
<div class="comment-main">
<p>来自<span class="address">匿名</span>的用户<span class="time" th:text="${list.date}"></span><br>
</p><div id="resulte" class="comment-content-detail" th:text="${list.comment}" ></div>
<p ></p>
</div>
</li>
</ol>
<!-- <div class="quotes"><span class="disabled">首页</span><span class="disabled">上一页</span>
<a class="current">1</a><a href="">2</a><span class="disabled">下一页</span><span class="disabled">尾页</span></div>-->
</div>服务端代码：
@RequestMapping(value = {"/getcomment"})
public void getcomment(int articleId, String comment, HttpServletResponse response) throws IOException {
//防止乱码
response.setContentType("text/text;charset=utf-8");
response.setCharacterEncoding("UTF-8");
//评论功能
Date commentdate = new Date();
blogService.insertComment(articleId,comment,commentdate);
//返回评论信息
List<CommentModel>commentList = blogService.getCommentList(articleId);
String json = JSON.toJSONString(commentList);
response.getWriter().write(json);
}第二种通过jq实现(推荐)：
js代码(附long类型日期格式转yyyy-MM-dd)：
<script type="text/javascript">
//ajax异步刷新评论
function getComments() {
var articleid= document.getElementById("articleid").value;
var comment = document.getElementById("comment-textarea").value;
if(comment ==""){
alert("请输入评论!");
return;
}
$.ajax({
type:"GET",
url:"/blog/getcomment?articleId=" +escape(articleid)+"&comment="+escape(comment),
dateType:"json",
success: function (data) {
//data为接收到的json数据
//清空评论栏
$("#comment-textarea").val("");
var msg =JSON.parse(data);
var res ="";
for(var i=0;i<msg.length;i++){
//long类型日期格式转yyyy-MM-dd格式
var date = transferTime(msg[i].date);
res +="<ol class=\"commentlist\" >\n" +
" <li class=\"comment-content\"><span class=\"comment-f\" ></span>\n" +
" <div class=\"comment-avatar\"><img class=\"avatar\" src=\"/images/icon/icon.png\" alt=\"\" /></div>\n" +
" <div class=\"comment-main\">\n" +
" <p>来自<span class=\"address\">匿名</span>的用户<span class=\"time\" >"+date+"</span><br>\n" +
" </p><div id=\"resulte\" class=\"comment-content-detail\" >"+msg[i].comment+"</div>\n" +
" <p ></p>\n" +
" </div>\n" +
" </li>\n" +
" </ol>\n";
}
document.getElementById("postcomments").innerHTML =res;
qqface();
},
error:function (jqXHR) {
alert("发生错误："+jqXHR.status);
}
})}
</script>
<script type="text/javascript">
//json long类型时间转yyyy-MM-dd格式
function transferTime(cTime) {
//将json串的一串数字进行解析
var jsonDate = new Date(parseInt(cTime));
//为Date对象添加一个新属性，主要是将解析到的时间数据转换为我们熟悉的“yyyy-MM-dd hh:mm:ss”样式
Date.prototype.format = function(format) {
var o = {
//获得解析出来数据的相应信息，可参考js官方文档里面Date对象所具备的方法
"y+" : this.getFullYear(),//得到对应的年信息
"M+" : this.getMonth() + 1, //得到对应的月信息，得到的数字范围是0~11，所以要加一
"d+" : this.getDate(), //得到对应的日信息
"h+" : this.getHours(), //得到对应的小时信息
"m+" : this.getMinutes(), //得到对应的分钟信息
"s+" : this.getSeconds(), //得到对应的秒信息
}
//将年转换为完整的年形式
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1,
(this.getFullYear() + "")
.substr(4 - RegExp.$1.length));
}
//连接得到的年月日 时分秒信息
for ( var k in o) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1,
RegExp.$1.length == 1 ? o[k] : ("00" + o[k])
.substr(("" + o[k]).length));
}
}
return format;
}
var newDate = jsonDate.format("yyyy-MM-dd");
return newDate;
}
//调用该函数，传入的参数为json字符串形式的时间值
// alert(transferTime("1501665896000"));
</script>body代码及服务器端代码同上。
至此ajax已实现