本文共 4531 字，大约阅读时间需要 15 分钟。

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

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

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

先引入Fastjson jar包

CommunityUtils下，getJSONString

public class JSONObject extends JSON implements Map
   
    , Cloneable, Serializable, InvocationHandler {
   }
   

public static String getJSONString(int code, String msg, Map
   
     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
    
      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, "操作成功!");。

二、实现发布帖子的功能

1、数据访问层

DiscussPostMapper接口int insertDiscussPost(DiscussPost discussPost);

@Mapperpublic interface DiscussPostMapper {
       List
   
     selectDiscussPosts(int userId, int offset, int limit);    // @Param注解用于给参数取别名,    // 如果只有一个参数,并且在
    
     里使用,则必须加别名.    int selectDiscussPostRows(@Param("userId") int userId);    int insertDiscussPost(DiscussPost discussPost);}
    
   

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

   
            user_id, title, content, type, status, create_time, comment_count, score    
       
   
            insert into discuss_post(
    )        values(#{
   userId},#{
   title},#{
   content},#{
   type},#{
   status},#{
   createTime},#{
   commentCount},#{
   score})    
   

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}"

我要发布

转载地址：http://jsnlf.baihongyu.com/