新了解的，简单的记录一下Ajax之三级联动

首先需要创建数据库，以下图片是个例子，可供参考~~~

创建完数据库后就需要再自己的开发软件中连接数据库，以及创建出与数据库相应的实体类了。

实体类中需要其相应的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如下：