Java Web:AJAX一級下拉框，JSON，項目開發(fā)的步驟，整合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個省級行政區(qū)，包括23個省、5個自治區(qū)、4個直轄市、2個特別行政區(qū)。
23個省分別為：河北省、山西省、遼寧省、吉林省、黑龍江省、江蘇省、浙江省、安徽省、福建省、江西省、山東省、河南省、湖北省、湖南省、廣東省、海南省、
四川省、貴州省、云南省、陜西省、甘肅省、青海省、臺灣省。
5個自治區(qū)分別為：內(nèi)蒙古自治區(qū)、廣西壯族自治區(qū)、西藏自治區(qū)、寧夏回族自治區(qū)、新疆維吾爾自治區(qū)。
4個直轄市分別為：北京市、天津市、上海市、重慶市。
2個特別行政區(qū)分別為：香港特別行政區(qū)、澳門特別行政區(qū)。
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', '內(nèi)蒙古自治區(qū)');
INSERT INTO `addr` VALUES ('24', '0', '廣西壯族自治區(qū)');
INSERT INTO `addr` VALUES ('25', '0', '西藏自治區(qū)');
INSERT INTO `addr` VALUES ('26', '0', '寧夏回族自治區(qū)');
INSERT INTO `addr` VALUES ('27', '0', '新疆維吾爾自治區(qū)');
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', '香港特別行政區(qū)');
INSERT INTO `addr` VALUES ('34', '0', '澳門特別行政區(qū)');
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
//獲取數(shù)據(jù)中的數(shù)據(jù)
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");
//將數(shù)據(jù)傳送到回調(diào)函數(shù)中
//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文件讀取到內(nèi)存中去
? ? InputStream is = DbUtil.class.getClassLoader()
? ? .getResourceAsStream("db.properties");
? ? //加載內(nèi)容
? ? try {
prop.load(is);
//讀取內(nèi)容
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();
}
? ? }
? ??
? ? //獲取數(shù)據(jù)庫連接對象的方法
? ? 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標簽都被解析出來以后，就會運行下面的函數(shù)
? ? ? ? ? ? window.onload = function(){
? ? ? ? ? ? //獲取省份下拉框
? ? ? ? ? ? var prov = document.getElementById('province');
? ? ? ? ? ?
? ? ? ? ? ? //獲取省份下拉框中的數(shù)據(jù)（我現(xiàn)在執(zhí)行了）
? ? ? ? ? ? //從js代碼跳轉(zhuǎn)到java代碼怎么實現(xiàn)呢？ajax
? ? ? ? ? ? var xhr = createXhr();
? ? ? ? ? ? if(xhr) {
? ? ? ? ? ? //設置提交方式是POST提交和執(zhí)行的servlet的url路徑
? ? ? ? ? ? xhr.open('POST','ss');
? ? ? ? ? ? //設置ajax請求頭
? ? ? ? ? ? xhr.setRequestHeader("content-type",?
? ? ? ? ? ? "application/x-www-form-urlencoded");
? ? ? ? ? ? //設置回調(diào)函數(shù)
? ? ? ? ? ? xhr.onreadystatechange = function(){
? ? ? if (xhr.readyState == 4 && xhr.status == 200){
? ? ? ? ? ? ? ? //alert(xhr.responseText);
? ? ? ? ?//有的瀏覽器不支持下拉框的innerHTML屬性，所以會有兼容性問題。
? ? ? ? ? ?//prov.innerHTML = xhr.responseText;
? ? ? ? ? ? ? ? //alert(xhr.responseText);
? ? ? ? ? ? ? ? //將json字符串轉(zhuǎn)換成js數(shù)組
? ? ? ? ? ? ? ? var arr = JSON.parse(xhr.responseText);
? ? ? ? ? ? ? ? //對arr數(shù)組進行循環(huán)遍歷
? ? ? ? ? ? ? ? for(var i = 0;i < arr.length;i ++) {
? ? ? ? ? ? ? ? var opt = arr[i];
? ? ? ? ? ? ? ? //取出對象中的屬性值
? ? ? ? ? ? ? ? var id = opt.id;
? ? ? ? ? ? ? ? var name = opt.name;
? ? ? ? ? ? ? ? //創(chuàng)建一個option對象
? ? ? ? ? ? ? ? var option = new Option(name,id);
? ? ? ? ? ? ? ? //將option對象放到省份下拉框中
? ? ? ? ? ? ? ? prov.add(option);
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? //提交ajax請求
? ? ? ? ? ? xhr.send('pid=0');
? ? ? ? ? ? }
? ? ? ? ? ? }? ?
? ? ? ? ?
? ? ? ? ? ??
? ? ? ? ? ? //將創(chuàng)建XMLHttpRequest對象的方法封裝起來
? ? ? ? ? ? function createXhr(){
? ? ? ? ? ? var xhr = null;
if(window.XMLHttpRequest) {
//判斷window對象中是否有XMLHttpRequest屬性
? ? ? ? ? ? xhr = new XMLHttpRequest();
? ? ? ? ? ? } else {
? //如果沒有XMLHttpRequest屬性，就使用ActiveXObject創(chuàng)建
? ? ? ? ? ? xhr = new ActiveXObject("Microsoft.XMLHTTP");
? ? ? ? ? ? }
? ? ? ? ? ? return xhr;
? ? ? ? ? ? }
? ? ? ? </script>
? ? </head>
? ? <body>
? ? ? ? <select id="province">
? ? ? ? ? ? <option>請選擇省份</option>
? ? ? ? </select>
? ? ? <!--? <select id="city">
? ? ? ? ? ? <option>請選擇城市</option>
? ? ? ? </select>-->??
? ? </body>
</html>
一、泛型參數(shù)
二、實現(xiàn)萬能DAO
一、整合servlet
登錄功能，注冊功能，修改密碼：公共模塊
商品新增，商品修改，商品查詢，商品刪除：商品模塊
"將一些功能放到同一個servlet中執(zhí)行。根據(jù)模塊功能整合，也就是說將同一個模塊中
的功能寫在一個servlet中。"
怎么樣將幾個功能寫在同一個servlet中，通過url傳參的方式
項目開發(fā)的步驟：
1、閱讀需求，項目一定要符合需求。
2、界面設計（界面原型設計）寫 html頁面，登錄注冊首頁
3、根據(jù)界面設計數(shù)據(jù)庫，用戶表，送貨地址表，商品表，訂單表，購物車表
用戶和地址：一對多，一個用戶有多個送貨地址
商品和訂單：多對多，就必須使用第三種表來保存他們之間的關系。
購物車
product: id ,pname,price
order:id 用戶id 送貨地址
訂單明細表
4、組長創(chuàng)建一個項目分發(fā)給組員，分發(fā)任務
5、編碼
6、測試
7、寫PPT
一、JS復習：變量和數(shù)據(jù)類型
JS定義變量：無腦的使用var定義
JS中對象和數(shù)組是最常用的
一、AJAX:局部的頁面刷新的技術
單機游戲和網(wǎng)絡游戲：AJAX技術能夠是我們玩網(wǎng)絡游戲就像玩單機游戲一樣流暢
AJAX是一個組合技術。
AJAX技術的核心對象是：XMLHttpRequest
重名驗證：
onpropertychange：當被綁定的元素的某個屬性發(fā)生變化時觸發(fā)的事件
運行順序：
運行js代碼->跳轉(zhuǎn)到了java代碼中->運行回調(diào)函數(shù)中的js代碼
AJAX實現(xiàn)下拉框聯(lián)動
1、創(chuàng)建一個地址表addr
2、在表中添加了一些數(shù)據(jù)
3、創(chuàng)建addr表對應的bean和dao
4、準備連接數(shù)據(jù)庫：導包和導入db.properties文件以及創(chuàng)建數(shù)據(jù)庫連接工具類
5、創(chuàng)建jsp頁面
6、在jsp頁面中加載所有的省份信息
