JavaWeb Ajax二级联动&Bootstrap的基本使用

最新推荐文章于 2024-05-06 11:37:52 发布

時宜

最新推荐文章于 2024-05-06 11:37:52 发布

阅读量1k

点赞数 5

本文链接：https://blog.csdn.net/weixin_62270300/article/details/124547772

版权

Bootstrap首页表格搭建&&无刷新分页

上期回顾

Ajax的基本使用https://blog.csdn.net/weixin_62270300/article/details/124493357?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22124493357%22%2C%22source%22%3A%22weixin_62270300%22%7D&ctrtid=QNkDj

一、Ajax二级联动

效果图如下：

province.jsp(界面代码)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 <script src="jquery/jquery-3.3.1.js"></script>
</head>
<body>
 <select id="province" onchange="changeCity()"></select>
   <select id="city"></select>
   <script type="text/javascript">
   
   let province=$("#province")
   let city=$("#city")
   
 function changeCity(){
        $.get('region.do',{rid:province.val()},(resp)=>{
            //清空原来的内容
            city.empty()
            //遍历数组  循环添加内容
            for(let r of resp){
                city.append("<option value='"+r.id+"'>"+r.name+"</option>")
            }
        },"json")
    }
   //jquery的加载事件
   $(()=>{
       //显示省份
       $.get('region.do',{rid:0},(resp)=>{
           //清空原来的内容
           province.empty()
           //遍历数组  循环添加内容
           for(let r of resp){
               province.append("<option value='"+r.id+"'>"+r.name+"</option>")
           }
           //省份遍历成功了
           //接下来遍历城市
           changeCity()
       },"json")
   })
	  

   </script>
</body>
</html>

RegionServlet.java

package com.zking.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

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 com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.biz.IRegionBiz;
import com.zking.biz.impl.RegionBizImpl;
import com.zking.pojo.Region;

@WebServlet("/region.do")
public class RegionServlet extends HttpServlet{
	
	 private ObjectMapper mapper=new ObjectMapper();
	private IRegionBiz regionBiz=new RegionBizImpl();

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		//先拿到rid
		Integer rid =Integer.parseInt( req.getParameter("rid"));
		//根据rid 查询对应的结果
		List<Region>list=regionBiz.list(rid);
		//设置响应格式的编码
        resp.setCharacterEncoding("utf-8");
		//通过响应丢出去
		PrintWriter out = resp.getWriter();
		//转成jsno字符串
		String jsno = mapper.writeValueAsString(list);
		out.println(jsno);
	}
}

IRegionBiz.java(区域逻辑接口)

package com.zking.biz;

import java.util.List;

import com.zking.pojo.Region;

public interface IRegionBiz {

	List<Region> list(int rid);
	
}

RegionBizImpl.java(区域逻辑接口实现类)

package com.zking.biz.impl;

import java.util.List;

import com.zking.biz.IRegionBiz;
import com.zking.dao.IRegionDao;
import com.zking.dao.impl.RegionDaoImpl;
import com.zking.pojo.Region;

public class RegionBizImpl implements IRegionBiz{

	private IRegionDao regionDao=new RegionDaoImpl();
	
	@Override
	public List<Region> list(int rid) {
		return regionDao.list(rid);
	}
	
}

IRegionDao.java(区域访问数据接口)

package com.zking.dao;

import java.util.List;

import com.zking.pojo.Region;

public interface IRegionDao {

	List<Region>list(int rid);
}

RegionDaoImpl.java(区域访问数据接口实现类)

package com.zking.dao.impl;

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

import com.zking.dao.IRegionDao;
import com.zking.pojo.Region;
import com.zking.util.DBHelper;

public class RegionDaoImpl implements IRegionDao{

	private Connection con;
	private PreparedStatement ps;
	private ResultSet rs;
	@Override
	public List<Region> list(int rid) {
		List<Region>list=new ArrayList<>();
		try {
			con=DBHelper.getCon();
			ps=con.prepareStatement("select*from bs_region where rid=?");
			ps.setInt(1, rid);
			rs=ps.executeQuery();
			while(rs.next()) {
				Region region=new Region();
				region.setId(rs.getInt(1));
				region.setName(rs.getString(2));
				region.setRid(rs.getInt(3));
				list.add(region);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}finally {
			DBHelper.close(con, ps, rs);
		}
		return list;
	}
  
	
}

Region.java(区域实体类)

package com.zking.pojo;

public class Region {

	private Integer  id;
	private String name;
	private Integer rid;
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Integer getRid() {
		return rid;
	}
	public void setRid(Integer rid) {
		this.rid = rid;
	}
	public Region(Integer id, String name, Integer rid) {
		super();
		this.id = id;
		this.name = name;
		this.rid = rid;
	}
	
