上一篇SSM框架+Thymeleaf之详解Mybatis实例使用的文章，其实最基本的SSM+Thymeleaf已经可以用了，一点点的加内容，网页这些，一个完整的项目就可以用了。
这篇我讲下ajax的使用，post请求这类的，还有通过ajax将另一个页面的内容加入一个页面里。
如果你点击getUserAndAddress弹出alert了那就jquery引入成功了，然后再写个基本的get请求把
$(function () {
$("#clickOne").click(function () {
var s=$.ajax({
//给叫getUser的请求发送请求
url: 'getUser',
data: {
//带一个参数，结果会返回userId为1的用户
userId: 1
},
//设成同步请求，不加默认是异步，这里加这个是为了同步适用下面的那条语句，
//不然异步的话，$("#niHao")会用不了
async: false,
//不加也可以，默认是get
type: "get",
success:function (res) {
//这个等下再用
console.log(res)
}
})
//因为我们这个请求现在还是返回的页面，将页面嵌入id叫niHao的元素中
$("#niHao").html(s.responseText)
});
})
<div>
hello 2020!
<br>
<a id="clickOne" th:text="${message}"></a>
<ul>
<li th:each="userInfo ,itemStat:${userInfoList}">
<a th:text="${userInfo.userName+' || '+userInfo.userRealName}"></a>
<ul>
<li th:each="addressInfo:${userInfo.addressInfoList}">
<a th:text="${addressInfo.address}"></a>
</li>
</ul>
</li>
</ul>
<div id="niHao"></div>
</div>
现在点击getUserAndAddress的结果是
首先因为userId=1的关系只能搜出javaee，然后那个userInfo页面被嵌入这个id叫niHao的div中作为页面显示。没用过这种方法得人可能现在理解起来有点困难，不过这种方法还是很实用得，有很多用法，当然这是基于jquery得方法，如果是vue得话通过改变data会更快更方便。
上面的是返回页面将页面嵌入页面的方法，接下来写个接口返回数据的方法
@RequestMapping("getUser")
public String getUser(UserInfo userInfo,Model model){
//我现在使用的是用类来接受参数
System.out.println(userInfo.getUserId());
List<UserInfo> userInfoList=userInfoService.getUser(userInfo);
model.addAttribute("userInfo",userInfoList);
model.addAttribute("message","getUser");
return "userInfo";
}
改成
// 加上这个ResponseBody注解，返回数据会变成json格式
// 现在这种写法是将单独的一个请求改成返回json格式，
// 如果是想范围一个类的话就要将上面的@Controller改成@ResController
// 是不是觉得眼熟了，这个注解本质上就是ResponseBody+Controller
@ResponseBody
@RequestMapping("getUser")
public List<UserInfo> getUser(UserInfo userInfo, Model model){
System.out.println(userInfo.getUserId());
List<UserInfo> userInfoList=userInfoService.getUser(userInfo);
return userInfoList;
// model.addAttribute("userInfo",userInfoList);
// model.addAttribute("message","getUser");
// return "userInfo";
}
//或
@ResponseBody
@RequestMapping("getUser")
public List<UserInfo> getUser(HttpServletRequest request, Model model){
//通过HttpSerletRequest获取，这种我觉得不好得地方一方面是判空，一方面是参数多的时候要写很长
UserInfo userInfo=new UserInfo();
int userId=Integer.parseInt(request.getParameter("userId"));
userInfo.setUserId(userId);
System.out.println(userInfo.getUserId());
List<UserInfo> userInfoList=userInfoService.getUser(userInfo);
return userInfoList;
}
$(function () {
$("#clickOne").click(function () {
var s=$.ajax({
//给叫getUser的请求发送请求
url: 'getUser',
data: {
//带一个参数，结果会返回userId为1的用户
userId: 1
},
async: false,
//不加也可以，默认是get
type: "get",
success:function (res) {
console.log(res)
}
})
//现在返回的是数据，所以下面这句就不用了
//$("#niHao").html(s.responseText)
});
})
再把javaScript改成上图，运行结果如下图
控制台输出了请求返回的信息
在展示用Postman进行接口测试
后端getUser请求改成下图
@ResponseBody
@RequestMapping(value = "getUser",method = RequestMethod.POST)
public List<UserInfo> getUser(UserInfo userInfo, Model model){
System.out.println(userInfo.getUserId());
List<UserInfo> userInfoList=userInfoService.getUser(userInfo);
return userInfoList;
}
就是把get请求换成post请求，这个看个人，post和get请求的区别随便百度搜搜就出来了。我习惯前后端分离就采用post的形式
打开Postman
先选post形式，输入请求的地址端口，访问那个请求。然后先把userId隐掉，发送一次如上图，取出全部。
现在打开userId的勾选。
查询出的是userId=1的条件
<select id="getUser" resultType="com.mall.entity.UserInfo">
select user_id as userId,user_name as userName,
user_real_name as userRealName,telephone,user_pro as userPro
from user_info
<where>
<if test="userId != 0 ">user_id=#{userId}</if>
</where>
</select>
因为我们的xml的sql语句中是由写if判断的，所以它会自动根据你的userId是否为默认的0（因为是int类型，自动创建时默认为0）来决定是否加入user_id=#{userId}的语句。
ajax我用的比较多的也就上面两种方法，比较实用的是把页面嵌入另一个页面的形式，我用这个做过考试试卷，点击加入选择题，就嵌入选择题的框架形式，多选题就嵌入多选题的框架形式，点击保存就把题型和内容都存入数据库中。不过现在是Vue的天下，我现在前端用的也是vue，以后再讲vue吧
