Javaweb05-Ajax
1、基于jQuery的Ajax
1.1 基本Ajax
| 参数 | 说明 |
|---|---|
| url | 请求地址 |
| type | 请求类型 |
| data | 请求参数 |
| dataType | 返回参数 |
| success | 成功处理函数 |
| error | 错误处理函数 |
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js" ></script>
<script type="text/javascript">
$(function(){
//强调：基于javascript实现的ajax用法，比较繁琐，不需要掌握
//需要掌握的是基于jQuery方式使用的Ajax
//当用户登录，输入用户名后，失去焦点，校验登录用户名再系统中是否被使用
$("#uname").blur(function(){
//alert($(this).val());
//获取输入的用户名,并实现非空校验
var userName = $(this).val();
if(userName == null || userName == ""){
alert("用户名不能为空");
return;
}
//基于jAuery的Ajax用法-基本用法
$.ajax({
"url" : "<%=request.getContextPath()%>/checkUserName",
"type" : "post",
"data" : {"userName" : userName},
"dataType" : "text",
"success" : function(data){
//alert(JSON.parse(data));
if(JSON.parse(data)){
$("#showMsg").html("用户名存在").css({"color":"red"});
}else{
$("#showMsg").html("用户名可用").css({"color":"#2ceb0a"});
}
},
"error" : function(){
$("#showMsg").html("未知错误");
}
});
</script>
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>
<style type="text/css">
table{
background-color:pink;
}
</style>
</head>
<body>
<form action="<%=request.getContextPath()%>/loginAnime" method="get">
<table border="1px" align="center" width="40%" cellspacing="0">
<tr style="hight:60px; font-size:16px;background-color:#B9DEE0">
<th colspan="2"> 欢迎登录课工场KH96动漫管理系统 </th>
</tr>
<tr>
<td>用户名：</td>
<td>
<input type="text" name="uname" id="uname" placeholder="请输入"用户名> </input>
<span id = "showMsg" style="text-align:center;"></span>
</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>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js" ></script>
<script type="text/javascript">
$(function(){
$("#uname").blur(function(){
//异步请求校验用户名
//基于jAuery的Ajax用法-基本用法
$.post("<%=request.getContextPath()%>/checkUserName",{"userName" :$("#uname").val()},function(data){
if(JSON.parse(data)){
$("#showMsg").html("用户名存在").css({"color":"#2ceb0a"});
}else{
$("#showMsg").html("用户名不存在").css({"color":"red"});
}
});
});
$("form").submit(function(){
//用户名非空校验
var userName = $("#uname").val();
//alert(userName);
if(userName == null || userName == ""){
alter("用户名不能为空");
//submi事件，接收false结果，会自动取消表单的提交
return false;
}
//密码非空
var userPwd = $("#upwd").val();
//alert(userPwd);
if(userPwd == null || userPwd == ""){
alter("用户密码不能为空");
//submi事件，接收false结果，会自动取消表单的提交
return false;
}
//异步提交登录请求，如果交谈用户信息输入正确，提示登录成功，宁跳转到动漫管理首页，否则提示登录失败
$.post("<%=request.getContextPath()%>/loginAnime",{"userName" : userName,"userPwd":userPwd},function(data){
if(JSON.parse(data)){
alert("登录成功");
//请求后台获取动漫列表数据
//location.href = "<%=request.getContextPath()%>/animes";
//请求列表页面，使用Ajax解析json数据
location.href = "animeListJson.jsp";
}else{
alert("登录失败");
}
});
//由于使用了Ajax进行了异步登录请求，此处表单就不能再提交,否者表达再提交会出错
return false;
});
});
</script>
</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 style="text-align: center">课工场KH96班动漫管理系统</h2>
<p style="text-align: center">
名称：<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 style="height: 80px; font-size: 30px; background-color: cyan;">
<th colspan="8">动漫详情列表</th>
</tr>
<tr>
<th colspan="8" style="text-align: right;">欢迎： <a href="logout">退出登录</a></th>
</tr>
<tr style="height: 40px; background-color: cyan;">
<th>编号</th>
<th>分类</th>
<th>名称</th>
<th>作者</th>
<th>主角</th>
<th>出品</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 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 href="#">修改</a> |
<a href="#">删除</a>
</td>
</tr>
</c:forEach>
</tbody>
<tfoot>
<tr>
<td colspan="8" style="height: 40px; text-align: center">
<input type="button" value="添加" id="addAnime"/>
<a href="#">首页</a> |
<a href="#"><<上一页</a> |
<a href="#">下一页>></a> |
<a href="#">尾页</a> |
共 6 条 每页 10 条 当前第 1 页 / 共 1 页
</td>
</tr>
</tfoot>
</table>
</body>
</html>
3.2 直接通过jQuery添加子标签
animeListJson.jsp
//tbody部分
<tbody>
<!-- 直接通过jQuery添加子标签 -->
</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 href='#'>修改</a> <a href='#'>删除</a></td>"
+ "</tr>"
);
count++;
});
}
展示效果：
Javaweb05-Ajax的更多相关文章
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- Ajax及跨域
概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...
- 一个粗心的Bug，JSON格式不规范导致AJAX错误
一.事件回放 今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...
- ABP文档 - Javascript Api - AJAX
本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息 处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...
- ajax异步请求
做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...
- 调用AJAX做登陆和注册
先建立一个页面来检测一下我们建立的用户名能不能用,看一下有没有已经存在的用户名吗 可以通过ajax提示一下 $("#uid").blur(function(){ //取用户名 va ...
- Ajax 概念 分析 举例
Ajax是结合了访问数据库,数据访问,Jquery 可以做页面局部刷新或者说是页面不刷新,我可以让页面不刷新,仅仅是数据的刷新,没有频繁的刷页面,是现在比较常用的一种方式做页面那么它是怎么实现页面无刷 ...
- ajax
常见的HTTP状态码状态码:200 请求成功.一般用于GET和POST方法 OK301 资源移动.所请求资源移动到新的URL,浏览器自动跳转到新的URL Moved Permanently304 未修 ...
- 学习笔记之MVC级联及Ajax操作
由于刚转型到MVC,MVC的架构模式很多不是很清楚,比如今天就想做个级联的操作,因为之前的ASP.NET的方式是通过:控件-->添加事件-->后台编写级联事件进行触发,但是这个MVC就不同 ...
- javascript表单的Ajax 提交插件的使用
Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmi ...
随机推荐
- 【Unity Shader学习笔记】Unity基础纹理-渐变纹理
纹理可以用来存储任何表面属性. 可以通过使用渐变纹理来实现插画风格的渲染效果. 这项技术是由Valve公司提出的.Valve使用它来渲染游戏中具有插画风格的角色. 我们使用半兰伯特模型计算漫反射. 因 ...
- 详解TCP四次挥手（断开TCP连接过程）
在讲述TCP四次挥手,即断开TCP连接的过程之前,需要先介绍一下TCP协议的包结构. TCP协议包结构: 这里只对涉及到四次挥手过程的字段做解释 (1) 序号(Sequence number) 我们通 ...
- 接口测试postman深度挖掘应用②
上一篇文章我们已经介绍了postman的基本用法,以及接口测试原理.未关注博主的可以关注下博主,后期测试安全,以及各种工具用法,编程语言都会有讲解的 老样子:①先补习基础知识: ②补充上一章节由于过 ...
- Training loop Run Builder
以下内容来自deeplizard pyorch_P31
- python爬虫之JS逆向某易云音乐
Python爬虫之JS逆向采集某易云音乐网站 在获取音乐的详情信息时,遇到请求参数全为加密的情况,现解解决方案整理如下: JS逆向有两种思路: 一种是整理出js文件在Python中直接使用execjs ...
- ExtJS 布局-Column布局（Column layout）
更新记录: 2022年6月1日 开始. 2022年6月4日 发布. 1.说明 使用列布局,可以将容器拆分为特定大小的列,并将子组件放置在这些列中. 可以设置子组件宽度值为: 百分比(相对父容器宽度) ...
- 【视频】k8s套娃开发调试dapr应用 - 在6月11日【开源云原生开发者日】上的演示
这篇博客是在2022年6月11日的[开源云原生]大会上的演讲中的演示部分.k8s集群套娃(嵌套)是指在一个k8s的pod中运行另外一个k8s集群,这想法看上去很疯狂,实际上非常实用. k8s集群套娃( ...
- 第五章、Linux网络服务之yum仓库
目录 一.yum仓库简介 二.yum配置文件 1yum主配置文件 2日志文件 三.yum命令详解 1查询软件包命令 2查询软件包组命令 3yum安装升级 4 软件卸载 四.搭建yum仓库 本地仓库 h ...
- WPF中Popup控件的使用
一.Popup控件的主要属性 Popup表示具有内容的弹出窗口,其主要属性为: Child:获取或设置 Popup控件的内容. IsOpen:获取或设置一个值,该值指示Popup 是否可见 Place ...
- 监听 Markdown 文件并热更新 Next.js 页面
Next.js 提供了 Fast-Refresh 能力,它可以为您对 React 组件所做的编辑提供即时反馈. 但是,当你通过 Markdown 文件提供网站内容时,由于 Markdown 不是 Re ...