级联查询-摩杜云开发者社区

MyRequestServlet

package com.bjpowernode.ajax.servlet;

import com.alibaba.fastjson.JSON;
import com.bjpowernode.ajax.bean.Area;
import jakarta.servlet.ServletException;
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;

@WebServlet("/requestservlet")
public class MyRequestServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//获取pcode
String pcode = request.getParameter("pcode");

//连接数据库
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
List list = 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);

//获取预编译对象
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);
}
//执行
rs = ps.executeQuery();
//处理结果集
while(rs.next()){
String code = rs.getString("code");
String name = rs.getString("name");
Area a = new Area(code, name);
list.add(a);//将封装好的javabean添加进集合
}
} 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/json;charset=UTF-8");
//集合转换为json格式的数组
String json = JSON.toJSONString(list);
// 响应JSON。
response.getWriter().print(json);
}
}

com.bjpowernode.ajax.bean

Area

package com.bjpowernode.ajax.bean;

//这是一个JavaBean
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学习\jQuery\course\course6\web

myajax.html

<!--做一个省市联动  -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>做一个省市联动</title>

</head>
<body>

<script type="text/javascript" src="/ajax/js/jquery-3.4.1.js"></script>
<script type="text/javascript">
//在这里发送ajax请求
$(function (){
$.ajax({
type:"get",
url:"/ajax/requestservlet",
data:"t="+new Date().getTime(),
dataType:"json",
async:true,
success:function (jsonStr){
// [{"code":"001", "name":"河北省"},{"code":"002", "name":"河南省"}]
// 以上格式的json是我们自己设计出来的，希望服务器能够给我们返回这样一个json格式的字符串。

//第一种输出方式
/*var html = "<option value=''>--请选择省份--</option>"
for(var i = 0;i<jsonStr.length;i++){
var Obj = jsonStr[i];
html+="<option value='"+Obj.code+"'>"+Obj.name+"</option>"
}
$("#province").html(html)*/

//第二种
/*var html = "<option value=''>--请选择省份--</option>"
for(var i = 0;i<jsonStr.length;i++){
var Obj = jsonStr[i];
html+="<option value='"+Obj.code+"'>"+Obj.name+"</option>"
}
//删除上次输出的旧数据
$("#province").empty();
$("#province").append(html)*/

//第三种
$("#province").empty()
var html="<option value=''>--请选择省份--</option>"
$("#province").append(html);
$.each(jsonStr,function (i,Obj){
$("#province").append("<option value='"+Obj.code+"'>"+Obj.name+"</option>")
})

}
})

//给province绑定change改变事件
$("#province").change(function (){
//alert(111)
//alert(this.value)
//只要change发生，就发送ajax请求
$.ajax({
type:"get",
async:true,
dataType:"json",
data:"t="+new Date().getTime()+"&pcode="+this.value,
url:"/ajax/requestservlet",
success:function (jsonStr){
// [{"code":"006", "name":"XXX"},{"code":"008", "name":"YYYY"}]

//第一种输出方式
/*var html="<option value=''>--请选择城市--</option>"
for(var i=0;i<jsonStr.length;i++){
var Obj = jsonStr[i]
html+="<option value='"+Obj.code+"'>"+Obj.name+"</option>"
}
$("#city").html(html);*/

//第二种
/* var html="<option value=''>--请选择城市--</option>"
for(var i=0;i<jsonStr.length;i++){
var Obj = jsonStr[i]
html+="<option value='"+Obj.code+"'>"+Obj.name+"</option>"
}
//删除上次输出的旧数据
$("#city").empty();
$("#city").append(html);*/

//第三种
$("#city").empty()
var html="<option value=''>--请选择城市--</option>"
$("#city").append(html);
$.each(jsonStr,function (i,Obj){
$("#city").append("<option value='"+Obj.code+"'>"+Obj.name+"</option>")
})

}
})
})

})

</script>

<select id="province">
<!--<option value="">--请选择省份--</option>
<option value="001">河北省</option>
<option value="002">河南省</option>-->
</select>
<select id="city">

</select>

</body>
</html>