JQuery的通用方式实现AJAX
核心语法：$.ajax({name:value,name:value,…});
url：请求的资源路径。
async：是否异步请求，true-是，false-否 (默认是 true)。
data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。
type：请求方式，POST 或 GET (默认是 GET)。
dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
success：请求成功时调用的回调函数。
error：请求失败时调用的回调函数。
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<form autocomplete="off">
姓名：<input type="text" id="username">
<span id="uSpan"></span>
<br>
密码：<input type="password" id="password">
<br>
<input type="submit" value="注册">
</form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//1.为用户名绑定失去焦点事件
$("#username").blur(function () {
let username = $("#username").val();
//2.jQuery的通用方式实现AJAX
$.ajax({
//请求资源路径
url:"userServletxxx",
//是否异步 一般不写
async:true,
//请求参数
data:"username="+username,
//请求方式
type:"POST",
//数据形式
dataType:"text",
//请求成功后调用的回调函数
success:function (data) {
//将响应的数据显示到span标签
$("#uSpan").html(data);
},
//请求失败后调用的回调函数 一般也不写
error:function () {
alert("操作失败...");
}
});
});
</script>
</html>
获取地址的两种方式
${pageContext.request.contextPath}
头部
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
文件地址前
<%=basePath%>
三级联动(省市县)经典案例
1.jsp界面
<%--
Created by IntelliJ IDEA.
User: xszx
Date: 2024/7/22
Time: 10:54
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="${pageContext.request.contextPath}/js/jquery-3.5.1.js"></script>
</head>
<body>
<%-- 三级联动--%>
<select id="se1">
<option>--请选择--</option>
</select>省
<select id="se2">
<option>--请选择--</option>
</select>市
<select id="se3">
<option >--请选择--</option>
</select>县
<script>
//页面就绪函数
$(function () {
//初始化值 把省份查询出来
$.ajax({
url:"/test",
dataType : "json",
type:"post",
data:{
method:"get1"
},
success:function(date){
console.log(date);
//清空select 下拉框
// $("#se1").children().not(":eq(0)").remove();
//遍历数据
for(var i=0;i<date.length;i++){
console.log(date[i].name);
$("#se1").append("<option value="+date[i].id+">--" +date[i].name+ "--</option>");
}
}
});
});
//下拉框2 当下拉框 省1内容发生改变，我就执行
$("#se1").change(function () {
//你选择是那个省 用来当做父id
var id = $("#se1").val();
// alert("下拉框被改变" + id);
$.ajax({
url:"/test",
type:"post",
data:{
method:"get",
id:id
},
dataType : "json",
success:function(date){
//清空select 下拉框
$("#se2").children().not(":eq(0)").remove();
$("#se3").children().not(":eq(0)").remove();
//遍历数据
for(var i=0;i< date.length;i++){
console.log(date[i].name);
//追加
$("#se2").append("<option value="+date[i].id+">--"+date[i].name+"--</option>");
}
}
});
});
//下拉框3 当下拉框2内容发生改变，我就执行
$("#se2").change(function () {
var id = $("#se2").val();
$.ajax({
url:"/test",
type:"post",
data:{
method:"get",
id:id
},
dataType : "json",
success:function(date){
//清空select 下拉框
$("#se3").children().not(":eq(0)").remove();
//遍历数据
for(var i=0;i< date.length;i++){
console.log(date[i].name);
$("#se3").append("<option value="+date[i].id+">--"+date[i].name+"--</option>");
}
}
});
});
</script>
</body>
</html>
2.dao层代码
//获取省份
public List<Glo> getGlo() {
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
List<Glo> gloList = new ArrayList<>();
try {
conn = JDBCUtil.getConnection();
String sql = "select id,name,parentId,levelType from glo_area where levelType=1";
//预加载sql
ps = conn.prepareStatement(sql);
//执行sql 查询执行sql后会返回一个结果集
rs = ps.executeQuery();
//遍历 .next() 判断是否有下一条数据
while (rs.next()) {
Glo glo =new Glo();
glo.setId(Integer.parseInt(rs.getString("id")));
glo.setName(rs.getString("name"));
glo.setFid(Integer.parseInt(rs.getString("parentId")));
glo.setJb(Integer.parseInt(rs.getString("levelType")));
gloList.add(glo);
}
//关流
} catch (SQLException e) {
e.printStackTrace();
} finally {
JDBCUtil.close(conn, ps, rs);
}
return gloList;
}
//根据id获取市县
public List<Glo> getGloid(String id) {
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
List<Glo> gloList = new ArrayList<>();
try {
conn = JDBCUtil.getConnection();
String sql = "select id,name,parentId,levelType from glo_area where parentId=?";
//预加载sql
ps = conn.prepareStatement(sql);
ps.setString(1,id);
//执行sql 查询执行sql后会返回一个结果集
rs = ps.executeQuery();
//遍历 .next() 判断是否有下一条数据
while (rs.next()) {
Glo glo =new Glo();
glo.setId(Integer.parseInt(rs.getString("id")));
glo.setName(rs.getString("name"));
glo.setFid(Integer.parseInt(rs.getString("parentId")));
glo.setJb(Integer.parseInt(rs.getString("levelType")));
gloList.add(glo);
}
//关流
} catch (SQLException e) {
e.printStackTrace();
} finally {
JDBCUtil.close(conn, ps, rs);
}
return gloList;
}
3.servlet代码
@WebServlet("/test")
public class test extends HttpServlet {
LoginDao loginDao = new LoginDao();
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=UTF-8");
String method = req.getParameter("method");
if (method.equals("get1")){
get1(req,resp);
}else if (method.equals("get")){
get(req,resp);
}
}
private void get(HttpServletRequest req, HttpServletResponse resp) {
String id = req.getParameter("id");
List<Glo> gloList = loginDao.getGloid(id);
String userJson = JSON.toJSONString(gloList);
System.out.println(userJson);
try {
resp.getWriter().write(userJson);
} catch (IOException e) {
e.printStackTrace();
}
}
private void get1(HttpServletRequest req, HttpServletResponse resp) {
List<Glo> gloList = loginDao.getGlo();
//list直接响应到前端页面不认识
String userJson = JSON.toJSONString(gloList);
//转换成json
System.out.println(userJson);
try {
resp.getWriter().write(userJson);
} catch (IOException e) {
e.printStackTrace();
}
}
}
1854
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
