AJAX联动小案例

package controller;

import domain.Country;
import service.CountryService;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;

@WebServlet("/selectAllCountry")
public class SelectAllCountryController extends HttpServlet {

    //service对象作为属性
    private CountryService service = new CountryService();

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //取值
        //调用
        ArrayList<Country> countryList = service.selectAllCountry();
        System.out.println("控制层"+countryList);
        //将查询的信息存入request作用域就可以啦
        request.setAttribute("countryList",countryList);
        //转发给regist.jsp拼接响应信息
        request.getRequestDispatcher("regist.jsp").forward(request,response);
    }
}

package controller;

import domain.Area;
import service.AreaService;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;

@WebServlet("/selectAreaByCid")
public class SelectAreaByCidController extends HttpServlet {

    private AreaService service = new AreaService();

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //接收参数
        Integer cid = Integer.parseInt(request.getParameter("cid"));
        //找寻业务层做事
        ArrayList<Area> areaList = service.selectAreaByCid(cid);

        //查询的结果响应回浏览器
        //1.转发----JSP(服务于我们的 帮我们做拼接的 内容是响应)
        request.setAttribute("areaList",areaList);
        request.getRequestDispatcher("handleAreaList.jsp").forward(request,response);
        //中间利用了一个JSP帮我们处理响应信息的拼接
        //JSP多了一个文件 JSP底层需要解析 性能不好啦


        //2.自己拼接响应
        //  集合里面的内容处理一下 将整个信息相应回去
        //  areaList集合---->写入一个文件XML---->传递给AJAX---->AJAX读取XML文件内容---->展示
        //  AJAX    异步--发送和处理都需要JavaScript XML数据的存储和传输
        //  areaList集合---->String---->AJAX接收---->JS处理(解析JSON)---->展示
        //                   JSON
        //                  JavaScript Object Notation
    }
}

package dao;

import domain.Area;
import domain.Country;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
@SuppressWarnings("ALL")
public class AreaDao {

    //设计一个方法 根据cid查询对应的所有地区
    public ArrayList<Area> selectAreaByCid(Integer cid){
        ArrayList<Area> areaList = new ArrayList<>();
        String driver = "com.mysql.jdbc.Driver";
        String url = "jdbc:mysql://localhost:3306/cons?useSSL=false";
        String user = "root";
        String password = "root";
        String sql = "SELECT AID,ANAME,CID FROM AREA WHERE CID = ?";
        try {
            Class.forName(driver);
            Connection conn = DriverManager.getConnection(url,user,password);
            PreparedStatement pstat = conn.prepareStatement(sql);
            pstat.setInt(1,cid);
            ResultSet rs = pstat.executeQuery();
            while(rs.next()){
                Area area = new Area();
                area.setAid(rs.getInt("aid"));
                area.setAname(rs.getString("aname"));
                area.setCountry(new Country(rs.getInt("cid"),null));
                areaList.add(area);
            }
            rs.close();
            pstat.close();
            conn.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return areaList;
    }
}

package dao;

import domain.Country;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;

public class CountryDao {

    //查询所有的国家
    public ArrayList<Country> selectAllCountry(){
        ArrayList<Country> countryList = new ArrayList<>();
        String driver = "com.mysql.jdbc.Driver";
        String url = "jdbc:mysql://localhost:3306/cons?useSSL=false";
        String user = "root";
        String password = "root";
        String sql = "SELECT CID,CNAME FROM COUNTRY";
        try {
            Class.forName(driver);
            Connection conn = DriverManager.getConnection(url,user,password);
            PreparedStatement pstat = conn.prepareStatement(sql);
            ResultSet rs = pstat.executeQuery();
            while(rs.next()){
                countryList.add(new Country(rs.getInt("cid"),rs.getString("cname")));
            }
            rs.close();
            pstat.close();
            conn.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return countryList;
    }
}

package domain;

public class Area {

    private Integer aid;
    private String aname;
    private Country country;

    public Area() {
    }

    public Area(Integer aid, String aname, Country country) {
        this.aid = aid;
        this.aname = aname;
        this.country = country;
    }

    public Integer getAid() {
        return aid;
    }

    public void setAid(Integer aid) {
        this.aid = aid;
    }

    public String getAname() {
        return aname;
    }

    public void setAname(String aname) {
        this.aname = aname;
    }

    public Country getCountry() {
        return country;
    }

