仿牛客社区项目3.2——发布帖子（异步通信技术AJAX）

最新推荐文章于 2022-08-22 15:43:18 发布

Doreen_FF

最新推荐文章于 2022-08-22 15:43:18 发布

阅读量688

点赞数

分类专栏：仿牛客社区项目文章标签： ajax jquery

本文链接：https://blog.csdn.net/Doreen_FF/article/details/118003948

版权

仿牛客社区项目专栏收录该内容

28 篇文章 44 订阅

订阅专栏

在这里插入图片描述
异步请求：增量更新在页面上，不用刷新整个页面。
通过jQuery写，三个参数：访问路径，发送的JSONString字符串，回调函数（参数是服务器返回值）

一、用jQuery发送AJAX请求的示例

1、取业务数据的JSON字符串

先引入Fastjson jar包
CommunityUtils下，getJSONString

public class JSONObject extends JSON implements Map<String, Object>, 
Cloneable, Serializable, InvocationHandler {}

    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();
    }

    public static String getJSONString(int code, String msg) {
        return getJSONString(code, msg, null);
    }

    public static String getJSONString(int code) {
        return getJSONString(code, null, null);
    }

    public static void main(String[] args) {
        Map<String, Object> map = new HashMap<>();
        map.put("name", "zhangsan");
        map.put("age", 25);
        System.out.println(getJSONString(0, "ok", map));
    }

在这里插入图片描述

2、Ajax如何发送异步请求

在Controller中加一个方法AlphaController.java，服务器处理请求，返回JSONString字符串。

    // 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, "操作成功!");
    }

静态页面 ajax-demo.html，用jQuery库发送异步请求，$.ajax $.post $.get都可以，参数有三个：访问路径、提交的数据JSONString类型、回调函数（输入是服务器返回值） 这里对应controller的return CommunityUtil.getJSONString(0, "操作成功!");。

<body>
    <p>
        <input type="button" value="发送" onclick="send();">
    </p>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
    <script>
        // 如何发送异步请求,用jquery
        function send() {
            $.post(//三个参数：访问路径、向服务器提交的数据（JS对象）、回调函数（匿名的）（服务器响应浏览器，浏览器把服务器给的数据data（是字符串）传给该方法）
                "/community/alpha/ajax",
                {"name":"张三","age":"23"},
                function(data){//回调函数
                    console.log(typeof(data));//证明这个data是字符串类型
                    console.log(data);//打印data这个内容

                    data = $.parseJSON(data);//转换成JS类型
                    console.log(typeof(data));//证明这个data是JS类型
                    console.log(data.code);
                    console.log(data.msg);

                }
            )
        }
    </script>

</body>

在这里插入图片描述

二、实现发布帖子的功能

1、数据访问层

DiscussPostMapper接口int insertDiscussPost(DiscussPost discussPost);

@Mapper
public interface DiscussPostMapper {
    List<DiscussPost> selectDiscussPosts(int userId, int offset, int limit);

    // @Param注解用于给参数取别名,
    // 如果只有一个参数,并且在<if>里使用,则必须加别名.
    int selectDiscussPostRows(@Param("userId") int userId);

    int insertDiscussPost(DiscussPost discussPost);
}

实现该方法discusspost-mapper.xml，用sql语句把上面的方法实现了

    <sql id="insertFields">
        user_id, title, content, type, status, create_time, comment_count, score
    </sql>

    <insert id="insertDiscussPost" parameterType="DiscussPost">
        insert into discuss_post(<include refid="insertFields"></include>)
        values(#{userId},#{title},#{content},#{type},#{status},#{createTime},#{commentCount},#{score})
    </insert>

2、业务层

DiscussPostService，保存帖子，转义HTML标记，过滤敏感词

    @Autowired
    private DiscussPostMapper discussPostMapper;

    @Autowired
    private SensitiveFilter sensitiveFilter;

    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 discussPostMapper.insertDiscussPost(post);
    }

3、视图层

新建DiscussPostController

@Controller
@RequestMapping("/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, "发布成功");
    }
}

在首页，发布帖子
index.js

$(function(){
	$("#publishBtn").click(publish);
});

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);
		}
	);
}

index.html
“我要发布”，只有在登录时才能显示。th:if="${loginUser!=null}"

<button type="button" class="btn btn-primary btn-sm position-absolute rt-0" data-toggle="modal" data-target="#publishModal" 
th:if="${loginUser!=null}">我要发布</button>

在这里插入图片描述

Doreen_FF

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿牛客社区项目3.2——发布帖子（异步通信技术AJAX）

异步请求：增量更新在页面上，不用刷新整个页面。通过jQuery写，三个参数：访问路径，发送的JSONString字符串，回调函数（参数是服务器返回值）一、用jQuery发送AJAX请求的示例1、取业务数据的JSON字符串先引入Fastjson jar包CommunityUtils下，getJSONStringpublic class JSONObject extends JSON implements Map<String, Object>, Cloneable, Seriali.
复制链接

扫一扫