1. 什么是省市联动？ 30
- 在网页上，选择对应的省份之后，动态的关联出该省份对应的市。选择对应的市之后，动态的关联出该市对应的区。（首先要清楚需求）
- 进行数据库表的设计
t_area （区域表）
id(PK-自增) code name pcode
---------------------------------------------
1 001 河北省 null
2 002 河南省 null
3 003 石家庄 001
4 004 邯郸 001
5 005 郑州 002
6 006 洛阳 002
7 007 丛台区 004
将全国所有的省、市、区、县等信息都存储到一张表当中。
采用的存储方式实际上是code pcode形势。2. 建表t_area，模拟好数据。 30
- 首先实现第一个功能：
- 页面加载完毕之后，先把省份全部展现出来。
代码在com.bjpowernode.ajax.servlet 30-31
ListAreaServlet
package com.bjpowernode.ajax.servlet;
import com.alibaba.fastjson.JSON;
import com.bjpowernode.ajax.beans.Area;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebFilter;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;
//动态的获取对应的区域 30-31
@WebServlet("/listArea")
public class ListAreaServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String pcode = request.getParameter("pcode");//获取提交的pcode 31
//连接数据库，获取所有对应的区域，最终响应一个JSON格式的字符串给web前端
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
List areaList = new ArrayList<>();
try {
//注册驱动
Class.forName("com.mysql.cj.jdbc.Driver");
//获取链接
// 获取连接
String url = "jdbc:mysql://localhost:3306/bjpowernode?useUnicode=true&characterEncoding=UTF-8";
String user = "root";
String password = "lzl";
conn = DriverManager.getConnection(url,user,password);
//获取预编译对象 30-31
String sql = "";
if(pcode==null){
sql = "select code,name from t_area where pcode is null";
ps = conn.prepareStatement(sql);
}else{
sql = "select code,name from t_area where pcode =?";
ps = conn.prepareStatement(sql);
ps.setString(1,pcode);
}
//执行sql
rs = ps.executeQuery();
//处理结果集
while(rs.next()){
String code = rs.getString("code");
String name = rs.getString("name");
//将以上数据封装
Area a = new Area(code, name);
areaList.add(a);//将a对象放入list集合
}
} catch (Exception e) {
e.printStackTrace();
}finally {
if(rs!=null){
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if(ps!=null){
try {
ps.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if(conn!=null){
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
response.setContentType("text/html;charset=UTF-8");
// 使用fastjson将java对象转换成json字符串。
String json = JSON.toJSONString(areaList);
// 响应JSON。
response.getWriter().print(json);
}
}com.bjpowernode.ajax.beans
javabean Area
package com.bjpowernode.ajax.beans;
//这是一个javabean，封装对应的区域结果用的 30
public class Area {
private String code;
private String name;
public Area() {
}
public Area(String code, String name) {
this.code = code;
this.name = name;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}E:\java学习\Ajax\course\course9\web
ajax13.html
<!--省市联动 30-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市联动</title>
</head>
<body>
<!--引入我们自己写的jQuery库-->
<script type="text/javascript" src="/ajax/js/jQuery-1.0.0.js"></script>
<script type="text/javascript">
//发送ajax请求，获取所有的省份，省份的pcode是null
$(function (){
$.ajax({
type:"get",
url:"/ajax/listArea",
data:"t="+new Date().getTime(),
async:true,
success:function (jsonArr){
// [{"code":"001", "name":"河北省"},{"code":"002", "name":"河南省"}]
// 以上格式的json是我们自己设计出来的，希望服务器能够给我们返回这样一个json格式的字符串。
var html = "<option value=''>--请选择省份--</option>"
for(var i = 0;i<jsonArr.length;i++){
var area = jsonArr[i];
html+="<option value='"+area.code+"'>"+area.name+"</option>"
}
$("#province").html(html)
}
})
//只要change发生，就发送ajax请求
$("#province").change(function (){
//alert("发送ajax请求")
//alert(this)//这里的this指的是select元素
//alert(this.value)//this.value可以得到code
//发送ajax请求
$.ajax({
type:"get",
url:"/ajax/listArea",
data:"t="+new Date().getTime()+"&pcode="+this.value,
async:true,
success:function (jsonArr){
// [{"code":"006", "name":"XXX"},{"code":"008", "name":"YYYY"}]
// 以上格式的json是我们自己设计出来的，希望服务器能够给我们返回这样一个json格式的字符串。
var html = "<option value=''>--请选择城市--</option>"
for(var i = 0;i<jsonArr.length;i++){
var area = jsonArr[i];
html+="<option value='"+area.code+"'>"+area.name+"</option>"
}
$("#city").html(html)
}
})
})
})
</script>
<select id="province" >
<!--<option value="">--请选择省份--</option>
<option value="001">河北省</option>
<option value="002">河南省</option>-->
</select>
<select id="city">
</select>
</body>
</html>
E:\java学习\Ajax\course\course9\web\js
jQuery-1.0.0.js
// 将jQuery单独写到js文件中使用是引入库 27
/*封装一个函数，通过这个函数可以获取到html页面中的节点，这个函数我给他起一个名字，叫做：jQuery*/
/*要封装的代码是：根据id来获取元素。document.getElementById("btn")*/
/*设计思路来自于CSS的语法。 #id 可以获取到这个元素 */
//下面这段代码是进行封装
function jQuery(selector){
//根据id获取元素 22
if(typeof selector=="string"){
// selector可能是#id，也可以能是其他的选择器，例如类选择器：.class
if(selector.charAt(0)=="#"){//解释这个selector就是一个变量,#号是封装的线索（也就是传过来的必须是以#号开头）
//selector是一个id选择器
//selector.substring(1)解释，利用substring截取字符串函数将传来的#id，截取留下id
//var domObj = document.getElementById(selector.substring(1));
//注意如果不写var domObj就是一个全局变量 25
domObj = document.getElementById(selector.substring(1));
//返回domObj
//return domObj
//返回jQuery对象
return new jQuery()
}
}
//页面加载完毕后注册回调函数 23
//typeof是判断参数的类型这里的typeof selector=="function"是判断类型是不是函数
if(typeof selector=="function"){
window.onload = selector
}
//定义一个html()函数，代替：domObj.innerHTML = "" 25
this.html = function (htmlStr){
//domObj全局变量
domObj.innerHTML = htmlStr
}
//定义一个click()函数，代替：domObj.onclick = function(){} 25
this.click = function (fun){
domObj.onclick = fun
}
//还可以封装很多事件 25
this.focus = function (fun){
domObj.onfocus = fun
}
this.blur = function(fun) {
domObj.onblur = fun
}
this.change = function (fun){
domObj.onchange = fun
}
// ....
//封装获取文本框中的用户名的value函数 ，代替domObj.value 26
this.val = function (v){
if(v==undefined){//如果没传参，就返回文本框的输入的
return domObj.value
}else{//传参了，姐把参数赋值
domObj.value = v
}
}
//定义一个静态的方法发送ajax请求 28
/**
* 分析：使用ajax函数发送ajax请求的时候，需要程序员给我们传过来什么？
* 请求的方式(type)：GET/POST
* 请求的URL(url)：url
* 请求时提交的数据(data)：data
* 请求时发送异步请求还是同步请求(async)：true表示异步，false表示同步。
*/
jQuery.ajax = function (jsonArgs){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
if(this.readyState==4){
if(this.status==200){
// 我们这个工具类在封装的时候，先不考虑那么多，假设服务器返回的都是json格式的字符串。
var jsonObj = JSON.parse(this.responseText);
//调用函数
jsonArgs.success(jsonObj)
}
}
}
if(jsonArgs.type.toUpperCase()=="POST"){
xhr.open("POST",jsonArgs.url,jsonArgs.async)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xhr.send(jsonArgs.data)
}
if(jsonArgs.type.toUpperCase()=="GET"){
xhr.open("GET",jsonArgs.url+"?"+jsonArgs.data,jsonArgs.async)
xhr.send()
}
}
}
//但是我们嫌jQuery太长，就将jQuery赋值给$符号
$ = jQuery
new jQuery()//这里new一下这个类，是为了保证静态的方法能被调用
