版权声明：转载请联系作者本人！！！ https://blog.csdn.net/qq_41307491/article/details/82633897
问题：为什么需要把查询结果转换为json(未解决)
数据库中：一行记录对应多个对象时，需要使用Map对应多个对象
json的省市联动
dao:
1)查询所有省
2）通过省查询指定市
servlet：
1)把所有省转换成json，发送给客户端
2)通过获取省名称，查询该省内所有市，显示在<select id="province">
ajax1.jsp
1)页面加载完后：访问servlet，得到所有省，显示在<select id="province">
2)页面加载完后：给<select id="province">添加onchange事件监听.
监听内容:获取选择省名称，访问servlet得到所有市，显示在<select id="city">
导文件：连接数据库的配置文件 c3p0-config.xml （src下）
导包：
代码：
dao
public class Dao {
private QueryRunner qr = new TxQueryRunner();
/**
* 查询所有的省
* @return
* @return
*/
@Test
public List<Province> findAllProvince(){
try {
String sql = "select * from t_province";
return qr.query(sql, new BeanListHandler<Province>(Province.class));
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
/**
* 根据省名查询所有城市
* @param proname
* @return
*/
public List<City> findAllCity(int pid){ //根据省名查询
try{
String sql = "select * from t_city where pid=? ";
return qr.query(sql, new BeanListHandler<City>(City.class),pid);
}catch(SQLException e){
throw new RuntimeException(e);
}
}
}Servelt
//CityServlet
public class CityServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
/*
* 1.获取省名称对应的pid参数 request.getParameter("pid");
* 2.使用省id查询数据库，得到List<City>
* 3.转换为json
* 4.发送给客户端
*/
//1.获取省名称对应的pid参数 并将字符串转换成int型
//request.getParameter("pid") 获取参数
//Integer.parseInt() 转换字符串为int
int pid = Integer.parseInt(request.getParameter("pid"));
//2.使用省id查询数据库，得到List<City>
Dao dao = new Dao();
List<City> cityList = dao.findAllCity(pid);
//3.转换为json
String json = JSONArray.fromObject(cityList).toString();
response.getWriter().print(json);
}
}//ProvinceServlet
public class ProvinceServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
/*
* 1.通过dao得到所有的省
* 2.把List<Province>转换成json
* 3.发送给客户端
*/
//1.通过dao得到所有的省
Dao dao = new Dao();
List<Province> provinceList = dao.findAllProvince();
//2.把List<Province>转换成json 便于在js中输出
String json = JSONArray.fromObject(provinceList).toString();
response.getWriter().print(json);//3.发送给客户端
}
}
jsp
<script type="text/javascript">
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();
} catch (e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("哥们儿，你用的是什么浏览器啊？");
throw e;
}
}
}
}
/*
1.得到所有省：
a> 在文档加载完毕时发送请求，
b> 使用ajax请求ProvinceServlet，得到所有省份名称。
c> 显示在<select id="pro"/>中
*/
window.onload = function() {
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET" , "<c:url value='/ProvinceServlet'/>",true);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//执行服务器发送过来的json字符串，得到js对象数组
var proArray = eval("(" + xmlHttp.responseText + ")");
//遍历数组，使用每一个对象，创建并添加到opion中
for(var i = 0; i < proArray.length; i++){
//得到数组内对象
var pro = proArray[i];
//创建option元素
var option = document.createElement("option");
//为option设置实际值、显示值
option.value = pro.pid; //对<option>实际值赋为pid
//对TextNode赋值为pro.name，并创建文本节点
option.appendChild(document.createTextNode(pro.name));
//把option添加到select中
document.getElementById("pro").appendChild(option);
}
}
};
/*
2. 给<select name="province">注册改变监听。
监听内容：
//先清空city中原有的option
a>获取当前省id
b>使用省id访问CityServlet,得到省内所有市
c>使用市名生成<option>，插入到<select id="city">元素中
*/
var proSelect = document.getElementById("pro")
proSelect.onchange = function(){
/*
异步操作，发送pid。
需要先清空city中原有的option
*/
var xmlHttp = createXMLHttpRequest();
//打开
xmlHttp.open("POST","<c:url value='/CityServlet'/>", true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//发送 option的value就是select的value
xmlHttp.send("pid=" + proSelect.value); //该省的value就是pid（在添加option时设置的）
//监听
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status ==200){
//清空select中所有option（除了当前选择）
var citySelect = document.getElementById("c");
// 获取其所有子元素
var optionEleList = citySelect.getElementsByTagName("option");
// 循环遍历每个option元素，然后在citySelect中移除
while(optionEleList.length > 1) { //子元素的个数如果大于1就循环，等于1就不循环了！
citySelect.removeChild(optionEleList[1]); //总是删除1下标，因为1删除了，2就变成1了！
}
//执行服务器发送过来的json字符串，得到js对象数组
var cityArray = eval("("+ xmlHttp.responseText +")");
for(var i = 0; i< cityArray.length; i++){
//得到数组内对象
var c = cityArray[i];
//创建option
var cityoption = document.createElement("option");
//为cityoption赋 显示值、实际值
cityoption.value = c.cid;
cityoption.appendChild(document.createTextNode(c.name));
//将cityoption添加到select中
citySelect.appendChild(cityoption);
}
}
};
};
};
</script>
</head>
<body>
<h1>省市联动</h1>
<select name=province id="pro">
<option value="">===请选择===</option>
</select>
<select name=city id="c">
<option value="">===请选择===</option>
</select>
</body>domain
public class City {
private int cid;
private String name;
private Province province; //多方关联一方
}
public class Province {
private int pid;
private String name;
private List<City> cityList; //一方关联多方
}