~首先先要现实省份 点击省份之后发生change事件 1.当复选框发生change事件时向后端发送ajax请求 2.后端servlet接收到了发来的请求中的数据来查询数据库 3.将查到的数据路中的数据进行封装 然后响应给前端
前端代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市联动</title>
</head>
<body>
<!--引进自己编写的js文件-->
<script src="/AJAX/js/js_jQuery1.0.js"></script>
<script>
/**
* ~首先先要现实省份 点击省份之后发生change事件
* 1.当复选框发生change事件时向后端发送ajax请求
* 2.后端servlet接收到了发来的请求中的数据来查询数据库
* 3.将查到的数据路中的数据进行封装 然后响应给前端
*/
//先获取所有省份
$(function () {
$.ajax({
type: "GET",
url: "/AJAX/ajaxreq6",
data: "t=" + new Date().getTime(),
async: true,
success: function (jsonArr) {
//jsonArr是返回来的json类型的字符串
//这个json字符串本质实在servlet中返回来的
//在这里要拼串了
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>"
}
//设置到id=province里
$("#province").html(html);
}
})
//获得复选框对象(市)
$("#province").change(function () {
// alert(this.value)
//change事件发生后发送ajax请求
//this.value就是你点击的这个复选框的某个键
$.ajax({
type: "GET",
url: "/AJAX/ajaxreq6",
data: "t=" + new Date().getTime() + "&pcode=" + this.value,
async: true,
success: function (jsonArr) {
//jsonArr是返回来的json类型的字符串
//这个json字符串本质实在servlet中返回来的
//在这里要拼串了
var html = "<option value=''>--请选择市--</option>"
for (let i = 0; i < jsonArr.length; i++) {
var area = jsonArr[i];
html += "<option value='"+area.code+"'>"+area.name+"</option>"
}
//设置到id=city里
$("#city").html(html);
}
})
})
})
</script>
<select id="province">
<!-- <option value="">--请选择省份--</option>-->
<!-- <option value="001">河北省</option>-->
<!-- <option value="002">河南省</option>-->
</select>
</select>
<select id="city">
</select>
</body>
</html>
使用的自己封装的jQuery
function jQuery(selector) {
if (typeof selector == "string") {
if (selector.charAt(0) == "#") {
domObj = document.getElementById(selector.substring(1))
return new jQuery()
}
}
if (typeof selector == "function") {
window.onload = selector
}
this.html = function (htmlStr) {
domObj.innerHTML = htmlStr
}
this.click = function (fun) {
domObj.onclick = fun
}
this.focus = function (fun) {
domObj.onfocus = fun
}
this.blur = function (fun) {
domObj.onblur = fun
}
this.change = function (fun) {
domObj.onchange = fun
}
this.val = function (v) {
if (v == undefined) {
return domObj.value
} else {
domObj.value = v
}
}
//静态方法创建ajax请求
/**
* 参数是json字符串
* 请求类型 url 同步还是异步 请求的数据
*/
jQuery.ajax=function (jsonstr) {
//1.创建ajax对象
var xhr = new XMLHttpRequest();
//2.注册函数
xhr.onreadystatechange=function () {
if(xhr.readyState==4){
if(xhr.status==200){
//获得传来的字符串
var jsonObj=JSON.parse(this.responseText);
jsonstr.success(jsonObj)
}
}
}
if(jsonstr.type.toUpperCase()=="GET"){
//开启通道
xhr.open("GET",jsonstr.url+"?"+jsonstr.data,jsonstr.async);
xhr.send();
}else if(jsonstr.type.toUpperCase()=="POST"){
//开启通道
xhr.open("POST",jsonstr.url,jsonstr.async);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
xhr.send(jsonstr.data);
}
}
}
//函数赋值给$
$=jQuery
new jQuery()
后端代码
package com.wpc.Ajax;
import com.alibaba.fastjson.JSON;
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;
/**
* @author 一介草莽子
* version 1.0
*/
@SuppressWarnings({"all"})
@WebServlet("/ajaxreq6")
public class AjaxRequest6 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
List<Area> areaList = new ArrayList<>();
//获得驱动
try {
Class.forName("com.mysql.cj.jdbc.Driver");
//获得连接
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/db02?useUnicode=true&characterEncoding=UTF-8"
,"root","4653long");
String pcode = request.getParameter("pcode");
if(pcode==null){
//查询省
String sql = "select code,`name` from t_area where pcode is null";
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
}else {
//查询市
String 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 area = new Area(code, name);
areaList.add(area);
}
//将其转换为json字符串
String jsonString = JSON.toJSONString(areaList);
response.getWriter().print(jsonString);//响应给前端
} catch (Exception e) {
e.printStackTrace();
} finally {
if (conn != null) {
try {
conn.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
if (ps != null) {
try {
ps.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
if (rs != null) {
try {
rs.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
}
}
}
package com.wpc.Ajax;
/**
* @author 一介草莽子
* version 1.0
*/
@SuppressWarnings({"all"})
public class Area {
private String code;
private String name;
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;
}
}