首先需要创建数据库,以下图片是个例子,可供参考~~~
创建完数据库后就需要再自己的开发软件中连接数据库,以及创建出与数据库相应的实体类了。
实体类中需要其相应的gei set 无参 有参 toString 等相应的方法。
以及实现出相应的方法以及接口,参考代码如下:
一级代码:
接口与实现接口:
public class ProvinceDaoimpl implements ProvinceDao {
@Override
public List<Province> findAll() {
Connection conn = DBTools.getConn();
List<Province> list = new ArrayList<>();
String sql = "SELECT * FROM province";
try {
PreparedStatement ps = conn.prepareStatement(sql);
ResultSet rs = ps.executeQuery();
System.out.println("rs = " + rs);
while (rs.next()){
Province p = new Province();
p.setPid(rs.getInt(1));
p.setPname(rs.getString(2));
list.add(p);
System.out.println("p = " + p);
System.out.println("list = " + list);
}
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
}
然后是后台代码servlet:
@WebServlet("/findProvinceServlet")
public class findProvinceServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
ProvinceDao pid = new ProvinceDaoimpl();
List<Province> plist = pid.findAll();
System.out.println("plist = " + plist);
response.getWriter().write(JSONObject.toJSONString(plist));
}
}
二级代码:
接口与实现接口:
public class CityDaoimpl implements CityDao {
@Override
public List<City> findAll(int pid) {
Connection conn = DBTools.getConn();
List<City> clist = new ArrayList<>();
String sql = "SELECT * FROM city where pid = ?";
try {
PreparedStatement ps = conn.prepareStatement(sql);
ps.setInt(1,pid);
ResultSet rs = ps.executeQuery();
System.out.println("rs = " + rs);
while (rs.next()){
City c = new City();
c.setCid(rs.getInt(1));
c.setCname(rs.getString(2));
c.setPid(rs.getInt(3));
clist.add(c);
System.out.println("c = " + c);
System.out.println("clist = " + clist);
}
} catch (SQLException e) {
e.printStackTrace();
}
return clist;
}
}
后台代码servlet:
@WebServlet("/findCityServlet")
public class findCityServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String id = request.getParameter("id");
CityDao cid = new CityDaoimpl();
List<City> list = cid.findAll(Integer.parseInt(id));
response.getWriter().write(JSONObject.toJSONString(list));
System.out.println("list = " + list);
}
}
三级代码:
接口与实现接口:
public class AreaDaoimpl implements AreaDao {
@Override
public List<Area> findAll(int cid) {
Connection conn = DBTools.getConn();
List<Area> alist = new ArrayList<>();
String sql = "SELECT * FROM area where cid = ?";
try {
PreparedStatement ps = conn.prepareStatement(sql);
ps.setInt(1,cid);
ResultSet rs = ps.executeQuery();
System.out.println("rs = " + rs);
while (rs.next()){
Area a = new Area();
a.setAid(rs.getInt(1));
a.setAname(rs.getString(2));
a.setCid(rs.getInt(3));
alist.add(a);
// System.out.println("c = " + c);
// System.out.println("clist = " + clist);
}
} catch (SQLException e) {
e.printStackTrace();
}
return alist;
}
}
后台代码servlet:
@WebServlet("/findAreaServlet")
public class findAreaServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String id = request.getParameter("id");
AreaDao aid = new AreaDaoimpl();
List<Area> list = aid.findAll(Integer.parseInt(id));
response.getWriter().write(JSONObject.toJSONString(list));
System.out.println("list = " + list);
}
}
前端代码:
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(function () {
$.ajax({
type:"get",
url:"findProvinceServlet",
dataType:"json",
success:function (data) {
var obj = $("#province");
for (var i = 0;i<data.length;i++) {
var ob = "<option value='"+data[i].pid+"'>"+data[i].pname+"</option>";
obj.append(ob);
}
}
})
})
</script>
</head>
<body>
<select id="province" name="province">
<option value="0">请选择游戏</option>
</select>
<script>
$(function () {
$("#province").change(function () {
//alert("dasad");
$("#city option").remove();
$.ajax({
type:"get",
url:"findCityServlet?id="+$("#province").val(),
dataType:"json",
success:function (data) {
var obj = $("#city");
for (var i = 0;i<data.length;i++) {
var ob = "<option value='"+data[i].cid+"'>"+data[i].cname+"</option>";
obj.append(ob);
}
}
});
});
});
</script>
<select id="city" name="city">
<option value="0" >请选择定位</option>
</select>
<select id="distric" name="distric">
<option value="0">请选择英雄/枪械<option>
</select>
<script>
$(function () {
$("#city").change(function () {
//alert("dasad");
$("#distric option").remove();
$.ajax({
type:"get",
url:"findAreaServlet?id="+$("#city").val(),
dataType:"json",
success:function (data) {
var obj = $("#distric");
for (var i = 0;i<data.length;i++) {
var ob = "<option value='"+data[i].aid+"'>"+data[i].aname+"</option>";
obj.append(ob);
}
}
});
});
});
</script>
</body>
</html>
该项目使用的jar如下: