1 jQuery基础
由John Resig发布的JS类库jQuery是JS众多类库中最为流行的一个，采用CSS的选择器机制绑定并操作元素，基本解决了浏览器的差异性问题，实现了代码链机制。 从官方网站下载JS源码文件直接引入到页面即可使用jQuery框架。
1.1 原生DOM元素（JS元素）与jQuery元素为什么不是同一种元素？两者如何转换？
<label id="mylb">我是label</label>
<!--原生DOM元素（JS元素）绑定元素的方式-->
let dom_lb = document.getElementById("mylb");
<!--打印<label id="mylb">我是label</label>-->
<!--jQuery绑定元素的方式-->
let $jq_lb = $("label#mylb");
<!--打印
base_selector.html?…qne07pubn1jibqid:24
init(1)
0: label#mylb
context: document
length: 1
prevObject: init [document, context: document]
selector: "label#mylb"
__proto__: Object(0)-->
<!--可见两种方式并不相同，即dom_lb != $jq_lb-->
jQuery元素是对JS元素一个轻度的封装，两者并不是一码事，jQuery元素只能使用jQuery自己的方法、属性、函数等，JS元素也只能使用自己的方法、属性、函数两者并不能通用。
-
两者如何转换
- jQuery转为DOM元素
$jq_lb.get(0) —> dom_lb
$jq_lb[0] —> dom_lb- DOM元素转为jQuery
$(dom_lb) —> $jq_lb
1.2 基本选择器在jQuery中的使用
与CSS的选择器类似，jQuery使用选择器来调用元素。选择器中若有冒号，指的是在冒号前指定使用这个选择器来搜索元素的范围，“sel”在这里代表选择器的名字。
- $(“tagName”) 绑定标签名为tagName的元素
- $("#idName") 绑定id为idName的元素
- $(".className") 绑定class为className的元素
- $(“tagName.className”) 绑定名为tagName的标签，class为className的元素
- $(“tagName#idName”) 绑定名为tagName的标签，class为className的元素
- $(“sel1,sel2,sel3,selN”) 并集选择器，绑定选择器名为sel1、sel2…selN对应的元素，选择器名指的是前面5个引号中的内容。
- $(“sel1 sel2 sel3 selN”) 后代选择器，绑定依次继承关系的sel1，sel2…选择器名为selN对应的元素。
- $("*") 全选选择器，绑定页面所有元素
- $(“sel1 > sel2”) 绑定sel1选择的元素中的特定的sel2选择的子元素。注意，作用的对象仅仅是子元素。
- $(“sel1 + sel2”) 绑定满足sel1选择的元素下方紧邻的兄弟（同级）元素sel2选择的元素
- $(“sel1 ~ sel2”) 绑定满足sel1选择的元素下方的兄弟（同级）元素sel2选择的元素（不必紧邻）
css(“样式名”,“样式值”);
css({“样式名1”:“样式值1”,“样式名2”:“样式值2”}); 这两个方法就是JS中元素.style封装之后的方法
html()空参为获取元素对应的的HTML内容，传入参数则为覆盖这个元素整个HTML的代码。
text()空参为获取元素内文本内容，传入参数为覆盖这个元素中的文本内容。
- 其他选择器见下面的代码及效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
</head>
<body>
<ul>
<li>我是测试1</li>
<li>我是测试2</li>
<li>我是测试3</li>
<li>我是测试4</li>
<li>我是测试5</li>
<li>我是测试6</li>
<li>我是测试7</li>
<li>我是测试8</li>
<li>我是测试9</li>
<li>我是测试10</li>
</ul>
<!--引入jQuery-->
<script src="script/jquery-1.10.2.js"></script>
<script>
/*
* $(":first")
* 绑定第一个元素，
* 绑定一般冒号前添加限定条件表示哪个选择器的第一个元素
* $(":last")
* 绑定最后一个元素
* $(":gt(index)")
* 绑定大于索引值多少的元素 索引值从0开始
* $(":lt(index)")
* 绑定小于索引值多少的元素
* $(":eq(index)")
* 绑定匹配索引值多少的元素
* $(":odd")
* 绑定索引值是奇数的元素
* $(":even")
* 绑定索引值是偶数的元素
* */
$("li:first").css("color","white");
$("li:last").css("color","purple");
$("li:gt(6)").css("font-family","楷体");
$("li:lt(6)").css("font-family","黑体");
$("li:eq(6)").css("font-family","方正静蕾简体");
$("li:odd").css("background-color","lightblue");
$("li:even").css("background-color","pink");
</script>
</body>
</html>
效果图：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
</head>
<body>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4><span id="iamsp">我是四级标题</span></h4>
<h5>我是五级标题</h5>
<h6></h6>
<h7 style="display:none;">我是隐藏的七级标题</h7>
性别: <input type="radio" name="sex" value="0">女
<input type="radio" name="sex" value="1" checked>男
<input type="radio" name="sex" value="2">其它
<ul>
<li id="test1">我是测试1</li>
<li id="thisistest2">我是测试2</li>
<li id="test3">我是测试3</li>
</ul>
<!--引入jQuery-->
<script src="script/jquery-1.10.2.js"></script>
<script>
/*
* $(":header")
* 绑定所有的标题元素h1~h6
* */
$(":header").css("background-color","orangered");
/*
* $(":contains(text)")
* 绑定含有特定文本的元素，注意仅仅是含有即可，不需要完全匹配
* text():相当于JS中的innerText属性
* 给元素内部添加文本，如果存在内容，则被完全覆盖
* */
$("h2:contains(是二级)").text("<font color='red'>我是修改后的二级标题</font>");
/*
* $(":has(sel)")
* 绑定含有特定结构（能被名为sel的选择器选中）的元素
* */
$("h4:has(span#iamsp)").html("<font color='blue'>我是修改后的四级标题</font>");
/*
* $(":empty")
* 绑定空元素
* */
$(":empty").text("我是添加进空元素的六级标题");
/*
* $(":hidden")
* 绑定隐藏元素
* 注意隐藏元素必须在:前面添加限定条件
* */
console.log($("h7:hidden").text());
/*
* $(":visible")
* 绑定所有可见元素
* 让所有可见元素字体都加粗
* */
$(":visible").css("font-weight","bolder");
/*
* $(":not(sel)")
* 绑定所有没有被选中的元素
* */
console.log("无法被内部选择器选中的元素有" + $("input:not(:checked)").length + "个");
/*
*
* $("[属性名=属性值]")
* 绑定含有属性名=属性值的元素，注意中括号之前
* 没有:
*
* $("[属性名^=属性值]")
* 绑定含有属性名以属性值开头的元素
*
* $("[属性名$=属性值]")
* 绑定含有属性名以属性值结尾的元素
*
* $("[属性名*=属性值]")
* 绑定属性名包含属性值的元素，注意仅仅是包含即可
* */
$("li[id=test1]").css("border","solid 2px navy");
$("li[id^=thisis]").css("font-style","italic");
$("li[id$=t3]").css("color","pink");
$("li[id*=t]").css("text-decoration","underline");
</script>
</body>
</html>
效果图：
1.3 四大核心函数
-
$(sel) 在括号中写选择器用来绑定元素，如$(“label#lb”)
-
$(html) 在括号中写HTML代码，封装成jQuery元素，如$("<div>******</div>")
-
$(dom) 在括号中写dom元素，封装成jQuery元素，如$(document)
-
$(document).ready() 表示全文结构加载完毕。当全文存在绑定的事件时，一般将所有的函数，放置在ready()函数内，类似于Java的主函数。可以简略为“$(function(){});” ready()中存放绑定事件以及页面加载完成时负责投放到页面数据的函数。
JS中的onload()与jQuery中的$(document).ready()有什么区别？
- onload()全文只能执行一次，如果出现多次执行最后一次。ready()全文可以执行多次，从上到下依次执行
- onload()表示全文的所有要素加载无误，而ready()仅表示结构加载完毕
1.4 常用事件定义方式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>事件</title>
<style>
.red{
background-color: red;
}
.blue{
background-color:cornflowerblue;
}
</style>
</head>
<body>
<button>我是一个按钮</button>
<input type="button" value="我是一个普通按钮">
<div style="border:solid 1px silver;width:300px;height:200px;">测试域</div>
<button>点击我！</button>
<div id="show"></div>
<script src="script/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
/*
* 1):为元素绑定多个事件
*
* $(sel).bind("事件1 事件2 事件N",function(){
* 以上事件只要激发其中任意一个即可触发
* });
* */
$("button:contains(我是一个按钮)").bind("click mouseout", function(){
/*
* $(this):表示已经通过选择器拿取的
* 元素
* attr("属性名","要更改的属性值");
* */
$(this).attr("disabled", true);
});
/*
* 2):为元素绑定特定的激发事件
* $(sel).事件(function(){
*
* });
* */
$(document).dblclick(function(){
alert("整个浏览器界面双击均有效。")
});
$("input[type$=utton]").click(function(){
//val() 表示拿取元素的value属性值，类似JS的 对象.value
console.log($(this).val());
});
/*
* 3):
* $(sel).hover(
* function(){
* 鼠标划过
* },
* function(){
* 鼠标划出
* }
* );
* */
$("div:contains(测试域)").hover(
//鼠标划过执行此函数
function(){
/*
* addClass() 添加class属性
* removeClass() 删除class属性
* toggleClass() 如果存在则删除，如果不存在则添加
*
* 注意id不能这样操作，没有对应的类似方法
* */
$(this).removeClass().addClass("red");
},
//鼠标划出执行此函数
function(){
$(this).removeClass().addClass("blue");
}
);
/*
*
* 4):
* $(sel).one("事件1 事件2 事件N",function(){
* 任一事件激发执行此函数，但是仅仅激发一次
* })
* */
let count = 0;
$("button:contains(点击)").one("click", function(){
count++;
$("div#show").text("当前按钮被点击" + count + "次");
});
});
</script>
</body>
</html>
效果图：
1.5 使用jQuery进行AJAX异步请求查重
- jQuery中使用AJAX发送异步请求的过程（类似于Http协议的请求行和请求头）。注意，这里设置的dataType优先级比servlet的response中的ContentType优先级要高。
$.ajax({
//1.定义发送异步请求的目的地，get方式可以在这里传递值
url: "xxx",
//2.请求类型 post/get/put/delete等
type: "post",
//3.是（true）否（false）使用异步
async: true,
//4.get/post都可以在这里传递值
data: "name=" + xxxx.val() + "&pwd=" + xxx.val(),
//5.返回的数据类型，这里支持五中数据类型：text、JSON、XML、script、HTML
dataType: "text",
//6.服务器无异常调用回调函数
//返回的数据存在参数中
//dataType已设置，所以这个参数是字符串数据类型
success: function(data) {
},
//7.服务器出现异常调用的回调函数
error:function(err){
}
});
ajax.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>使用jQuery进行AJAX查重</title>
</head>
<style>
.input_check{
border:solid 2px red;
background-color: #ffa2a5;
background-image:url("image/check.gif");
background-repeat: repeat-x;
background-position: bottom;
}
</style>
<body>
<form action="#" method="post">
<label for="nameid">用户姓名：</label>
<input type="text" name="name" id="nameid" required
autocomplete="off" placeholder="用户名必须在4到8位之间">
<span id="name_msg"></span>
<br>
<input type="submit" value="提交" disabled>
</form>
<script src="script/jquery-1.10.2.js"></script>
<script>
$(function(){
//绑定单行文本框
let $jq_input = $("input#nameid");
//绑定提交按钮
let $jq_submit = $(":submit");
//绑定span
let $jq_sp = $("span#name_msg");
//单行文本框输入结束 失去焦点时激发
$jq_input.blur(function(){
/*
* $.trim():去掉字符串两边的空格
*
* */
if($.trim($jq_input.val()).length < 4 || $.trim($jq_input.val()).length > 8){
//添加错误警告样式
$jq_input.addClass("input_check");
//禁用提交按钮
$jq_submit.attr("disabled", true);
//显示错误提示信息
$jq_sp.html("<img src='image/wrong.png'>用户名不能小于4位或者大于8位").css("color", "red");
return;
}
$.ajax({
//1.定义发送异步请求的目的地，get方式可以在这里传递值
url: "checkName",
//2.请求类型
type: "post",
//3.是（true）否（false）使用异步
async: true,
//4.get/post都可以在这里传递值
data: "name=" + $jq_input.val(),
//5.返回的数据类型，这里支持五中数据类型：text、JSON、XML、script、HTML
dataType: "text",
//6.服务器无异常调用回调函数
//返回的数据存在参数中
//dataType已设置，所以这个参数是字符串数据类型
success: function(data) {
if (data == "exist") {
//添加错误警告样式
$jq_input.addClass("input_check");
//禁用提交按钮
$jq_submit.attr("disabled", true);
//显示错误提示信息
$jq_sp.html("<img src='image/wrong.png'>用户名已被占用").css("color", "red");
return;
} else if (data == "success") {
//最终确保移除错误警告样式
$jq_input.removeClass("input_check");
//恢复使用提交按钮
$jq_submit.attr("disabled", false);
//显示正确提示信息
$jq_sp.html("<img src='image/right.png'>用户名可以使用").css("color", "green");
}
},
//7.服务器出现异常调用的回调函数
error:function(err){
console.log(err.status);
}
});
});
});
</script>
</body>
</html>
CheckName.java
package com.test.servlet;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class CheckName extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/plain;charset=utf-8");
PrintWriter out = response.getWriter();
String name = request.getParameter("name");
//假数据，如果等于Eric即用户名存在
if("Eric".trim().equals(name)){
out.print("exist");
out.flush();
out.close();
return;
}
out.print("success");
out.flush();
out.close();
}
}
效果图：
，注意，原生的JS中没有异步的方法，jQuery中的“$.”在原生JS中不存在。
2 LayUI动态表格
- 显示动态表格页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>使用LayUI处理动态表格</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<table id="tableid" lay-filter="lFilter"></table>
<script type="text/html" id="toolbar">
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="layui/layui.js"></script>
<script src="script/jquery-1.10.2.js"></script>
<script>
//注意全程一定使用单引号
layui.use(['table','layer'],function(){
//加载table模块
let table = layui.table;
//加载层模块
let layer = layui.layer;
table.render({
//绑定哪个表格
elem:'#tableid',
//表格高度
//height:900,
//表格宽度
//width:900,
//是否开启工具栏，
toolbar:true,
//设置文本，一般可以设置无数据时的效果
text:{
//无数据显示以下信息
none:'数据库中无数据'
},
/*
* skin:
* line行边框风格
* row列边框风格
* nob无边框风格
* even:
* true false 是否开启隔行背景
* size:
* 设置表格大小sm小尺寸 lg大尺寸
*
* */
skin:'line',
even:true,
size:'sm',
//发送异步请求的目的地
url:'showStudent',
method:'post',
/*parseData: function(res){ //res 即为原始返回的数据
return {
"code": 0, //解析接口状态
"msg": res.message, //解析提示文本
"count": res.total, //解析数据长度
"data": res.rows //解析数据列表
};
},*/
//设置每页记录数
limit:10,
//是否开启分页功能
page:true,
/*
* cols:[[
* {field:'字段名',title:'显示在页面上的字符',width:宽度,是否具备排序功能,左对齐}
* ]]
* */
cols:[[
{field:'id',title:'ID',width:200,sort:true,fixed:'left'},
{field:'name',title:'姓名',width:200},
{field:'email',title:'邮箱',width:300},
{field:'phone',title:'电话',width:200},
{fixed:'right',width:200,align:'center',toolbar:'#toolbar'}
]]
});
table.on('tool(lFilter)',function(obj){
//此数据为json格式
//{id:1,name:"amy",email:"1@t.tt",phone:"11111"}
let data = obj.data; //获得当前行数据
let event = obj.event; //获得lay-event对应的值
let tr = obj.tr;//获得当前行tr的dom对象
//以下为查看的业务逻辑，打开弹出层
if(event==='detail'){
layer.open({
//弹出层类型
type:2,
//取值
content:'/LayUI_DynaTable/info.jsp?id='+data.id+'&name='+data.name+'&email='+data.email+'&phone='+data.phone,
//设置宽和高
area:['500px','300px'],
//设置按钮名称
btn:['我知道了'],
//设置按钮位置
btnAlign:'c',
//透明度 和 被遮盖层颜色
shade: [0.8,'#393D49'],
//渐显动画
anim: 5
});
}else if(event==='edit'){
//以下为编辑的业务逻辑，打开弹出层
layer.open({
//弹出层类型
type:2,
//取值
content:'/LayUI_DynaTable/update.jsp?id='+data.id+'&name='+data.name+'&email='+data.email+'&phone='+data.phone,
//设置宽和高
area:['600px','400px'],
//设置按钮名称
btn:['暂不进行修改'],
//设置按钮位置
btnAlign:'c',
//透明度 和 被遮盖层颜色
shade: [0.8,'#393D49'],
//渐显动画
anim: 5,
//当检测到弹出层被关闭时，自动刷新一下界面
//用于后面修改学生信息请求提交后自动刷新查看修改结果
end: function(){
console.log("222");
},
});
}else if(event==='del'){
//以下为删除的业务逻辑
//index表示第几次弹出的层
layer.confirm('您真的确定删除此行吗',function(index){
//index表示第几次弹出层不是索引值，也不是主键等信息
//刷新页面重置
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
$.ajax({
url:"delStudent",
type:"post",
data:"id="+data.id,
dataType:"text",
async:true,
success:function(result){
if(result == "success"){
alert("删除成功！！");
return;
}
},
error:function(err){
console.log(err.status);
}
});
});
}
});
});
</script>
</body>
</html>
还没有数据时的效果图（最上面的三个按钮是工具栏）
- 显示所有学生信息： servlet/ShowStudent.java
package com.test.servlet;
import com.test.dao.StudentDaoIf;
import com.test.dao.StudentDaoImpl;
import com.test.po.Student;
import net.sf.json.JSONObject;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
public class ShowStudent extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/plain;charset=utf-8");
PrintWriter out = response.getWriter();
StudentDaoIf dao = new StudentDaoImpl();
//接收前端发来的分页所必需的可变的两个数据：每页记录数、当前页
//拿取每页记录数
Integer limit = Integer.parseInt(request.getParameter("limit"));
//拿取当前页
Integer page = Integer.parseInt(request.getParameter("page"));
//数据库拿取分页所必需的数据：总记录数
Integer totalRecord = dao.getCount();
//根据前面的分页必需数据，算出最后一个必需数据：总页数
Integer totalPage = (limit + totalRecord - 1) / limit;
//当前页的索引值
Integer index = (page - 1) * limit;
//分页查询
List<Student> list = dao.getPage(index, limit);
//使用第一种封装方式打包到JSON中，响应回前端
JSONObject jo = new JSONObject();
//写入封装的内容
//前面两个传空值
jo.put("code", "");
jo.put("msg", "");
//传总记录数
jo.put("count", totalRecord);
//传分页数据
jo.put("data", list);
out.print(jo);
out.close();
}
}
- 删除学生信息： servlet/DelStudent.java（if(event===‘del’)真删除，真正把被删除的数据从数据库移除）
package com.test.servlet;
import com.test.dao.StudentDaoIf;
import com.test.dao.StudentDaoImpl;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class DelStudent extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/plain;charset=utf-8");
Integer id = Integer.parseInt(request.getParameter("id"));
StudentDaoIf dao = new StudentDaoImpl();
PrintWriter out = response.getWriter();
if(dao.delStuById(id)){
out.print("success");
out.flush();
out.close();
}
out.print("error");
out.flush();
out.close();
}
}
效果图：
- 详细信息： if(event===‘detail’)取链接后面传过来的参数值，使用EL表达式取出显示在弹出层info.jsp中
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>${param.name}详细信息</title>
<link rel="stylesheet" href="layui/css/layui.css">
<style>
body{
background-color:lightblue;
}
table{
text-align: center;
}
h2{
text-align: center;
font-family: Arial;
}
</style>
</head>
<body>
<h2>${param.name}详细信息</h2>
<table class="layui-table">
<colgroup>
<col width="60">
<col width="150">
<col width="150">
<col>
</colgroup>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>邮箱</th>
<th>电话</th>
</tr>
</thead>
<tbody>
<tr>
<td>${param.id}</td>
<td>${param.name}</td>
<td>${param.email}</td>
<td>${param.phone}</td>
</tr>
</tbody>
</table>
<script src="layui/layui.js"></script>
</body>
</html>
效果图：
- 修改学生信息： if(event===‘edit’)弹出层为update.jsp修改学生信息
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>修改页面</title>
<link rel="stylesheet" href="layui/css/layui.css">
<style>
body{
background-color:lightblue;
}
table{
text-align: center;
}
h2{
text-align: center;
font-family: Arial;
}
</style>
</head>
<body>
<div class="login-main">
<form class="layui-form layui-form-item" name="updateForm" id="updateForm">
<div class="line-input">
<input type="hidden" name="id" value="${param.id}"">
</div>
<div class="line-input">
<input type="text" name="name" required lay-verify="required" placeholder="在这里输入姓名" value="${param.name}" autocomplete="off" class="layui-input input">
</div>
<div class="line-input">
<input type="text" name="email" required lay-verify="required|verifyEmail" placeholder="在这里输入邮箱" value="${param.email}" autocomplete="off" class="layui-input input">
<span id="email_msg"></span>
</div>
<div class="line-input">
<input type="text" name="phone" required lay-verify="required|verifyPhone" placeholder="在这里输入手机号码" value="${param.phone}" autocomplete="off" class="layui-input input">
<span id="phone_msg"></span>
</div>
<div class="line1 login-btn">
<button type="button" class="layui-btn layui-btn-md" style="width:300px" lay-submit lay-filter="filterSubmit" >修改</button>
</div>
</form>
</div>
<script src="layui/layui.js"></script>
<script src="script/jquery-1.10.2.js"></script>
<script>
layui.use(['form'], function() {
let form = layui.form;
//提交时对手机号、邮箱进行验证
form.verify({
verifyEmail:[/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/,"请输入正确的邮箱地址"],
verifyPhone:[/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,"请输入正确的手机号码"]
});
//点击提交即发送异步请求更新
form.on('submit(filterSubmit)', function(){
$.ajax({
type: "POST",
url: "updateStudent",
//序列化form表单的name-value为?name1=key1&name2=key2...
data: $("form#updateForm").serialize(),
dataType: "json",
success:function(msg){
console.log(msg);
//关闭弹出层
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
},
error:function(err){
console.log(err)
}
});
});
});
</script>
</body>
</html>
servlet/UpdateStudent.java
package com.test.servlet;
import com.test.dao.StudentDaoIf;
import com.test.dao.StudentDaoImpl;
import com.test.po.Student;
import net.sf.json.JSONObject;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class UpdateStudent extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/plain;charset=utf-8");
String name = request.getParameter("name");
String email = request.getParameter("email");
String phone = request.getParameter("phone");
String id = request.getParameter("id");
Student s = new Student();
s.setName(name);
s.setEmail(email);
s.setPhone(phone);
s.setId(Integer.parseInt(id));
//更新操作
StudentDaoIf dao = new StudentDaoImpl();
dao.updateStudent(s);
PrintWriter out = response.getWriter();
//封装实体类通过JSON响应到前端
JSONObject jo = JSONObject.fromObject(s);
out.print(jo);
out.flush();
out.close();
}
}
效果图：
1961
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
