容器及微服务Javaweb05-Ajax - Powered by Discuz! Archiver

卖不甜枣 发表于 2022-9-16 17:12:00

Javaweb05-Ajax

1、基于jQuery的Ajax

1.1 基本Ajax

参数说明url请求地址type请求类型data请求参数dataType返回参数success成功处理函数error错误处理函数1.2 get提交Ajax

语法:$.get(url,params,success);
//基于JQuery的Ajax用法-扩展用法1，简写Get方，Ajax请求
//语法:$.get(url,params,success)
$.get("<%=request.getContextPath()%>/checkUserName",{"userName":serName},function(data){
if(JSON.parse(data)){
   $("#showMsg").html("用户名存在get").css({"color":"red"});
}else{
   $("#showMsg").html("用户名可用get").css({"color":"#2ceb0a"});
}
}); 1.3 post提交Ajax

语法:$.post(url,params,success);
//基于JQuery的Ajax用法-扩展用法1，简写Get方，Ajax请求
//语法:$.post(url,params,success)
$.post("<%=request.getContextPath()%>/checkUserName",{"userName" : userName},function(data){
if(JSON.parse(data)){
   $("#showMsg").html("用户名存在post").css({"color":"red"});
}else{
   $("#showMsg").html("用户名可用post").css({"color":"#2ceb0a"});
}
});1.4 请求处理

checkUserName 对应的处理代码；通过Response返回结果，前端接收到结果并进行处理；
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//后台接收用户名,校验是否重复
//获取用户参数
String userName = req.getParameter("userName");
System.out.println("AjaxServlet userName=>>"+userName);

//定义返回的结果
boolean result= false;

//模拟调用业务，查询当前用户名再数据中是否有记录
List<String> userNames = Arrays.asList("kh96","kgc","Ajax");
if(userNames.contains(userName)) {
   result = true;
}

//异步请求响应结果,注意println不可以用，返回的结果会带\n
System.out.println("AjaxServlet result==>"+result);
resp.getWriter().println(result);
}2、登录请求处理，并展示数据

2.1 登录页面

loginAnime.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>登录页面</title>

</head>
<body>
<form action="<%=request.getContextPath()%>/loginAnime" method="get">
<table border="1px" align="center" width="40%" cellspacing="0">
<tr >
<th colspan="2"> 欢迎登录课工场KH96动漫管理系统 </th>
</tr>
<tr>
<td>用户名：</td>
<td>
<input type="text" name="uname" id="uname" placeholder="请输入"用户名> </input>

</td>
</tr>
<tr>
<td>用户密码：</td>
<td>
<input type="password" name="upwd" id="upwd" placeholder="请输入用户密码"> </input>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="立即登录" />
<input type="reset" value="重新填写" />
</td>
</tr>
</table>
</form>
</body>

</html>注意：再使用Ajaz提交表单时，一定要返回false,要不然表单会再提交一次；
2.2 存放数据

2.2.1 通过request域转递数据

AnimeServlet
public class AnimeServlet extends HttpServlet {

private static final long serialVersionUID = -4726403189879316484L;

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

// 模拟从数据库获取动漫列表
List<Animes> animes = new ArrayList<>();
animes.add(new Animes(961, "玄幻", "斗破苍穹", "土豆", "萧炎", "玄机科技", "2019-08-04"));
animes.add(new Animes(962, "玄幻", "完美世界", "辰东", "石昊", "福煦影视", "2020-08-05"));
animes.add(new Animes(963, "言情", "狐妖小红娘", "小新", "白月初", "腾讯动漫", "2021-08-06"));
animes.add(new Animes(964, "言情", "秦时明月", "温世仁", "天明", "玄机科技", "2022-08-04"));
animes.add(new Animes(965, "热血", "镇魂街", "许辰", "曹焱兵", "卢李工作室", "2018-08-04"));
animes.add(new Animes(966, "热血", "雾山五行", "林魂", "闻人翊悬", "六道无鱼", "2018-08-04"));

//将动漫集合放入request作用域
req.setAttribute("animes", animes);

//转发到动漫列表页面
req.getRequestDispatcher("web5AjaxAndJquery/animeList.jsp").forward(req, resp);

}
}2.2.2 将数据转成json格式响应

