问答社区-帖子发布
通常网站上都有一些不用刷新网页就可以与后台进行交互的功能,接收到的也不是一个网页而是一个json格式的数据。
我们使用Ajax请求,实现发布帖子的功能,这里就是一个异步请求。
Ajax
- 异步的JavaScript与XML
- 使用Ajax,网页能够将增量更新呈现在页面上,而不需要刷新整个网页
1、先导入fastjson包
<dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.62</version> </dependency>
2、实现新增帖子的mapper和service
//增加帖子 public int addDiscussPost(DiscussPost discussPost) { if (discussPost == null) { throw new IllegalArgumentException("参数不能为空!"); } //转义HTML discussPost.setTitle(HtmlUtils.htmlEscape(discussPost.getTitle())); discussPost.setContent(HtmlUtils.htmlEscape(discussPost.getContent())); //过滤敏感词 discussPost.setTitle(sensitiveFilter.filter(discussPost.getTitle())); discussPost.setContent(sensitiveFilter.filter(discussPost.getContent())); return discussPostMapper.insertDiscussPost(discussPost); }
3、实现discussPostController中的新增帖子方法
@responseBody注解的作用是将controller的方法返回的对象通过适当的转换器转换为指定的格式之后,写入到response对象的body区,通常用来返回JSON数据或者是XML数据。
注意:在使用此注解之后不会再走视图处理器,而是直接将数据写入到输入流中,他的效果等同于通过response对象输出指定格式的数据。
@RequestMapping(value = "/add", method = RequestMethod.POST) @ResponseBody public String addDiscussPost(String title, String content) { User user = hostHolder.getUser(); if (user == null) { return CommunityUtil.getJSONString(403, "你还没有登录哦!"); } DiscussPost post = new DiscussPost(); post.setUserId(user.getId()); post.setTitle(title); post.setContent(content); post.setCreateTime(new Date()); discussPostService.addDiscussPost(post); return CommunityUtil.getJSONString(0, "发布成功!"); }
到这里后端的工作就完成了,剩下就是前端js的事情了
4、查看前端界面,完善JS动作
当点击发布按钮,触发publish方法
$(function(){ $("#publishBtn").click(publish); }); function publish() { $("#publishModal").modal("hide"); // 获取标题和内容 var title = $("#recipient-name").val(); var content = $("#message-text").val(); console.log(title); // 发送异步请求(POST) $.post( CONTEXT_PATH + "/discuss/add", {"title":title,"content":content}, function(data) { data = $.parseJSON(data); // 在提示框中显示返回消息 $("#hintBody").text(data.msg); // 显示提示框 $("#hintModal").modal("show"); // 2秒后,自动隐藏提示框 setTimeout(function(){ $("#hintModal").modal("hide"); // 刷新页面 if(data.code == 0) { window.location.reload(); } }, 2000); } ); }