Javaweb(八)-Ajax项目-分页条件查询 + 增删改
1、登录
1.1 登录form表单
<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>
1.2 非空判断 和 Ajax 登录
<script type="text/javascript">
$(function(){
//使用jQuery的Ajax实现异步登录
//监听表单提交事件，数校验
$("form").submit(function(){
//登录名校验
var userName = $("#uname").val();
if(userName == null || userName == ""){
alert("用户名不能为空");
return false;
}
var userPwd = $("#upwd").val();
if(userPwd == null || userPwd == ""){
alert("密码不能为空");
return false;
}
//发送请求
$.post("<%=request.getContextPath()%>/loginAnime",{"userName" : userName,"userPwd":userPwd},function(data){
//解析数据
//alert("登录"+data);
if(data == "true"){
//alert("登录成功");
location.href= "animeList.jsp";
}else{
alert("登录失败");
}
});
//取消表单提交
return false;
});
});
</script>
1.3 Ajax接收前端返回boolean类型数据
1.3.1 一般AJax请求,$.get,$.post 请求 接收的是 String 类型
//判断场景
$("form").submit(function(){
//发送请求
$.post("<%=request.getContextPath()%>/loginAnime",{"userName" : userName,"userPwd":userPwd},function(data){
//1.直接使用字符型判断
if(data == "true"){
//2.转换成boolean类型判断
//if(JSON(data) == true)
//alert("登录成功");
location.href= "animeList.jsp";
}else{
alert("登录失败");
}
})
//取消表单提交
return false;
});
1.3.2 $.getJSON 接收的是boolean类型
//场景
$("#codeLogin").click(function () {
$.getJSON("userServlet?method=sendEmail",null ,function(data){
//判断添加返回结果
//alert(data)
if(data == true){
alert("请注意接收验证码！！！");
location.href = "emailLogin.jsp";
}else{
alert("验证码发送失败！！！");
}
});
});
1、删除
1.1 删除的a标签
a标签是由第一次跳转到animeList.jsp页面时，Ajax动态加载的；
href='javascript:void(0);' 取消a标签的href属性；
/*
href='javascript:void;' 取消href跳转,使用Ajax提交请求
animeId = '"+this.id+"' 添加一个animed参数，删除时方便获取
class='delAnime' 添加类名，方便动态click绑定事件
*/
+"<a href='javascript:void(0);' animeId = '"+this.id+"' class='delAnime' >删除</a></td>"
1.2 Ajax 删除对应的动漫
$("table tbody").on("click",".delAnime",function(){ }）；给动态加载的元素绑定事件；
获取动漫id通过Ajax请求删除数据，并通过当前元素的父元素，删除该元素；（因为异步删除的数据，没有再查询一次，所以需要，手动删除动漫数据）;
//点击删除，删除对应的动漫
$("table tbody").on("click",".delAnime",function(){
//alert($(this).attr("animeId"));
//确定删除提示
if(!confirm("确定要删除这条数据吗？")){
return false;
}
//确定要删除的超链接对象
var $delAnime = $(this);
//获取删除动漫编号
var animeId = $delAnime.attr("animeId");
//alert("删除的编号：" + animeId);
//使用Ajax,实现异步删除
$.getJSON("animes?mothed=delAnime",{"id":animeId},function(data){
//判断删除成功
if(data){
//后台删除成功后，当前页面动漫元素数据页删除
$delAnime.parents("tr").remove();
alert("删除成功");
}else{
alert("删除失败");
}
})
});
1.3 onClick(), click(),on绑定 click 三者区别
1.3.1 onClick()绑定事件
onClick(函数名，或者是js代码片段)用于绑定事件，告诉浏览器在鼠标点击时候要做什么；
//场景1：
<button id="" onClick("functionName()")>点击 </button>
点击触发函数
//场景2：直接再onClick="" 中写函数内容
<a class="deleteUser" href="/userServlet?method=userDel&id=${user.id}" onClick="return confirm('是否确认删除${user.userName}用户')" >删除</a>
1.3.2 $("selected")click(function(){}); 方法
- 注意：不可以给Ajax动态添加的元素，绑定click()方法;
- 一般click(function() {})就够用了，注意Ajax加载的元素的时候就好；
//确认按钮使用的场景
$("#save").click(function () {
if(confirm("是否确认修改信息？")){
$("#userForm").submit();
}
});
1.3.3 $("table tbody").on("click",".delAnime",function(){}）
- $("父级元素").on("事件","子级元素，一般写类名",function( ){} );
//点击删除，删除对应的动漫
$("table tbody").on("click",".delAnime",function(){
//使用Ajax,实现异步删除
$.getJSON("animes?mothed=delAnime",{"id":animeId},function(data){
//判断删除成功
if(data){
//后台删除成功后，当前页面动漫元素数据页删除
$delAnime.parents("tr").remove();
alert("删除成功");
}else{
alert("删除失败");
}
})
});
2、修改
2.1 修改a标签
将要修改的数据的id,带过去，方便修改页面获取，需要修改的数据；
/*
href='modAnime.jsp?id="+this.id+"&cid="+this.cid+"'
跳转到到修改页面
参数id 是动漫的id,通过id查询对应动漫的数据，并数据回显，方便修改
cid 是动漫的的类型，方便选定动漫类型
*/
+ "<td><a href='modAnime.jsp?id="+this.id+"&cid="+this.cid+"' >修改</a> "
2.2 Ajax 获取修改的id
由于是使用Ajax直接跳转到修改动漫的页面，无法携带要修改的动漫id，于是就取巧的，将参数放在导航栏rul中，然后获取url,使用字符操作，获取到携带在rul中的参数(动漫id);
// 从url中获取参数函数，使用正则表达式
function getUrlParam(name) {
//构造一个含有目标参数的正则表达式对象
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
//匹配目标参数
var r = window.location.search.substr(1).match(reg);
//返回参数
if (r != null) {
return unescape(r[2]);
}
return null;
}
//返回按钮
$("input[type=button]").click(function(){
history.back();
});
//根据id查询数据 并将数据显示再表单中
$.getJSON("animes?mothed=animeById",{"id":getUrlParam("id")} ,function(data){
$("input[name=id]").val(data.id);
$("input[name=aname]").val(data.name);
$("input[name=author]").val(data.author);
$("input[name=actor]").val(data.actor);
$("input[name=produce]").val(data.produce);
$("input[name=createDate]").val(data.create_date);
});
2.3 Ajax修改动漫信息
-
$("form").serialize(),获取提交表单中的参数；
-
$("form").serialize()：可直接获取到表单中的参数，并不一定需要submit()事件；
-
$(selector).serialize():serialize()方法通过序列化表单值，创建标准的URL编码文本字符串,selector可以是input标签，文本框，或者是form元素本身；
-
$("form").submit(function(){ }); form表单提交事件，点击submit 标签时触发；
-
$("form").submit(); 主动触发表单提交事件，经常用于JavaScript提交表单；
//异步请求修改动漫，并跳转会展示页面
//修改动漫详情
$("form").submit(function(){
//发送Ajax异步请求，修改动漫
$.getJSON("animes?mothed=modAnime",$("form").serialize() ,function(data){
//判断添加返回结果
if(data){
alert("动漫修改成功");
location.href="animeList.jsp";
}else{
alert("修改动漫失败！！");
}
});
//去除表单提交事件
return false;
});
3、添加
3.1 跳转到添加页面
添加动漫，不需要携带参数，可直接跳转；
<input type="button" value="添加" id="addAnime"/>
//点击添加，跳转到添加动漫页面
$("#addAnime").click(function(){
location.href = "addAnime.jsp";
})
3.2 Ajax 添加动漫详情
$("form").serialize() 获取表单的参数；
//$("form").serialize() 获取表单的参数，作为异步请求的参数
//新增动漫详情
$("form").submit(function(){
//发送Ajax异步请求，新增动漫
$.getJSON("animes?mothed=addAnime",$("form").serialize() ,function(data){
//判断添加返回结果
if(data){
alert("添加动漫成功");
location.href="animeList.jsp";
}else{
alert("添加动漫失败！！");
}
});
//去除表单提交事件
return false;
});
4、分页条件查询
一般会先做分页条件查询再做增删改；
步骤 : 查询所有的数据 -> 条件查询所有数据 ->分页条件查询所有数据；(慢慢递进，不容易出错)；
4.1 参数
| 参数 | 说明 | 提交 |
|---|---|---|
| aname | 条件查询参数 | 表单提交 |
| author | 条件查询参数 | 表单提交 |
| cid | 条件查询参数 | 表单提交 |
| pageNo | 当前页面页码 | 获取tfoot的currPageNo，填入form表单隐藏的pageNo中 |
| pageSize | 页面大小 | 获取tfoot的currentPageSize，填入form表单隐藏的pageSize中 |
| totalCount | 数据总条数 | 请求数据中，根据条件查询参数先查询数据总条数 |
条件查询的参数一般都会在表单中，可以直接使用；（Ajax请求，不需要数据回显，如果是请求跳转，需要数据回显）；
分页的参数我们为了提交表单请求的时候，可以获取到分页参数，就将其他需要的参数隐藏在表单中(只要是查询需要的参数，都可以放这里，比较方便servlet的获取)；
<!--
条件查询的参数：aname，author，cid
分页的参数：pageNo，pageSize
(分页必须参数，还有数据的总量 totalCount )
-->
<form action="#">
<p style="text-align: center">
名称：<input type="text" name="aname" size="15"/>
作者：<input type="text" name="author" size="15"/>
分类：<select name="cid" id="cid">
<option value="0">全部</option>
</select>
<input type="button" value = "搜索" id = "searchAnimes" />
</p>
<!-- 隐藏当前页面参数 和 页面容量-->
<input type="hidden" name="pageNo" id="pageNo" value="1"/>
<input type="hidden" name="pageSize" id="pageSize" value="3"/>
</form>
4.2 分页标签
分页参数一般会显示在非提交表单中，需要获取并放到表单中对应的隐藏标签中；
<tfoot>
<tr>
<td colspan="8" style="height: 40px; text-align: center">
<input type="button" value="添加" id="addAnime"/>
<a href="#">首页</a> |
<a href="#" id="lastPage"><<上一页</a> |
<a href="#" id="nextPage">下一页>></a> |
<a href="#">尾页</a> |
共 <span id="totalCount"></span> 条
每页
<!-- <span id = "currentPageSize"></span> -->
<select name="currentPageSize" id="currentPageSize">
</select>
条
当前第 <span id="currPageNo"></span> 页 /
共 <span id="totalPage"></span> 页
</td>
</tr>
</tfoot>
4.3 分页Ajax
1、$("form").serialize() 获取查询条件和分页参数
2、发起请求获取返回的data(pageSupport),判断 动漫列表 (pageSupport.data)是否为null,如果为null就隐藏tfoot，且显示暂无数据；
3、显示返回的分页参数；
4、上一页，下一页的隐藏处理；
1). $("#lastPage").hide(); $("#lastPage") .show();
2). $("#lastPage").css("display","none"); $("#lastPage").css("display","inline");
5、动态拼接数据；
6、只要有数据展示，就说明需要展示tfoot;
//页面初始化加载，主动查询列表
showPageAnimeList();
//动态获取动漫数据,动态显示 条件分页查询
function showPageAnimeList(){
$.getJSON("animes?mothed=animesUsePage",$("form").serialize() ,function(data){
//alert(data);
// 确定数据要动态显示的位置
var $tbody = $("tbody");
//如果没有数据，不能显示分页和提示暂无数据
if(data.data == null || data.data == ""){
//先清空再，显示提示信息
$tbody.empty().append("<tr align='center'><td colspan='8'>暂无数据</td></tr>");
//隐藏 tfoot
$("tfoot").hide();
//直接返回，因为没有数据，不需要拼接页面
return;
}
// 显示分页数据
$("#totalCount").text(data.titalCount);
$("#currentPageSize").text(data.pageSize);
$("#currPageNo").text(data.currPageNo);
$("#totalPage").text(data.totalPage);
//上一页 和 下一页处理
if(data.currPageNo == 1){
$("#lastPage")
//.hide();
.css("display","none");
}else{
$("#lastPage")
//.show();
.css("display","inline");
}
if(data.currPageNo == data.totalPage){
$("#nextPage").hide();
}else{
$("#nextPage").show();
}
// 隔行变色
var count = 1;
//定义动态展示内容,如果不定义为空字符的话，一直拼接新数据
var animeCountent = "";
// 数据解析
$(data.data).each(function(){
// 定义颜色
var bgColor = count % 2 == 0 ? "style='background-color:#ddd;'" : "";
animeCountent +=
"<tr align='center' " + bgColor + ">"
+ "<td>" + this.id + "</td>"
+ "<td>" + this.cname + "</td>"
+ "<td>" + this.name + "</td>"
+ "<td>" + this.author + "</td>"
+ "<td>" + this.actor + "</td>"
+ "<td>" + this.produce + "</td>"
+ "<td>" + this.create_date + "</td>"
+ "<td><a href='modAnime.jsp?id="+this.id+"&cid="+this.cid+"' >修改</a> "
+"<a href='javascript:void;' animeId = '"+this.id+"' class='delAnime' >删除</a></td>"
+ "</tr>";
count++;
});
$tbody.empty().append(animeCountent);
//有数据就要展示tfoot
$("tfoot").show();
});
}
//点击搜索按钮，根据条件筛选数据
$("#searchAnimes").click(function(){
showPageAnimeList();
});
4.4 页面跳转Ajax
改变form表单中pageNo的值，并调用分页条件查询函数 showPageAnimeList();
改变form表单中pageNo的值方法：
- 通过id选择input标签再赋值：$("#pageNo").val(1);
- 直接修改表单指定name属性值的input标签value值：document.forms[0].pageNo.value = 1;
//分页跳转
//首页
$("tfoot a:eq(0)").click(function(){
//通过id选择input标签再赋值
//$("#pageNo").val(1);
//直接改表单指定name属性值的input标签赋值
document.forms[0].pageNo.value = 1;
showPageAnimeList();
return false;
});
// 上一页
$("tfoot a:eq(1)").click(function(){
$("#pageNo").val(parseInt($("#currPageNo").text()) - 1);
showPageAnimeList();
return false;
});
// 下一页
$("tfoot a:eq(2)").click(function(){
$("#pageNo").val(parseInt($("#currPageNo").text()) + 1);
showPageAnimeList();
return false;
});
// 尾页
$("tfoot a:eq(3)").click(function(){
$("#pageNo").val(parseInt($("#totalPage").text()));
showPageAnimeList();
return false;
});
4.5 PageSupport
T 自定义泛型表示数据的类型，一般是数据列表List
我感觉比较好的设计话可以是条件分页查询所有参数全部放里面 （只是想法，这里没有用）:
-
T:为自定义泛型的数据(一般为List
); -
List
浙公网安备 33010602011771号