J2EE知识点4 - AJAX联动 - 《Java笔记》

实现选择联动，例如选择中国，只出现中国的地区，选择地区后只出现该地区的城市
domain包、util包不详细展示

controller**

package controller;
import domain.Country;
import service.CountryService;
import util.MySpring;
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 {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        CountryService countryService= MySpring.getBean("service.CountryService");
        ArrayList<Country> countryArrayList= countryService.selectAllCountry();
        req.setAttribute("countryArrayList",countryArrayList);
        req.getRequestDispatcher("regist.jsp").forward(req,resp);
    }
}

package controller;
import domain.Area;
import service.AreaService;
import util.MySpring;
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 {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String cid=req.getParameter("cid");
        AreaService areaService= MySpring.getBean("service.AreaService");
        ArrayList<Area> areaArrayList=areaService.selectAreaByCid(Integer.parseInt(cid));
        req.setAttribute("areaArrayList",areaArrayList);
        //1.转发  JSP（本身就是拼接响应 内容就是响应信息）
        req.getRequestDispatcher("handleAreaList.jsp").forward(req,resp);
        //2.自己拼接响应（JSON）
    }
}

package controller;

import domain.City;
import service.CityService;
import util.MySpring;

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("/selectCityByAid")
public class SelectCityByAidController extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String aid=req.getParameter("aid");
        CityService cityService= MySpring.getBean("service.CityService");
        ArrayList<City> cityArrayList= cityService.selectCityByAid(Integer.parseInt(aid));
        req.setAttribute("cityArrayList",cityArrayList);
        req.getRequestDispatcher("handleCityList.jsp").forward(req,resp);
    }
}

dao

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;

public class AreaDao {
    private String className="com.mysql.jdbc.Driver";
    private String url="jdbc:mysql://localhost:3306/cons";
    private String password="cy414ljh212,,,";
    public ArrayList<Area> selectAreaByCid(Integer cid){
        ArrayList<Area> areaArrayList=new ArrayList<>();
        Area area=null;
        try {
            Class.forName(className);
            Connection connection= DriverManager.getConnection(url,"root",password);
            String sql="SELECT AID, ANAME FROM AREA WHERE CID = ?";
            PreparedStatement preparedStatement=connection.prepareStatement(sql);
            preparedStatement.setInt(1,cid);
            ResultSet resultSet=preparedStatement.executeQuery();
            while (resultSet.next()){
                Country country=new Country(cid,null) ;
                area=new Area(resultSet.getInt("aid"), resultSet.getString("aname"),country);
                areaArrayList.add(area);
            }
            resultSet.close();
            preparedStatement.close();
        }catch (Exception e){
            e.printStackTrace();
        }
        return areaArrayList;
    }
}

package dao;

import domain.Area;
import domain.City;

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

public class CityDao {
    private String className="com.mysql.jdbc.Driver";
    private String url="jdbc:mysql://localhost:3306/cons";
    private String password="cy414ljh212,,,";
    public ArrayList<City> selectCityByAid(Integer aid){
        ArrayList<City> cityArrayList=new ArrayList<>();
        City city=null;
        try {
            Class.forName(className);
            Connection connection= DriverManager.getConnection(url,"root",password);
            String sql="SELECT CITYID, CITYNAME, CITYSIZE FROM CITY WHERE AID = ?";
            PreparedStatement preparedStatement=connection.prepareStatement(sql);
            preparedStatement.setInt(1,aid);
            ResultSet resultSet=preparedStatement.executeQuery();
            while (resultSet.next()){
                Area area=new Area(aid,null,null) ;
                city=new City(resultSet.getInt("cityid"), resultSet.getString("cityname"),resultSet.getInt("citysize"),area);
                cityArrayList.add(city);
            }
            resultSet.close();
            preparedStatement.close();
        }catch (Exception e){
            e.printStackTrace();
        }
        return cityArrayList;
    }
}

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 {
    private String className="com.mysql.jdbc.Driver";
    private String url="jdbc:mysql://localhost:3306/cons";
    private String password="cy414ljh212,,,";
    public ArrayList<Country> selectAllCountry(){
        ArrayList<Country> countryArrayList=new ArrayList<>();
        Country country=null;
        try {
            Class.forName(className);
            Connection connection= DriverManager.getConnection(url,"root",password);
            String sql="SELECT CID, CNAME FROM COUNTRY";
            PreparedStatement preparedStatement=connection.prepareStatement(sql);
            ResultSet resultSet=preparedStatement.executeQuery();
            while (resultSet.next()){
                country=new Country(resultSet.getInt("cid"), resultSet.getString("cname"));
                countryArrayList.add(country);
            }
            resultSet.close();
            preparedStatement.close();
        }catch (Exception e){
            e.printStackTrace();
        }
        return countryArrayList;
    }
}