public class AnimeJsonServlet extends HttpServlet {

private static final long serialVersionUID = -4726403189879316484L;

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

// 模拟从数据库获取动漫列表
List<Animes> animes = new ArrayList<>();
animes.add(new Animes(961, "玄幻", "斗破苍穹", "土豆", "萧炎", "玄机科技", "2019-08-04"));
animes.add(new Animes(962, "玄幻", "完美世界", "辰东", "石昊", "福煦影视", "2020-08-05"));
animes.add(new Animes(963, "言情", "狐妖小红娘", "小新", "白月初", "腾讯动漫", "2021-08-06"));
animes.add(new Animes(964, "言情", "秦时明月", "温世仁", "天明", "玄机科技", "2022-08-04"));
animes.add(new Animes(965, "热血", "镇魂街", "许辰", "曹焱兵", "卢李工作室", "2018-08-04"));
animes.add(new Animes(966, "热血", "雾山五行", "林魂", "闻人翊悬", "六道无鱼", "2018-08-04"));

//将集合数据，转换为json字符串，返回给前端
//阿里巴巴的fasejson，将集合转换为json字符串
String animesJson = JSON.toJSONString(animes);

System.out.println(animesJson);

//响应
resp.setContentType("text/html;charset=UTF-8");
resp.setCharacterEncoding("UTF-8");
resp.getWriter().print(animesJson);

}
}3、获取并展示数据

3.1 通过EL表达式取出request域域中的数据

animeList.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>动漫主页</title>
</head>
<body>
<h2 >课工场KH96班动漫管理系统</h2>
<p >
名称：<input type="text" name="animeName" size="15"/>
作者：<input type="text" name="animeAuthor" size="15"/>
分类：<select name="animeCategory">
<option value="0">全部</option>
<option value="1">玄幻</option>
<option value="2">武侠</option>
<option value="3">言情</option>
<option value="4">机甲</option>
</select>
<input type="button" value = "搜索"/>
</p>
<table border="1px" width="90%" cellspacing="0" align="center">
<thead>
<tr >
<th colspan="8">动漫详情列表</th>
</tr>
<tr>
<th colspan="8" >欢迎：  <a target="_blank" href="https://www.cnblogs.com/logout">退出登录</a></th>
</tr>
<tr >
<th>编号</th>
<th>分类</th>
<th>名称</th>
<th>作者</th>
<th>主角</th>
<th>出品</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>

<c:forEach items="${animes}" var ="anime" varStatus="status">
<tr align="center"
<c:if test="${status.index % 2 == 1 }">
            style = "background-color: pink;"
            </c:if>
>
<td>${anime.animeId }</td>
<td>${anime.animeCategory } </td>
<td>${anime.animeNaem } </td>
<td>${anime.animeAuthor } </td>
<td>${anime.animeActor } </td>
<td>${anime.animeProduce } </td>
<td>${anime.animeTime } </td>
<td>
<a target="_blank" href="https://www.cnblogs.com/#">修改</a>    |
<a target="_blank" href="https://www.cnblogs.com/#">删除</a>
</td>
</tr>
</c:forEach>
</tbody>
<tfoot>
<tr>
<td colspan="8" >
<input type="button" value="添加" id="addAnime"/>
<a target="_blank" href="https://www.cnblogs.com/#">首页</a> |
<a target="_blank" href="https://www.cnblogs.com/#"><<上一页</a> |
<a target="_blank" href="https://www.cnblogs.com/#">下一页>></a> |
<a target="_blank" href="https://www.cnblogs.com/#">尾页</a> |
共 6 条  每页 10 条当前第 1 页 / 共 1 页
</td>
</tr>
</tfoot>
</table>
</body>

</html>3.2 直接通过jQuery添加子标签

animeListJson.jsp
//tbody部分
<tbody>

</tbody>

//处理成功返回的数据部分
"success": function(data){
//确定数据动态显示的位置
var $tbody = $("tbody");
//alert(data);
//数据解析

// 隔行变色
var count = 1;

// 数据解析
$(data).each(function(){
   // 定义颜色
   var bgColor = count % 2 == 0 ? "style='background-color:#ddd;'" : "";
   $("tbody").append(
         "<tr align='center' " + bgColor + ">"
         + "<td>" + this.animeId + "</td>"
         + "<td>" + this.animeCategory + "</td>"
         + "<td>" + this.animeName + "</td>"
         + "<td>" + this.animeAuthor + "</td>"
         + "<td>" + this.animeActor + "</td>"
         + "<td>" + this.animeProduce + "</td>"
         + "<td>" + this.animeTime + "</td>"
         + "<td><a target="_blank" href='https://www.cnblogs.com/#'>修改</a>  <a target="_blank" href='https://www.cnblogs.com/#'>删除</a></td>"
         + "</tr>"
   );
   count++;
});
}展示效果：
https://img2022.cnblogs.com/blog/2793469/202208/2793469-20220804185740503-1250826887.png

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

页: [1]

ToB企服应用市场:ToB评测及商务社交产业平台's Archiver

Javaweb05-Ajax