牛客网社区项目——p3.2发布帖子

使用异步请求（AJAX），将增量更新呈现在页面上，不需要刷新整个页面（局部更新）

导入fastjson包，该包可以输出json格式的数据传给浏览器，浏览器将其转换为JS对象，得到每一个key对应的值，实现前后端的交互。

示例：使用jQuery发送AJAX

首先服务器给浏览器返回的往往包含几部分的内容，例如给浏览器返回的编号、提示信息（成功或者失败之类）以及一些业务数据，根据这样的诉求，提炼一个方法：将这些内容封装成一个json对象，进而转换为json字符串。

public static String getJSONString(int code, String msg, Map<String,Object> map){
        JSONObject json = new JSONObject();
        json.put("code",code);
        json.put("msg",msg);
        if(map != null){
            for(String key : map.keySet()){
                json.put(key,map.get(key));
            }
        }
        return json.toJSONString();
    }
	//重载1
    public static String getJSONString(int code, String msg){
        return getJSONString(code, msg,null);
    }
	//重载2
    public static String getJSONString(int code){
        return getJSONString(code, null,null);
    }

在表现层编写如下代码进行测试

//ajax示例
    @RequestMapping(path = "/ajax", method = RequestMethod.POST)
    @ResponseBody
    public String testAjax(String name, int age){
        System.out.println(name);
        System.out.println(age);
        return CommunityUtil.getJSONString(0,"操作成功!");
    }

当中name和age是浏览器向服务器提交的数据，最终返回的json字符串return CommunityUtil.getJSONString(0,"操作成功!");是服务器返回给浏览器的。

编写.html文件，部分核心代码如下所示

<script>
        function send(){
            $.post(
                "/community/alpha/ajax",
                {"name":"zhangsan","age":23},
                function(data){
                    console.log(typeof(data));
                    console.log(data);
                    data=$.parseJSON(data);
                    console.log(typeof(data));
                    console.log(data.code);
                    console.log(data.msg);
                }
            );
        }
    </script>

其中"/community/alpha/ajax"指明服务器的访问路径，{"name":"zhangsan","age":23},向服务器提交数据

而回调函数

function(data){
                    console.log(typeof(data));
                    console.log(data);
                    data=$.parseJSON(data);
                    console.log(typeof(data));
                    console.log(data.code);
                    console.log(data.msg);
                }

当中data是前面服务器返回给浏览器的json数据``return CommunityUtil.getJSONString(0,“操作成功!”);`，当中的代码是在浏览器的控制台上打印相关信息。

接下来正式开发发帖功能
首先在DAO层声明相关方法

 int insertDiscussPost(DiscussPost discussPost);

配置对应的mapper.xml文件，实现和数据库的交互。

接下来进行业务层的编写，业务层需要定义一个对帖子进行保存的方法

public int addDiscussPost(DiscussPost post){
        if(post == null){
            throw new IllegalArgumentException("参数不能为空！");
        }
        //转义HTML标记
        post.setTitle(HtmlUtils.htmlEscape(post.getTitle()));
        post.setContent(HtmlUtils.htmlEscape(post.getContent()));
        //过滤敏感词
        post.setTitle(sensitiveFilter.filter(post.getTitle()));
        post.setContent(sensitiveFilter.filter(post.getContent()));
        return dicussPostMapper.insertDiscussPost(post);
    }

表现层实现增加帖子的功能

@Controller
@RequestMapping(path = "/discuss")
public class DiscussPostController {
    @Autowired
    private DiscussPostService discussPostService;
    @Autowired
    private HostHolder hostHolder;
    @RequestMapping(path = "/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部分的编写

function publish() {
	$("#publishModal").modal("hide");
	//获取标题和内容
	var title = $("#recipient-name").val();
	var content = $("#message-text").val();
	//发送异步请求(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)
		}
	);
	$("#hintModal").modal("show");
	setTimeout(function(){
		$("#hintModal").modal("hide");
	}, 2000);
}

再对index.html进行一些小的修改即可。