JavaScript·jquery Ajax下·省市区三级联动

最新推荐文章于 2024-08-27 13:38:21 发布

XL水墨云烟

最新推荐文章于 2024-08-27 13:38:21 发布

阅读量710

点赞数

文章标签： javascript jquery ajax

本文链接：https://blog.csdn.net/m0_64899073/article/details/122305026

版权

省市区三级联动

数据库

js页面

<%@ 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 type="text/javascript">
         $(function () {
            $.ajax({
               type:"get",
                url:"findprovice",
                dataType:"json",
                success:function (data) {
                       var obj = $("#provice");
                    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="provice" name="provice">
          <option>请选择</option>
      </select>省
      <select id="city" name="city">
          <option>请选择</option>
      </select>市
      <select id="district" name="district">
          <option>请选择</option>
      </select>区
<script type="text/javascript">

$("#provice").change(function () {
    $("#city option").remove();
    $.ajax({
        type: "post",
        url: "FindCityServlet?pid="+$("#provice").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);
            }

        }
    });
});


$("#city").change(function () {
    $("#district option").remove();
    $.ajax({
        type: "get",
        url: "FindDistrictServlet?cid="+$("#city").val(),
        dataType: "json",
        success:function (data) {
            var obj = $("#district");
            for (var i = 0; i < data.length; i++) {
                var ob = "<option value="+data[i].did +">"+data[i].dname+"</option>"
                obj.append(ob);
            }
        }
    });
});

</script>

</body>
</html>

查询省：

public class Provice {
    private int pid;
    private String pname;

    public int getPid() {
        return pid;
    }

    public void setPid(int pid) {
        this.pid = pid;
    }

    public String getPname() {
        return pname;
    }

    public void setPname(String pname) {
        this.pname = pname;
    }

    public Provice(int pid, String pname) {
        this.pid = pid;
        this.pname = pname;
    }

    public Provice(String pname) {
        this.pname = pname;
    }

    public Provice() {
    }

    @Override
    public String toString() {
        return "provice{" +
                "pid=" + pid +
                ", pname='" + pname + '\'' +
                '}';
    }
}



 interface IProviceDao {
    public List<Provice> findAll();
}


class IProviceDaoImpl implements IProviceDao {
    @Override
    public List<Provice> findAll() {
        List<Provice> list = new ArrayList<Provice>();
        Connection con = DBHelper.getCon();
        String sql = "SELECT * FROM provice";
        try {
            PreparedStatement ps = con.prepareStatement(sql);
            ResultSet rs = ps.executeQuery();
            while (rs.next()){
                Provice p =new Provice(rs.getInt(1),rs.getString(2));
                list.add(p);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
         return list;
    }
}
 void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        IProviceDao ipd = new IProviceDaoImpl();
        List<Provice> plist = ipd.findAll();
        System.out.println(JSONObject.toJSONString(plist));
        response.getWriter().write(JSONObject.toJSONString(plist));
    }

查询市：

public class City {
   private int cid;
    private String cname;
    private int pid;

    public int getCid() {
        return cid;
    }

    public void setCid(int cid) {
        this.cid = cid;
    }

    public String getCname() {
        return cname;
    }

    public void setCname(String cname) {
        this.cname = cname;
    }

    public int getPid() {
        return pid;
    }

    public void setPid(int pid) {
        this.pid = pid;
    }

    public City(int cid, String cname, int pid) {
        this.cid = cid;
        this.cname = cname;
        this.pid = pid;
    }

    public City(String cname, int pid) {
        this.cname = cname;
        this.pid = pid;
    }

    public City() {
    }

    @Override
    public String toString() {
        return "city{" +
                "cid=" + cid +
                ", cname='" + cname + '\'' +
                ", pid=" + pid +
                '}';
    }
}

interface ICity {
    public List<City> findCityById(int id);
}

class IProviceDaoImpl implements IProviceDao {
    @Override
    public List<Provice> findAll() {
        List<Provice> list = new ArrayList<Provice>();
        Connection con = DBHelper.getCon();
        String sql = "SELECT * FROM provice";
        try {
            PreparedStatement ps = con.prepareStatement(sql);
            ResultSet rs = ps.executeQuery();
            while (rs.next()){
                Provice p =new Provice(rs.getInt(1),rs.getString(2));
                list.add(p);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
         return list;
    }
}

@WebServlet(name = "FindproviceServlet", value = "/findprovice")
class FindproviceServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        IProviceDao ipd = new IProviceDaoImpl();
        List<Provice> plist = ipd.findAll();
        System.out.println(JSONObject.toJSONString(plist));
        response.getWriter().write(JSONObject.toJSONString(plist));
    }

2022/01/04

XL水墨云烟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript·jquery Ajax下·省市区三级联动

省市区三级联动数据库js页面<%@ 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> <scrip.
复制链接

扫一扫