准备阶段:
开发工具:idea
语言: Java
JQ版本号: jquery-3.4.1.min.js (注意不要使用slim版本,该版本无法使用AJAX)
其他: 数据库MySQL、Mybatis
前端技术:Thymeleaf
一、前段HTML页面预览及代码展示(这里只做展示,内容与省份和城市无关)
1.png
==========================代码=========================
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>性能管理流程</title>
</head>
<script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}" src="../static/js/jquery-3.4.1.min.js"></script>
<body>
<div style="height: 100px; width: 100%; background-color: #adacac; border: 2px solid #78b6da;" >
配置类别: <select id="select1">
<option value="0">--请选择--</option>
<option value="1">流程角色配置</option>
<option value="2">流程数据配置</option>
</select>  
配置列表: <select id="select2">
<option value="0">--请选择--</option>
</select>
</div>
<script>
$('#select1').change(function () {
var value = $(this).val();
if(value) {
$.ajax({
type: "get", //调用方式: get、post、put、delete 等
url: "/queryPojo", // 调用的RequestMapping 的URL
data: {"id": value}, //给controller层传入当前页面选项的value值，以便数据库查询
dataType: "json", //指定ajax接收类型为json
success: function (data) {
// 把原选项的数据删除，重新添加。这样做是为了在已选中一个标签后切换到别的标签时不会累计添加
$('#select2 option').remove();
$('#select2').append("<option value = 0 >" +"--请选择--" + "</option>");
var lists = data; //可以不写，直接遍历data
for (i in lists) {
$('#select2').append("<option value =" + lists[i].id + ">" + lists[i].name + "</option>");
}
}
});
}
})
</script>
</body>
</html>
二、控制层代码
这里JSON的依赖为:
<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.2.3</version>
<classifier>jdk15</classifier>
</dependency>
import com.zrr.xngl.pojo.Pojo1;
import com.zrr.xngl.service.XnglService;
import net.sf.json.JSONArray;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.List;
/**
* @auther ZengSakae
* @date 2019-12-10 17:31
*/
@RestController
public class XnglController {
@Autowired
XnglService xnglService;
@RequestMapping(value = "/queryPojo")
public String queryPojo2(HttpServletRequest request, HttpServletResponse response) throws Exception{
// 设置为utf-8，避免解析出现乱码
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("application/json");
int id = 0;
//判断传入的id是否为空，这里只是做校验
if(null != request.getParameter("id") || !"".equals(request.getParameter("id"))){
id = Integer.parseInt(request.getParameter("id"));
}
List<Pojo1> lists = xnglService.queryAllPojo(id);
JSONArray jsonArray = JSONArray.fromObject(lists); //把得到的实体类List集合转换为json数据
String result = jsonArray.toString(); //把json数据转换成json格式的String类型
return result; //返回这个String给前端页面
}
}
三、业务层service代码
很简单,不解释
import com.zrr.xngl.mapper.XnglMapper;
import com.zrr.xngl.pojo.Pojo1;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
/**
* @auther ZengSakae
* @date 2019-12-10 17:35
*/
@Service
public class XnglService {
@Autowired
XnglMapper xnglMapper;
public List<Pojo1> queryAllPojo(Integer id) {
return xnglMapper.getAllPojo(id);
}
}
四、Mapper的代码(替代了dao层)
注意在参数前面加注释@Param 指定下别名
import com.zrr.xngl.pojo.Pojo1;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;
import java.util.List;
/**
* @auther ZengSakae
* @date 2019-12-10 17:38
*/
@Repository
public interface XnglMapper {
List<Pojo1> getAllPojo(@Param("id") Integer id);
}
五、Mapper.xml配置文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.zrr.xngl.mapper.XnglMapper">
<select id="getAllPojo" resultType="com.zrr.xngl.pojo.Pojo1">
select * from collocation_column cc
where cc.type_id = #{id}
</select>
</mapper>
六、其他注意事项
主方法添加注释: @MapperScan("com.zrr.xngl.mapper") 指定mapper的路径
否则启动报错
以上便是springboot下 Ajax的使用方法....
静态资源JQ的包记得放在static目录下,否则项目部署后报错Not Found 404
