介绍
Ajax在前端的应用可以极大的提升用户体验,通过Ajax可以局部刷新页面,对于复杂页面,这是十分有效的方式
比如文章页面下面的评论信息,就可以使用Ajax进行局部刷新,文章的点赞量,收藏量等信息也可以进行局部加载,极大的优化了页面性能,使得前端不成为用户体验的瓶颈,当然现在的静态页面前端框架技术进一步优化了像JSP,Thymeleaf等模板引擎的性能,这个我们后面再说
今天主要来介绍一下前端框架常用的组件——基于JS原生的Ajax
JS
要注意的是几个参数的含义,参数的类型,以及回调函数的处理
function load() {
var userid = $("#userId").val();
var html = "";
$.ajax({
url: "/blog/myinfo", //请求后台地址
data:{id:userid}, //这里传的data是JS对象
type: "post", //请求方式 get post
dataType: "json", //data的类型为json
//success回调函数,还有个error回调函数,json为后台返回的数据,一般是json对象类型,
//这样我们可以进行解析,然后将数据渲染到页面上
success: function (user) {
//console.log(json);
$("#content").html(json.html);
$("#mySelf div").addClass("active");
html = "";
}
});
}
注意
对于data参数需要进一步说明,对于post请求,如果Ajax中data传的是形如
{id:userid,name:username}
这样的JSON对象类型,则后端的接收可以用下面的方式
@GetMapping(@RequestParam("id") String id, @RequestParam("name") String name)
如果传的对象,后台有对应的VO,则还可以用对象接收,如下
@PostMapping(User user)
其中User为
public User {
private String id;
private String username;
}