02.jquery框架下载与导入【应用】
目标
掌握jquery的使用
jquery介绍
是一个js框架,简化js的编写。jquery宗旨:write less do more。
jquery的插件丰富,所谓插件就是利用jquery技术写一个独立效果
使用实现步骤
-
下载jquery,官网www.jquery.com
资源类库中也提供了
不同版本介绍
jquery提供了大版本1.x,2.x,3.x
其中1.x支持IE6,7,8浏览器,2.X和3.X不支持IE6,7,8
每个版本都有2个文件,xx.js是开发版本(非压缩),xx.min.js是生产版本(压缩的版本,推荐使用)
-
将js文件导入到项目中js目录下
-
新建网页,在html页面上导入js文件
-
使用jquery代码测试导入是否成功
实现代码
html页面上导入js文件
运行效果
使用jquery常见错误
解决方案:正确导入jquery文件
小结
-
jquery以后企业中开发使用开发版本还是生产版本?
使用生产版本(xxxx.min.js),体积小,传输快。
03.jquery与js的区别1-加载事件不同【应用】
目标
掌握jquery与js的加载完成事件的区别
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js和jq区别</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
/*
* 目标:js与jq(jquery)的加载事件区别
* 1.js的加载完成事件要求每个页面只能有一个,多个的话下面的会覆盖上面的
* 2.jq的加载完成事件可以有多个,都会运行【推荐使用】
* */
//1.js的加载完成事件
window.onload = function () {
alert("js加载事件1"); //不能运行
};
window.onload = function () {
alert("js加载事件2"); //会运行
};
//2.jq的加载完成事件
$(function () {
alert("jq加载事件1"); //会运行
});
$(function () {
alert("jq加载事件2"); //会运行
});
</script>
小结
-
jquery加载完成事件有什么优势?
一个页面可以有多个
04.jquery与js的区别2-对象获取与注册事件不同【应用】
目标
掌握获取jquery对象的方式
掌握jquery对象注册事件方式
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js和jq区别</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="button" id="b1" value="我是JS对象">
<input type="button" id="b2" value="我是JQ对象">
</body>
<script type="text/javascript">
/*
* 目标1:js与jq获取对象的区别
* js获取对象的语法:document.getElementXXXX(), 简称使用document系列方法获取
* jq获取对象的语法:$("选择器"), 简称使用$和选择器获取
* 目标2:js与jq对象注册事件方式的区别
* js对象注册事件语法: js对象.οnclick=function(){...}
* jq对象注册事件语法: jq对象.click(function(){...})
* */
//使用js对象注册点击事件并弹出按钮的value属性值
var jsObj = document.getElementById("b1");
jsObj.onclick = function () {
//获取value值并弹出
alert(jsObj.value); //value属性是js对象的成员
};
//使用jq对象注册点击事件并弹出按钮的value属性值
var jqObj = $("#b2");
jqObj.click(function () {
//获取value值并弹出,this是当前事件源按钮的对象
alert(this.value); //this是js对象,js对象就有value属性
});
</script>
运行效果
小结
-
如何获取jq对象?
$("选择器")
-
jq对象如何注册事件?
jq对象.事件名(function(){...});
05.jquery与js的区别3-jq与js对象之间转换【应用】
疑问
-
以后我们是使用js对象还是jq对象操作dom?
以后使用jq对象操作dom, 以后经常会将js对象转换为jq对象,之后再操作DOM
目标
掌握js对象转换为jq对象
转换语法
-
js对象转换jq对象语法【重要】
$(js对象) = jq对象
-
jq对象转换为js对象语法【了解】
jq对象[0] 或者 jq对象.get(0)
jq对象理解为类似于一个js数组,通过下标的方式获取里面的元素就是js对象
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js和jq区别</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="button" id="b1" value="我是JS对象">
<input type="button" id="b2" value="我是JQ对象">
</body>
<script type="text/javascript">
//使用js对象注册点击事件并弹出按钮的value属性值
var jsObj = document.getElementById("b1");
jsObj.onclick = function () {
//获取value值并弹出
//JS--》JQ对象【重要】 jq对象获取value的语法:jq对象.val();
alert($(jsObj).val());
};
//使用jq对象注册点击事件并弹出按钮的value属性值
var jqObj = $("#b2");
jqObj.click(function () {
//获取value值并弹出,this是当前事件源按钮的对象
//JQ--》JS对象
alert(jqObj[0].value);
});
</script>
运行效果
小结
-
为什么学习js对象转换为jq对象?
因为jquery框架对jq对象提供丰富api方法,简化js的操作
06.jQuery的选择器1-基本选择器【应用】
疑问
-
jq具体简化了js什么操作?
简化了js的dom操作,对html元素标签的增、删、改、查
-
增、删、改、查先学习那个?
查。
目标
使用jq查询元素对象,根据jq语法知道需要学习选择器
基本选择器语法
基本选择器 | 语法 |
---|---|
ID选择器 | $("#ID") |
类选择器 | $(".类名") |
标签选择器 | $(“标签名”) |
实现代码
<script type="text/javascript">
// 1) 改变 id 为one的元素的背景色为红色
$("#b1").click(function () {
//js操作背景色方式1:js对象.style.backgroundColor="red";
//js操作背景色方式2:js对象.style="background-color:red";
//jq操作背景色方式1:jq对象.css("backgroundColor","red");
//jq操作背景色方式2:jq对象.css("background-color","red");
$("#one").css("background-color","red");
});
// 2) 改变元素名为 <div> 的所有元素的背景色为 红色。
$("#b2").click(function () {
$("div").css("background-color","red");
});
// 3) 改变 class 为 mini 的所有元素的背景色为 红色
$("#b3").click(function () {
$(".mini").css("background-color","red");
});
</script>
07.jQuery的选择器2-层级选择器【应用】
层级选择器语法
实现代码
<script type="text/javascript">
//1) 改变 <body> 内所有 <div> 的背景色为红色
$("#b1").click(function () {
$("body div").css("background-color","red");
});
//2) 改变 <body> 内子 <div> 的背景色为 红色
$("#b2").click(function () {
$("body>div").css("background-color","red");
});
//3) 改变 id为two的下一个div兄弟元素的背景色为红色
$("#b3").click(function () {
$("#two+div").css("background-color","red");
});
</script>
08.jQuery的选择器3-属性选择器【应用】
属性选择器语法
实现代码
<script type="text/javascript">
//1) 含有属性title 的div元素背景色为红色
$("#b1").click(function () {
$("div[title]").css("background-color","red");
});
//2) 属性title值等于test的div元素背景色为红色
$("#b2").click(function () {
$("div[title=test]").css("background-color","red");
});
//3) 属性title值不等于test的div元素(没有title属性的也将被选中)背景色为红色
$("#b3").click(function () {
$("div[title!=test]").css("background-color","red");
});
//4) 选取有属性id的div元素,然后在结果中选取属性title值等于“test”的 div 元素背景色为红色
$("#b4").click(function () {
$("div[id][title=test]").css("background-color","red");
});
</script>
09.jQuery的选择器4-基本过滤选择器【应用】
基本过滤选择器语法
实现代码
<script type="text/javascript">
//1) 改变第一行的背景色为浅灰色 light+color == 浅颜色; dark+颜色=深颜色
$("#b1").click(function () {
$("tr:first").css("background-color","lightgray");
});
//2) 改变最后一行的背景色为lightgreen浅绿色
$("#b2").click(function () {
$("tr:last").css("background-color","lightgreen");
});
//3) 改变除第1行和最后1行的其它行背景色为lightyellow浅黄色
$("#b3").click(function () {
$("tr:not(:first):not(:last)").css("background-color","lightyellow");
});
//4) 改变索引值为偶数的行背景色为lightpink浅粉色,下标从0开始
$("#b4").click(function () {
$("tr:not(:first):not(:last):even").css("background-color","lightpink");
});
//5) 改变索引值为奇数的行背景色为aquamarine深蓝色
$("#b5").click(function () {
$("tr:not(:first):not(:last):odd").css("background-color","aquamarine");
});
//6) 改变索引值大于 3 的tr元素的背景色为oldlace浅米色
$("#b6").click(function () {
$("tr:gt(3)").css("background-color","oldlace");
});
//7) 改变索引值等于 3 的tr元素的背景色为antiquewhite古董白
$("#b7").click(function () {
$("tr:eq(3)").css("background-color","antiquewhite");
});
//8) 改变索引值为小于 3 的tr元素背景色为yellowgreen黄绿色
$("#b8").click(function () {
$("tr:lt(3)").css("background-color","yellowgreen");
});
</script>
按钮1到按钮3的效果
按钮1到按钮5的效果
按钮6到按钮8效果
10.jQuery的选择器5-表单属性过滤选择器【应用】
表单属性过滤选择器语法
实现代码
<script type="text/javascript">
//1) val() 方法改变表单内可用文本框 <input> 元素的值
$("#b1").click(function () {
//jq对象.val() 含义:获取标签value属性值
//jq对象.val(值) 含义:设置标签value属性值
$("input[type=text]:enabled").val("itheima117");
});
//2) val() 方法改变表单内不可用 <input> 元素的值
$("#b2").click(function () {
//$("input[type=text]:disabled").val("itheima117");
//优化获取单行文本框,选择器“input[type=text]” 优化为“:text”,所有表单元素type的值都可以写为“:type的值”获取对应表单元素
$(":text:disabled").val("itheima117");
});
//3) length 属性获取复选框选中的个数
$("#b3").click(function () {
//获取jq对象(类似js数组)获取里面元素的个数语法:jq对象.length
//普通写法
//alert($("input[type=checkbox]:checked").length);
//简化写法
alert($(":checkbox:checked").length);
});
//4) text 属性获取下拉列表选中的内容
$("#b4").click(function () {
//js获取标签体文本内容语法:jq对象.innerText
//jq获取标签体文本内容语法:jq对象.text()
alert($("select option:selected").text());
});
</script>
小结
11.案例1-表格隔行换色【应用】
需求
页面加载后偶数行为粉红色,奇数行为黄色
实现效果
实现代码
<script src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
//目标:页面加载后偶数行为粉红色,奇数行为黄色
$("tr:gt(1):even").css("background-color","pink");
$("tr:gt(1):odd").css("background-color","yellow");
});
</script>
12.jQuery的DOM操作1-html代码-文本-值【应用】
语法
实现代码
<script type="text/javascript">
// 设置myinput的value属性值
$("#b1").click(function () {
$("#myinput").val("itheima117")
});
// 获取myinput的value属性值并弹框显示
$("#b2").click(function () {
alert($("#myinput").val());
});
//设置mydiv标签体html代码'<h2>itheima</h2>'
$("#b3").click(function () {
$("#mydiv").html("<h2>itheima</h2>");
});
//获取mydiv标签体html代码并弹框显示
$("#b4").click(function () {
alert($("#mydiv").html());
});
//设置mydiv标签体text文本内容为'<h2>itheima</h2>'
$("#b5").click(function () {
$("#mydiv").text("<h2>itheima</h2>");
});
//获取mydiv标签体text文本内容并弹框显示
$("#b6").click(function () {
alert($("#mydiv").text());
});
</script>
13.jQuery的DOM操作2-属性操作【应用】
语法
实现代码
<script type="text/javascript">
//获取北京节点的name属性值
$("#b1").click(function () {
alert($("#bj").attr("name"));
});
//设置北京节点的name属性的值为dabeijing
$("#b2").click(function () {
$("#bj").attr("name","dabeijing");
});
//新增北京节点的description属性 属性值是didu
$("#b3").click(function () {
$("#bj").attr("description","didu");
});
//删除北京节点的name属性
$("#b4").click(function () {
$("#bj").removeAttr("name");
});
//获得hobby的选中状态
$("#b5").click(function () {
//alert($("#hobby").attr("checked")); //结果弹出:undefined
/*
* attr与prop的区别
* 1.attr的操作
* 获取属性数据方面:attr只能获取网页上明确有的属性数据,没有显示出来的属性获取返回undefined
* 设置属性数据方面:没有任何问题
* 2.prop的操作
* 特点:jquery1.6版本才有这个api
* 获取数据与设置数据方面:适合操作标签具有boolean类型值的属性,例如:checked,disabled,readonly,selected
* 总结: attr适合操作大多数属性,prop适合操作boolean类型属性
* */
//所以这个案例使用prop比较好
alert($("#hobby").prop("checked")); //由于默认没有选中,所以获取为“false”
//设置hobby选中的方法有4个中方式【了解】
/*$("#hobby").prop("checked",true)
$("#hobby").prop("checked","checked");
$("#hobby").attr("checked",true);
$("#hobby").attr("checked","checked");*/
});
</script>
14.jQuery的DOM操作3-样式操作【应用】
dom样式操作方式
html标签设置样式是通过class属性与style属性完成的
<标签 class="类样式1 类样式2 ..." style=""></标签>
jquery操作dom样式的语法
class的操作
style的样式操作
实现代码
<script type="text/javascript">
// 采用attr属性增加样式(改变id=one的样式),类样式名为second
$("#b1").click(function () {
$("#one").attr("class","second");
});
// addClass
$("#b2").click(function () {
$("#one").addClass("second");
});
// removeClass
$("#b3").click(function () {
$("#one").removeClass("second");
});
// 切换样式
$("#b4").click(function () {
$("#one").toggleClass("second");
});
// 通过css()获得id为one背景颜色
$("#b5").click(function () {
alert($("#one").css("background-color"));
});
// 通过css()设置id为one背景颜色为绿色
$("#b6").click(function () {
$("#one").css("background-color","green");
});
</script>
15.jQuery的DOM操作4-元素节点创建-插入-移动【应用】
语法
实现代码
<script type="text/javascript">
//将反恐放置到city的最后子元素位置
$("#b1").click(function () {
$("#city").append($("#fk"));
});
//将反恐放置到city的最前面,第一个子元素位置
$("#b2").click(function () {
$("#city").prepend($("#fk"));
});
//将反恐放在天津前面
$("#b3").click(function () {
$("#tj").before($("#fk"));
});
//将反恐放在天津后面
$("#b4").click(function () {
$("#tj").after($("#fk"));
});
//创建一个广州的节点,加到城市中:<li id="gz" name="guangzhou">广州</li>,放到最后一个子元素位置
$("#b5").click(function () {
var gz = $('<li id="gz" name="guangzhou">广州</li>');
//$("#city").append(gz);
gz.appendTo($("#city"));
});
</script>
16.jQuery的DOM操作5-元素的删除【应用】
语法
实现代码
<script type="text/javascript">
//从city中删除<li id="bj" name="beijing">北京</li>节点
$("#b1").click(function () {
$("#bj").remove();
});
//删除city中所有的子节点,观察city本身有没有删除
$("#b2").click(function () {
$("#city").empty();
});
</script>
17.案例2-QQ表情案例
需求效果
代码实现
<script src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
//1.给每个表情(li内部的img)注册点击事件
$("li img").click(function () {
//2.将当前点击的表情对象添加到请发言.word标签内部最后子元素位置
//this,就是事件源触发的一个对象,这是js对象
//$(".word").append($(this)); //这样写会发生点一个丢一个,将原对象移走了
//疑问:怎么解决原位置不动,目标位置出现表情?答:可以对原对象进行克隆出一个一模一样的对象,移动到目标位置
//克隆:复制出一个一模一样的对象,数据一样,对象的内存地址不一样, 语法: jq对象.clone();
$(".word").append($(this).clone());
});
});
</script>
18.jquery循环遍历
目标
掌握jquery的循环遍历方式,以后不用js的循环
修改idea的js校验规范
实现代码
注意:素材中提供的引用jquery的js文件路径是错误的,需要添加“…/”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的遍历方式</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<select name="city" id="city">
<option>广州</option>
<option>深圳</option>
<option>东莞</option>
</select>
<input type="button" id="b1" value="js传统for循环"/>
<input type="button" id="b2" value="js新版本es6的for-of循环"/>
<input type="button" id="b3" value="jq对象的方法遍历"/>
<input type="button" id="b4" value="jq对象的全局方法"/>
<script type="text/javascript">
/*
* 循环遍历方式:
* 1.js传统循环方式
* 格式:for(var i=0;i<length;i++){...}
* 2.js新标准es6的for-of循环【推荐,以后再vue框架中使用】
* 格式:for(var item of jq对象/数组){...}
* 说明:item是数组的每个元素对象
* js遵守ECMASCRIPT规范,es6目前是最新规范,2015年出来
* 3.jquery对象的each方法方式【推荐,web阶段使用】
* 格式:jq对象.each(function(index,element){...});
* 参数: function 是遍历的函数,每一次循环运行一次
* 参数:index, 循环的索引,从0开始
* 参数:element, 循环的每个元素对象,是一个js对象
* 4.jquery全局each方法方式
* 格式:$.each(jq对象,function(index,element){...})
* */
$("#b1").click(function () {
//获取城市列表
var options = $("option");
//循环遍历——js传统循环
for(var i=0;i<options.length;i++){
var option = options[i]; //option是js对象
alert(i+","+$(option).text());
}
});
$("#b2").click(function () {
//获取城市列表
var options = $("option");
//循环遍历——js新标准es6的for-of循环
for(var option of options){ //这里有红线,因为idea默认使用es5的标准校验语法,修改为es6标准就不会有红线
alert($(option).text());
}
});
$("#b3").click(function () {
//获取城市列表
var options = $("option");
//循环遍历——jquery对象的each方法方式
options.each(function (i,option) {
alert(i+","+$(option).text());
});
});
$("#b4").click(function () {
//获取城市列表
var options = $("option");
//循环遍历——jquery全局的each方法方式
$.each(options,function (i,option) {
alert(i+","+$(option).text());
});
});
</script>
</body>
</html>
效果
20.jquery事件1—事件介绍与常用事件【应用】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
//得到焦点改变背景色pink
$("#t1").focus(function () {
$(this).css("background-color","pink");
});
//失去焦点改变背景色
$("#t1").blur(function () {
$(this).css("background-color","yellow");
});
//松开键,把英文改成大写
//keyup键盘弹起事件
$("#t1").keyup(function () {
//字符串转换为大写的语法:string.toUpperCase();
//1.获取输入的值
var value = $(this).val();
//2.转换为大写
value = value.toUpperCase();
//3.设置回文本框的value属性值
$(this).val(value);
});
//jquery注册事件的链式写法
//得到焦点改变背景色pink
$("#t1").focus(function () {
$(this).css("background-color","pink");
}).blur(function () {
$(this).css("background-color","yellow");
}).keyup(function () {
//字符串转换为大写的语法:string.toUpperCase();
//1.获取输入的值
var value = $(this).val();
//2.转换为大写
value = value.toUpperCase();
//3.设置回文本框的value属性值
$(this).val(value);
});
})
</script>
</head>
<body>
用户名:
<input type="text" id="t1" value="" />
</body>
</html>
效果
21.jquery事件2-使用on绑定事件与off解绑事件【应用】
目标
使用on绑定事件
使用off解绑事件
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件动态绑定</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="button" value="按钮1" id="b1">
<input type="button" value="按钮2" id="b2">
<hr>
<input type="button" value="解绑事件" id="unbind">
</body>
<script type="text/javascript">
//给按钮1使用事件名方式注册点击事件,弹出“按钮1”
$("#b1").click(function () {
alert($(this).val());
});
//使用on注册事件方式给b2注册点击事件,弹出“按钮2”
$("#b2").on("click",function () {
alert($(this).val());
});
//给unbind注册点击事件实现给b2解绑事件
$("#unbind").click(function () {
$("#b2").off();//解绑所有事件
/*
* 注意:off只能解绑动态注册的事件,就是使用js或jq代码注册事件
* off无法解绑html标签通过属性绑定的事件
* 例子:<input type="button" value="按钮2" id="b2" οnclick="demo();"> off是不能解绑
* 解决方案: $("#b2").removeAttr("onclick");
* */
});
</script>
</html>
效果
22.jquery事件3-使用on给动态创建元素绑定事件【应用】
on可以给已有和动态创建元素绑定事件,语法如下
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加城市列表</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<ol id="city">
<li>广州</li>
<li>上海</li>
<li>北京</li>
</ol>
城市名:<input type="text" id="t1" placeholder="请输入城市名">
<input type="button" id="b1" value="添加城市列表">
<script type="text/javascript">
//给每个li添加点击事件,弹出自己的文本内容
/*$("li").click(function () {
alert($(this).text());
});*/
//注意:这个点击事件只适合页面上已有的元素绑定事件,而动态新增的元素是没有事件
//使用on给已有和动态新增的元素绑定事件
$("#city").on("click","li",function () {
alert($(this).text());
});
//点击按钮事件,动态添加li
$("#b1").click(function () {
//1.获取输入的城市名字
var city = $("#t1").val();
//2.将新收入的城市名字加入到城市列表
$("#city").append("<li>"+city+"</li>");
});
</script>
</body>
</html>
小结
-
给页面已有元素注册事件方式有哪些?
jq对象.事件名(函数);
jq对象.on(“事件名”,fn);
-
给页面已有和新增内容都注册事件方式有哪些?
jq对象.on(“事件名”,“子选择器”,fn);
23.案例3-实现购物车【应用】
需求
-
实现添加商品,如果商品名为空,提示:商品名不能为空。如果不为空,则添加成功一行,清空文本框的内容,图片使用固定一张。
-
实现删除一行商品的功能,删除前弹出确认对话框。
-
实现全选/全不选的效果
效果
实现代码
<script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>
<script type="text/javascript">
//添加购物车点击事件
function addRow() {
//1.获取输入的数据
var pname = $("#pname").val();
//2.判断数据是否有效
if(pname){
//3.有效后,手动拼接tr一行数据
var tr='<tr>\n' +
' <td>\n' +
' <input type="checkbox" name="item" />\n' +
' </td>\n' +
' <td><img src="img/sx.jpg" /></td>\n' +
' <td>\n' +
' '+pname+'\n' +
' </td>\n' +
' <td>\n' +
' <a href="javascript:void(0)" οnclick="deleteRow(this)">删除</a>\n' +
' </td>\n' +
' </tr>';
//4.将新增的tr数据添加到tbody最后子元素位置
$("#cart").append(tr);
//5.添加成功后,清空输入框数据
$("#pname").val('');
}
}
//全选框点击事件
function selectAll(obj) {
//obj是全选框js对象,
//获取全选框选中状态
var isChecked = $(obj).prop("checked");
//获取所有子选框对象,设置选中状态与全选框选中状态一致
$(":checkbox[name=item]").prop("checked",isChecked);
}
//删除点击事件
function deleteRow(obj) {
//obj是a标签js对象
//jq对象获取父元素对象语法:jq对象.parent();
if(confirm("您确定要删除当前商品吗?")){
//获取obj的父元素的父元素对象
$(obj).parent().parent().remove();
}
}
</script>
24.添加联系人案例
实现需求
添加联系人
实现效果
实现步骤
IContactDao代码
//添加联系人方法
@Insert("INSERT INTO contact VALUES(NULL,#{name},#{sex},#{age},#{address},#{qq},#{email})")
void insert(Contact contact);
ContactService代码
//添加联系人方法
public void addContact(Contact contact){
//1.获取SqlSession连接对象
SqlSession sqlSession = MybatisUtils.getSession();
//2.dao代理对象
IContactDao contactDao = sqlSession.getMapper(IContactDao.class);
//3.调用业务添加联系人
contactDao.insert(contact);
//4.释放连接
MybatisUtils.closeSession(sqlSession);
}
AddContactServlet代码
package com.itheima.web;
import com.itheima.entity.Contact;
import com.itheima.service.ContactService;
import org.apache.commons.beanutils.BeanUtils;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet(name = "AddContactServlet", urlPatterns = "/AddContactServlet")
public class AddContactServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
//实例业务类
private ContactService contactService = new ContactService();
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
//1.获取表单数据封装到Contact对象中
Contact contact = new Contact();
BeanUtils.populate(contact,request.getParameterMap());
//2.调用业务添加联系人方法
contactService.addContact(contact);
//3.添加成功,跳转请求联系人列表
response.sendRedirect(request.getContextPath()+"/ListContactServlet");
} catch (Exception e) {
e.printStackTrace();
//4.添加失败,提示添加失败,返回添加页面
response.getWriter().write("<script>alert('添加失败');history.back();</script>");
}
}
}