牛客网后端项目实战（十六）：发布帖子（使用jQuery发送AJAX请求）_虽然x代表xml但目前json的使用比xml更加普遍-CSDN博客

文章目录

AJAX
- Asynchronous JavaScript and XML
- 异步的JavaScript与XML，不是一门新技术，只是一个新的术语。
- 使用AJAX，网页能够将增量更新呈现在页面上，而不需要刷新整个页面。
- 虽然X代表XML，但目前JSON的使用比XML更加普遍。
- https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX
示例
- 使用jQuery发送AJAX请求。

本文采用AJAX请求，实现发布帖子的功能。

Ajax示例

封装Json工具

为了方便，我们先在CommunityUtil里封装几个json工具，使用阿里爸爸的fastjson，引入依赖。

<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.68</version>
</dependency>

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

    //重载json工具
    public static String getJSONString(int code, String msg){
        return getJSONString(code,msg,null);
    }

    //重载json工具
    public static String getJSONString(int code){
        return getJSONString(code,null,null);
    }

测试

在controller里写一个测试的方法。

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

然后写一个静态页面来发送请求，“<script src=>”引入jquery。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
</head>
<body>
<p>
    <input type="button" value="发送" onclick="send();">
</p>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" crossorigin="anonymous"></script>
<script>
    function send() {
        $.post(
            "/community/ajax",
            {"name":"张三","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.message);
            }
        );
    }
</script>
</body>
</html>

打开浏览器，访问html目录下的ajax-demo.html，可以看到写的一个按钮。点击发送，可以看到后台输出。

jQuery $.post() 方法

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。 callback 参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

https://www.w3school.com.cn/jquery/jquery_ajax_get_post.asp

$.parseJSON() 函数

用于将符合标准格式的的JSON字符串转为与之对应的JavaScript对象。
https://www.runoob.com/jquery/misc-parsejson.html

发布帖子

DAO层

首先在DiscussPostMapper里写发布帖子的方法。

//发布帖子
    int insertDiscussPost(DiscussPost discussPost);

再写xml，在discusspost-mapper里写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>

Service层

在DiscussPostService里写。这里进行两个处理，一个是过滤html标签，为了防止用户在帖子里写html标签导致页面出错，使用自带的HtmlUtils将标签转义。第二个处理就是之前写好的过滤敏感词。

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

    }

视图层

最后写controller，首先从hostHolder里获取当前用户，如果user为null说明没有登录，跳转到登录界面。除了标题和内容用户传入，其它属性自动生成。

package com.neu.langsam.community.controller;

import com.neu.langsam.community.entity.DiscussPost;
import com.neu.langsam.community.entity.User;
import com.neu.langsam.community.service.DiscussPostService;
import com.neu.langsam.community.util.CommunityUtil;
import com.neu.langsam.community.util.HostHolder;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.Date;

@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 discussPost = new DiscussPost();
        discussPost.setUserId(user.getId());
        discussPost.setTitle(title);
        discussPost.setContent(content);
        discussPost.setCreateTime(new Date());
        discussPostService.addDiscussPost(discussPost);

        return CommunityUtil.getJSONString(0, "发布成功！");

    }
}