异步请求:增量更新在页面上,不用刷新整个页面。
通过jQuery写,三个参数:访问路径,发送的JSONString字符串,回调函数(参数是服务器返回值)
使用jquery使得发送操作简单直接,对XMLHttpRequest进行了封装,要不就是通过XMLHttpRequest发送。
一、用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添加
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层,服务器处理请求,返回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接口
@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);
}
2、业务层
@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、视图层
@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);
}
);
}