    public void setCountry(Country country) {
        this.country = country;
    }
}

package domain;

public class City {

    private Integer cityid;
    private String cityname;
    private Float citysize;
    private Area area;

    public City() {
    }

    public City(Integer cityid, String cityname, Float citysize, Area area) {
        this.cityid = cityid;
        this.cityname = cityname;
        this.citysize = citysize;
        this.area = area;
    }

    public Integer getCityid() {
        return cityid;
    }

    public void setCityid(Integer cityid) {
        this.cityid = cityid;
    }

    public String getCityname() {
        return cityname;
    }

    public void setCityname(String cityname) {
        this.cityname = cityname;
    }

    public Float getCitysize() {
        return citysize;
    }

    public void setCitysize(Float citysize) {
        this.citysize = citysize;
    }

    public Area getArea() {
        return area;
    }

    public void setArea(Area area) {
        this.area = area;
    }
}

package domain;

public class Country {

    private Integer cid;
    private String cname;

    public Country() {
    }

    public Country(Integer cid, String cname) {
        this.cid = cid;
        this.cname = cname;
    }

    public Integer getCid() {
        return cid;
    }

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

    public String getCname() {
        return cname;
    }

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

package service;

import dao.AreaDao;
import domain.Area;

import java.util.ArrayList;

public class AreaService {

    //dao作为树形
    private AreaDao dao = new AreaDao();

    //根据国家编号查询地区
    public ArrayList<Area> selectAreaByCid(Integer cid){
        return dao.selectAreaByCid(cid);
    }
}

package service;

import dao.CountryDao;
import domain.Country;

import java.util.ArrayList;

public class CountryService {

    //需要一个dao作为属性
    private CountryDao dao = new CountryDao();

    //一个查询所有国家的方法
    public ArrayList<Country> selectAllCountry(){
        return dao.selectAllCountry();
    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <script type="text/javascript">
      window.onload = function () {
          document.getElementById("regist").onclick = function () {
              window.location.href = "selectAllCountry";
          }
      }
    </script>
  </head>
  <body>
    <form action="" method="post">
      账号:<input type="text" name="name" value=""><br>
      密码:<input type="password" name="password" value=""><br>
      <input type="submit" value="登录">
      <input id="regist" type="button" value="注册">
    </form>
  </body>
</html>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
    <head>
        <script type="text/javascript">
            window.onload = function () {
                document.getElementById("countrySelect").onchange = function () {
                    //发送一个异步请求
                    //1.创建一个对象
                    var xmlhttp = new XMLHttpRequest();
                    //2.打开一个AJAX连接 模拟一个异步请求
                    xmlhttp.open("post","selectAreaByCid?cid="+this.value,true);
                    //3.发送请求
                    xmlhttp.send();
                    //4.一直观察着响应的状态 状态为4的时候 处理响应信息
                    xmlhttp.onreadystatechange = function () {
                        if(xmlhttp.readyState==4 && xmlhttp.status==200){
                            //处理信息
                            //找到地区的那个span标签
                            var areaSpanEle = document.getElementById("areaSpan");
                            //将响应信息放入这个标签内即可
                            areaSpanEle.innerHTML = xmlhttp.responseText;
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
        <form action="" method="post">
            账号:<input type="text" name="name" value=""><br>
            密码:<input type="text" name="name" value=""><br>
            确认:<input type="text" name="name" value=""><br>
            性别:
            <input type="radio" name="sex" value="男">男
            <input type="radio" name="sex" value="女">女
            <br>
            国家:
            <select id="countrySelect">
                <option>==请选择==</option>
                <c:forEach var="country" items="${requestScope.countryList}">
                    <option value="${country.cid}">${country.cname}</option>
                </c:forEach>
            </select>
            地区:
            <span id="areaSpan">
                <select>
                    <option>==请选择==</option>
                </select>
            </span>
            城市:
            <select>
                <option>==请选择==</option>
            </select>
            <br>
            电话:<input type="text" name="name" value=""><br>
            邮箱:<input type="text" name="name" value=""><br>
            <input type="submit" value="注册">
            <input type="reset" value="重置">
        </form>
    </body>
</html>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<select id="areaSelect">
    <option>==请选择==</option>
    <c:forEach var="area" items="${requestScope.areaList}">
        <option value="${area.aid}">${area.aname}</option>
    </c:forEach>
</select>