service

package service;

import dao.AreaDao;
import domain.Area;
import util.MySpring;

import java.util.ArrayList;

public class AreaService {
    private AreaDao areaDao= MySpring.getBean("dao.AreaDao");
    public ArrayList<Area> selectAreaByCid(Integer cid){
        return areaDao.selectAreaByCid(cid);
    }
}

package service;

import dao.CityDao;
import domain.City;
import util.MySpring;

import java.util.ArrayList;

public class CityService {
    private CityDao cityDao= MySpring.getBean("dao.CityDao");
    public ArrayList<City> selectCityByAid(Integer aid){
        return cityDao.selectCityByAid(aid);
    }
}

package service;

import dao.CountryDao;
import domain.Country;
import util.MySpring;

import java.util.ArrayList;

public class CountryService {
    private CountryDao countryDao= MySpring.getBean("dao.CountryDao");

    public ArrayList<Country> selectAllCountry(){
        return countryDao.selectAllCountry();
    }
}

handleAreaList.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
    <head>
    </head>
    <body>
        <select id="areaSelect">
            <option>==请选择==</option>
            <c:forEach var="area" items="${requestScope.areaArrayList}">
                <option value="${area.aid}">${area.aname}</option>
            </c:forEach>
        </select>
    </body>
</html>

handleCityList.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
    <head>
    </head>
    <body>
        <select id="citySelect">
            <option>==请选择==</option>
            <c:forEach var="city" items="${requestScope.cityArrayList}">
                <option value="${city.cityid}">${city.cityname}</option>
            </c:forEach>
        </select>
    </body>
</html>

index.jsp

<%@ 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="username" value=""><br>
            密码：<input type="password" name="password" value=""><br>
            <input type="submit" value="登录">
            <input id="regist" type="button" value="注册">
        </form>
    </body>
</html>

regist.jsp

<%@ 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 () {
                    //发送异步请求，首先创建一个对象
                    var xmlHttp=new XMLHttpRequest();
                    //打开一个管道（用来与服务器进行通信）
                    xmlHttp.open("post","selectAreaByCid?cid="+this.value,true);
                    //发送请求
                    xmlHttp.send();
                    xmlHttp.onreadystatechange=function () {
                        if(xmlHttp.readyState==4&&xmlHttp.status==200){
                            //处理信息
                            //找到地区的那个span标签
                            var areaSpanEle=document.getElementById("areaSpan");
                            //将响应信息放入标签，即handleAreaList中的内容
                            areaSpanEle.innerHTML=xmlHttp.responseText;
                            document.getElementById("areaSelect").onchange=function () {
                                var xmlHttp1=new XMLHttpRequest();
                                xmlHttp1.open("post","selectCityByAid?aid="+this.value,true);
                                xmlHttp1.send();
                                xmlHttp1.onreadystatechange=function () {
                                    if(xmlHttp1.readyState==4&&xmlHttp1.status==200){
                                        var citySpanEle=document.getElementById("citySpan");
                                        citySpanEle.innerHTML=xmlHttp1.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.countryArrayList}">
                    <option value="${country.cid}">${country.cname}</option>
                </c:forEach>
            </select>
            地区:
            <span id="areaSpan">
                <select>
                    <option>==请选择==</option>
                </select>
            </span>
            城市:
            <span id="citySpan">
                <select>
                    <option>==请选择==</option>
                </select>
            </span>
            <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>

https://github.com/klxh-max/ajax-linkage代码github链接