Java Web:AJAX一级下拉框，JSON，项目开发的步骤，整合servlet，学习笔记【诗书画唱】
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for `addr`
-- ----------------------------
DROP TABLE IF EXISTS `addr`;
CREATE TABLE `addr` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`pid` int(11) DEFAULT NULL,
`name` varchar(20) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=16 DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of addr
-- ----------------------------
中国共计34个省级行政区，包括23个省、5个自治区、4个直辖市、2个特别行政区。
23个省分别为：河北省、山西省、辽宁省、吉林省、黑龙江省、江苏省、浙江省、安徽省、福建省、江西省、山东省、河南省、湖北省、湖南省、广东省、海南省、
四川省、贵州省、云南省、陕西省、甘肃省、青海省、台湾省。
5个自治区分别为：内蒙古自治区、广西壮族自治区、西藏自治区、宁夏回族自治区、新疆维吾尔自治区。
4个直辖市分别为：北京市、天津市、上海市、重庆市。
2个特别行政区分别为：香港特别行政区、澳门特别行政区。
INSERT INTO `addr` VALUES ('1', '0', '河北省');
INSERT INTO `addr` VALUES ('2', '0', '山西省');
INSERT INTO `addr` VALUES ('3', '0', '辽宁省');
INSERT INTO `addr` VALUES ('4', '0', '吉林省');
INSERT INTO `addr` VALUES ('5', '0', '黑龙江省');
INSERT INTO `addr` VALUES ('6', '0', '江苏省');
INSERT INTO `addr` VALUES ('7', '0', '浙江省');
INSERT INTO `addr` VALUES ('8', '0', '安徽省');
INSERT INTO `addr` VALUES ('9', '0', '福建省');
INSERT INTO `addr` VALUES ('10', '0', '江西省');
INSERT INTO `addr` VALUES ('11', '0', '山东省');
INSERT INTO `addr` VALUES ('12', '0', '河南省');
INSERT INTO `addr` VALUES ('13', '0', '湖北省');
INSERT INTO `addr` VALUES ('14', '0', '湖南省');
INSERT INTO `addr` VALUES ('15', '0', '海南省');
INSERT INTO `addr` VALUES ('16', '0', '四川省');
INSERT INTO `addr` VALUES ('17', '0', '贵州省');
INSERT INTO `addr` VALUES ('18', '0', '云南省');
INSERT INTO `addr` VALUES ('19', '0', '陕西省');
INSERT INTO `addr` VALUES ('20', '0', '甘肃省');
INSERT INTO `addr` VALUES ('21', '0', '青海省');
INSERT INTO `addr` VALUES ('22', '0', '台湾省');
INSERT INTO `addr` VALUES ('23', '0', '内蒙古自治区');
INSERT INTO `addr` VALUES ('24', '0', '广西壮族自治区');
INSERT INTO `addr` VALUES ('25', '0', '西藏自治区');
INSERT INTO `addr` VALUES ('26', '0', '宁夏回族自治区');
INSERT INTO `addr` VALUES ('27', '0', '新疆维吾尔自治区');
INSERT INTO `addr` VALUES ('28', '0', '北京市');
INSERT INTO `addr` VALUES ('29', '0', '广东省');
INSERT INTO `addr` VALUES ('30', '0', '天津市');
INSERT INTO `addr` VALUES ('31', '0', '上海市');
INSERT INTO `addr` VALUES ('32', '0', '重庆市');
INSERT INTO `addr` VALUES ('33', '0', '香港特别行政区');
INSERT INTO `addr` VALUES ('34', '0', '澳门特别行政区');
package com.SSHC.bean;
public class Addr {
private Integer id;
private Integer pid;
private String name;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public Integer getPid() {
return pid;
}
public void setPid(Integer pid) {
this.pid = pid;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
package com.SSHC.controller;
import java.io.IOException;
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.SSHC.bean.Addr;
import com.SSHC.dao.AddrDao;
/**
* Servlet implementation class SelServlet
*/
@WebServlet("/ss")
public class addressKuangServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public addressKuangServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
this.doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//获取数据中的数据
String strPid = request.getParameter("pid");
Integer pid = -1;
if(strPid != null && strPid.length() > 0) {
pid = Integer.parseInt(strPid);
}
AddrDao ad = new AddrDao();
List<Addr>list = ad.selectByPid(pid);
//方法一：拼接html代码（可能会有兼容性问题）
// StringBuilder html = new StringBuilder("<option>请选择省份</option>");
// //<option value="1">湖南</option>
// for(Addr addr : list) {
// html.append("<option value=\"");
// html.append(addr.getId());
// html.append("\">");
// html.append(addr.getName());
// html.append("</option>");
// }
// System.out.println(html);
//方法二：拼接JSON字符串{},[]
//[{"id":1,"name":"湖南"},{"id":2,"name":"湖北"},{"id":3,"name":"江西"}]
StringBuilder jsonStr = new StringBuilder("[");
String dot = "";
for(Addr addr : list) {
jsonStr.append(dot);
jsonStr.append("{\"id\":");
jsonStr.append(addr.getId());
jsonStr.append(",\"name\":\"");
jsonStr.append(addr.getName());
jsonStr.append("\"}");
dot = ",";
}
jsonStr.append("]");
System.out.println(jsonStr);
response.setCharacterEncoding("utf-8");
//将数据传送到回调函数中
//response.getWriter().write(html.toString());
response.getWriter().write(jsonStr.toString());
}
}
package com.SSHC.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import com.SSHC.bean.Addr;
import com.SSHC.util.DbUtil;
public class AddrDao {
public List<Addr>selectByPid(Integer pid){
Connection conn = null;
PreparedStatement pstm = null;
ResultSet rs = null;
List<Addr>list = new ArrayList<Addr>();
String sql = "select * from addr where pid = ?";
try {
conn = DbUtil.getConn();
pstm = conn.prepareStatement(sql);
pstm.setInt(1, pid);
rs = pstm.executeQuery();
while(rs.next()) {
Integer id = rs.getInt("id");
String name = rs.getString("name");
Addr a = new Addr();
a.setId(id);
a.setName(name);
list.add(a);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} finally {
DbUtil.close(rs, pstm, conn);
}
return list;
}
}
package com.SSHC.util;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.Properties;
public class DbUtil {
private static String driverName;
private static String url;
private static String user;
private static String pwd;
static {
//读取properties文件
Properties prop = new Properties();
//将db.properties文件读取到内存中去
InputStream is = DbUtil.class.getClassLoader()
.getResourceAsStream("db.properties");
//加载内容
try {
prop.load(is);
//读取内容
driverName = prop.getProperty("dn");
url = prop.getProperty("url");
user = prop.getProperty("un");
pwd = prop.getProperty("up");
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
//获取数据库连接对象的方法
public static Connection getConn(){
Connection conn = null;
try {
Class.forName(driverName);
conn = DriverManager.getConnection(url,user,pwd);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return conn;
}
public static void close(ResultSet rs,PreparedStatement pstm
,Connection conn){
try {
if(rs != null) {
rs.close();
}
if(pstm != null) {
pstm.close();
}
if(conn != null) {
conn.close();
}
} catch(Exception e) {
e.printStackTrace();
}
}
}
dn=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/firstjsp?useUnicode=true&characterEncoding=UTF-8
un=root
up=root
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base hreff="<%=basePath%>">
<title></title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content=
"keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
* {
font-size: 23px;
}
</style>
<script type="text/javascript">
//页面中的所有的Html标签都被解析出来以后，就会运行下面的函数
window.onload = function(){
//获取省份下拉框
var prov = document.getElementById('province');
//获取省份下拉框中的数据（我现在执行了）
//从js代码跳转到java代码怎么实现呢？ajax
var xhr = createXhr();
if(xhr) {
//设置提交方式是POST提交和执行的servlet的url路径
xhr.open('POST','ss');
//设置ajax请求头
xhr.setRequestHeader("content-type",
"application/x-www-form-urlencoded");
//设置回调函数
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200){
//alert(xhr.responseText);
//有的浏览器不支持下拉框的innerHTML属性，所以会有兼容性问题。
//prov.innerHTML = xhr.responseText;
//alert(xhr.responseText);
//将json字符串转换成js数组
var arr = JSON.parse(xhr.responseText);
//对arr数组进行循环遍历
for(var i = 0;i < arr.length;i ++) {
var opt = arr[i];
//取出对象中的属性值
var id = opt.id;
var name = opt.name;
//创建一个option对象
var option = new Option(name,id);
//将option对象放到省份下拉框中
prov.add(option);
}
}
}
//提交ajax请求
xhr.send('pid=0');
}
}
//将创建XMLHttpRequest对象的方法封装起来
function createXhr(){
var xhr = null;
if(window.XMLHttpRequest) {
//判断window对象中是否有XMLHttpRequest属性
xhr = new XMLHttpRequest();
} else {
//如果没有XMLHttpRequest属性，就使用ActiveXObject创建
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
</script>
</head>
<body>
<select id="province">
<option>请选择省份</option>
</select>
<!-- <select id="city">
<option>请选择城市</option>
</select>-->
</body>
</html>
一、泛型参数
二、实现万能DAO
一、整合servlet
登录功能，注册功能，修改密码：公共模块
商品新增，商品修改，商品查询，商品删除：商品模块
"将一些功能放到同一个servlet中执行。根据模块功能整合，也就是说将同一个模块中
的功能写在一个servlet中。"
怎么样将几个功能写在同一个servlet中，通过url传参的方式
项目开发的步骤：
1、阅读需求，项目一定要符合需求。
2、界面设计（界面原型设计）写 html页面，登录注册首页
3、根据界面设计数据库，用户表，送货地址表，商品表，订单表，购物车表
用户和地址：一对多，一个用户有多个送货地址
商品和订单：多对多，就必须使用第三种表来保存他们之间的关系。
购物车
product: id ,pname,price
order:id 用户id 送货地址
订单明细表
4、组长创建一个项目分发给组员，分发任务
5、编码
6、测试
7、写PPT
一、JS复习：变量和数据类型
JS定义变量：无脑的使用var定义
JS中对象和数组是最常用的
一、AJAX:局部的页面刷新的技术
单机游戏和网络游戏：AJAX技术能够是我们玩网络游戏就像玩单机游戏一样流畅
AJAX是一个组合技术。
AJAX技术的核心对象是：XMLHttpRequest
重名验证：
onpropertychange：当被绑定的元素的某个属性发生变化时触发的事件
运行顺序：
运行js代码->跳转到了java代码中->运行回调函数中的js代码
AJAX实现下拉框联动
1、创建一个地址表addr
2、在表中添加了一些数据
3、创建addr表对应的bean和dao
4、准备连接数据库：导包和导入db.properties文件以及创建数据库连接工具类
5、创建jsp页面
6、在jsp页面中加载所有的省份信息
