<div class="form-group">
<h3>评论</h3>
<div class="col-sm-3">
<textarea id="commentContent" class="form-control" rows="4" placeholder="来评论两句吧!"></textarea>
</div>
</div>
<div class="form-group">
<input type="hidden" id="articleId" class="form-control" value="${article.id}">
</div>
<p style="text-align:left">
<button id="commentButton" class="myBtn" type="submit">提交</button>
</p>
这里有一个评论框,然后有一个隐藏的发送文章的Id的<input>标签。点击提交按钮,执行相关的JS语句。
首先要导入JQuery的JS文件,才能使用使用$("#id选择器")
<script src="<c:url value="/js/jquery.js"/>"></script>
<script>
$("#commentButton").click(function () {
var commentContent = $("#commentContent").val();
var articleId = $("#articleId").val();
var varJson = {
"content": commentContent,
"articleId": articleId
};
$.ajax(
{
type: "post",
url: "<c:url value="/actions/comment/insertComment"/>",
dataType: 'json',
data: varJson,
success: function (data) {
if (data.success) {
//刷新,重新加载本页面,本页面是readArticle请求
window.location.reload();
} else {
window.alert("评论失败,可能的原因是:"+data.reason);
}
},
error: function () {
window.alert("您可能还没有登录")
window.location.href="<c:url value="/actions/security/login"/>";
}
});
})
</script>
前端发送JSON数据,后台使用@RequestBody 进行封装实体。
ar requestParm = {
loginName: userName,
loginPassword: password
};
//发送URL
$.ajax({
type: 'POST',
url: "url",
data: JSON.stringify(requestParm),
dataType: 'json',
contentType: 'application/json',
success: function (data) {
if (data.success) {
} else {
}
}
});
在后台接收请求的Controller中的Java代码
范例一:使用SpringMVC直接封装前端发送的数据,映射至实体类中。
**
* 插入评论
* 使用ajax从前端获取到json数据封装到comment中
*
* @param comment 评论
* @return Json数据,返回给页面。逻辑控制由页面操作
*/
@RequestMapping(value = {URL_COMMENT_INSERT}, method = {POST})
@ResponseBody
public JsonResponseVO insertComment(HttpSession session, Comment
comment) {
LOGGER.info("enter insert commment controller");
comment.setDate(new Date());
String name;
try {
name = getCurrentAccount(session).getNickname();//评论者的名字
} catch (Exception e) {
LOGGER.info("当前无用户登录,或者是session过期");
return new JsonResponseVO(false, "用户可能没有登录");
}
comment.setName(name);//设置作者
LOGGER.info("Controller:insert commment,comment={}", comment);
int i = commentService.insertComment(comment);
if (i == 0) {
return new JsonResponseVO(false);
}
return new JsonResponseVO();
}
范例二:使用@RequestParam("请求参数的名字") String loginName
/**
* 用户登录数据提交
*
* @param session
* @param loginName 登录名
* @param password 密码
* @return 登录成功跳转博客空间首页,失败弹窗提示
*/
@RequestMapping(value = {URL_SECURITY_ACCOUNT_LOGIN}, method = {POST})
@ResponseBody
public JsonResponseVO accountLogin(HttpSession session, @RequestParam("loginName") String loginName, @RequestParam("password") String password) {
LOGGER.info("Controller:accountLogin,loginName={},password={}", loginName, password);
final Account account = securityService.accountAuthenticate(loginName, password);
if (account.getId() == null) {
LOGGER.info("用户登录失败");
JsonResponseVO VO = new JsonResponseVO(false);
VO.setOther("帐号错误或者密码错误");
return VO;
}
if (!account.isEnabled()) {
LOGGER.info("帐号不可用");
JsonResponseVO VO = new JsonResponseVO(false);
VO.setOther("帐号已经被冻结,请联系管理员!");
return VO;
}
session.setAttribute("account",account);
return new JsonResponseVO();
}