	public Region() {
		// TODO Auto-generated constructor stub
	}
	@Override
	public String toString() {
		return "Region [id=" + id + ", name=" + name + ", rid=" + rid + "]";
	}
	
	
}

数据库的建立

bs_region(区域表)

create sequence seq_region;

--省表
create table bs_region
(
    id   number      NOT NULL PRIMARY KEY,
    name varchar(32) NOT NULL,
    rid  int         NOT NULL
);

--省
insert into bs_region
values (1, '北京市', 0);
insert into bs_region
values (seq_region.nextval, '天津市', 0);
insert into bs_region
values (seq_region.nextval, '上海市', 0);
insert into bs_region
values (seq_region.nextval, '重庆市', 0);
insert into bs_region
values (seq_region.nextval, '河北省', 0);
insert into bs_region
values (seq_region.nextval, '山西省', 0);
insert into bs_region
values (seq_region.nextval, '台湾省', 0);
insert into bs_region
values (seq_region.nextval, '辽宁省', 0);
insert into bs_region
values (seq_region.nextval, '吉林省', 0);
insert into bs_region
values (seq_region.nextval, '黑龙江省', 0);
insert into bs_region
values (seq_region.nextval, '江苏省', 0);
insert into bs_region
values (seq_region.nextval, '浙江省', 0);
insert into bs_region
values (seq_region.nextval, '安徽省', 0);
insert into bs_region
values (seq_region.nextval, '福建省', 0);
insert into bs_region
values (seq_region.nextval, '江西省', 0);
insert into bs_region
values (seq_region.nextval, '山东省', 0);
insert into bs_region
values (seq_region.nextval, '河南省', 0);
insert into bs_region
values (seq_region.nextval, '湖北省', 0);
insert into bs_region
values (seq_region.nextval, '湖南省', 0);
insert into bs_region
values (seq_region.nextval, '广东省', 0);
insert into bs_region
values (seq_region.nextval, '甘肃省', 0);
insert into bs_region
values (seq_region.nextval, '四川省', 0);
insert into bs_region
values (seq_region.nextval, '贵州省', 0);
insert into bs_region
values (seq_region.nextval, '海南省', 0);
insert into bs_region
values (seq_region.nextval, '云南省', 0);
insert into bs_region
values (seq_region.nextval, '青海省', 0);
insert into bs_region
values (seq_region.nextval, '陕西省', 0);
insert into bs_region
values (seq_region.nextval, '广西壮族自治区', 0);
insert into bs_region
values (seq_region.nextval, '西藏自治区', 0);
insert into bs_region
values (seq_region.nextval, '宁夏回族自治区', 0);
insert into bs_region
values (seq_region.nextval, '新疆维吾尔自治区', 0);
insert into bs_region
values (seq_region.nextval, '内蒙古自治区', 0);
insert into bs_region
values (seq_region.nextval, '澳门特别行政区', 0);
insert into bs_region
values (seq_region.nextval, '香港特别行政区', 0);

--插入各个省的城市数据
--4个直辖市  ;
insert into bs_region
values (seq_region.nextval, '北京市', 1);
insert into bs_region
values (seq_region.nextval, '天津市', 2);
insert into bs_region
values (seq_region.nextval, '上海市', 3);
insert into bs_region
values (seq_region.nextval, '重庆市', 4);
--5河北省(2005年辖：11个地级市，36个市辖区、22个县级市、108个县、6个自治县)  ;
insert into bs_region
values (seq_region.nextval, '石家庄市', 5);
insert into bs_region
values (seq_region.nextval, '唐山市', 5);
insert into bs_region
values (seq_region.nextval, '秦皇岛市', 5);
insert into bs_region
values (seq_region.nextval, '邯郸市', 5);
insert into bs_region
values (seq_region.nextval, '邢台市', 5);
insert into bs_region
values (seq_region.nextval, '保定市', 5);
insert into bs_region
values (seq_region.nextval, '张家口市', 5);
insert into bs_region
values (seq_region.nextval, '承德市', 5);
insert into bs_region
values (seq_region.nextval, '沧州市', 5);
insert into bs_region
values (seq_region.nextval, '廊坊市', 5);
insert into bs_region
values (seq_region.nextval, '衡水市', 5);
--6山西省11个城市  ;
insert into bs_region
values (seq_region.nextval, '太原市', 6);
insert into bs_region
values (seq_region.nextval, '大同市', 6);
insert into bs_region
values (seq_region.nextval, '阳泉市', 6);
insert into bs_region
values (seq_region.nextval, '长治市', 6);
insert into bs_region
values (seq_region.nextval, '晋城市', 6);
insert into bs_region
values (seq_region.nextval, '朔州市', 6);
insert into bs_region
values (seq_region.nextval, '晋中市', 6);
insert into bs_region
values (seq_region.nextval, '运城市', 6);
insert into bs_region
values (seq_regi

最低0.47元/天解锁文章

時宜

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb Ajax二级联动&Bootstrap的基本使用

上期回顾Ajax的基本使用https://blog.csdn.net/weixin_62270300/article/details/124493357?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22124493357%22%2C%22source%22%3A%22weixin_62270300%22%7D&ctrtid=QNkDj一、Ajax二级联动效果
复制链接

扫一扫