JavaWeb笔记Day10------JQuery，AJAX和JSON
2022/3/28 9:22:47
本文主要是介绍JavaWeb笔记Day10------JQuery，AJAX和JSON，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
JQuery
概念
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使HTML文档遍历和操作，事件处理，动画和Ajax等功能变得更加简单，它具有易于使用的API，可跨多种浏览器运行。凭借多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。
使用方法
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
JQuery对象和JS对象的区别与转换
-
jQuery对象在操作时，更加方便
-
jQuery对象和js对象方法不通用的
-
两者相互转换
-
jq--->js：jq对象[索引] 或者 jq对象.get(索引)
-
js--->jq：$(js对象)
-
-
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> </head> <body> <div id="div1">div1...</div> <div id="div2">div2...</div> <script> //通过js方式来获取名称叫做div的所有html元素 let divs=document.getElementsByTagName("div"); //可以当做数组使用 alert(divs.length); //对divs中所有的div让其标签体内容变成aaa for (let i=0;i<divs.length;i++){ // divs[i].innerHTML="aaa"; $(divs[i]).html("ccc"); } //2.通过jQuery方式获取名称叫做div的所有HTML元素 let $divs = $("div"); //也可以当做数组使用 alert($divs.length); //对divs中所有的div让其标签体内容变成bbb // $divs.html("bbb"); $divs[0].innerHTML="ddd"; $divs.get(1).innerHTML="eee"; /** * 1. jQuery对象在操作时，更加方便 * 2. jQuery对象和js对象方法不通用的 * 3. 两者相互转换 * - jq--->js：jq对象[索引] 或者 jq对象.get(索引) * - js--->jq：$(js对象) */ </script> </body> </html>
选择器
概念
筛选具有相似特征的元素（标签）
基本语法学习
-
事件绑定
//给b1按钮添加单击事件 //1.获取b1按钮 $("#b1").click(function () { alert("aaa"); }); -
入口函数
-
样式控制
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
// window.onload=function () {
// $("#b1").click(function () {
// alert("aaa");
// });
// }
//jQuery入口函数(dom文档加载完成之后执行该函数中的代码)
$(function () {
$("#b1").click(function () {
alert("aaa");
});
});
$(function () {
// $("#div1").css("background-color","red");
$("#div1").css("backgroundColor","red");
})
/**
* window.onload和$(function)区别
* window.onload只能定义一次，如果定义多次，后边的会将前面的覆盖掉
* $(function)可以定义多次的
*/
</script>
</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
<input type="button" value="按钮" id="b1">
<script>
// //给b1按钮添加单击事件
// //1.获取b1按钮
// $("#b1").click(function () {
// alert("aaa");
// });
</script>
</body>
</html>
分类
基本选择器
-
标签选择器（元素选择器）
-
语法： $("html标签名")
获得所有匹配标签名称的元素
-
-
id选择器
-
语法：$("#id的属性值")
获得与指定id属性值匹配的元素
-
-
类选择器
-
语法：$(".class的属性值")
获得与指定的class属性值匹配的元素
-
-
并集选择器：
-
语法：$("选择器1,选择器2....")
获取多个选择器选中的所有元素
-
-
案例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>基本选择器</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="../js/jquery-3.3.1.min.js"></script> <style type="text/css"> div,span{ width: 180px; height: 180px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div .mini{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div .mini01{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } </style> <script type="text/javascript"> $(function () { // <input type="button" value="改变 id 为 one 的元素的背景色为 红色" id="b1"/> $("#b1").click(function () { $("#one").css("backgroundColor","pink"); }); // <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色" id="b2"/> $("#b2").click(function () { $("div").css("backgroundColor","pink"); }); // <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色" id="b3"/> $("#b3").click(function () { $(".mini").css("backgroundColor","pink"); }); // <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色" id="b4"/> $("#b4").click(function () { $("span,#two").css("backgroundColor","pink"); }); }); </script> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" /> <input type="button" value="改变 id 为 one 的元素的背景色为 红色" id="b1"/> <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色" id="b2"/> <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色" id="b3"/> <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色" id="b4"/> <h1>有一种奇迹叫坚持</h1> <h2>自信源于努力</h2> <div id="one"> id为one </div> <div id="two" class="mini" > id为two class是 mini <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini" >class是 mini</div> <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini01" >class是 mini01</div> <div class="mini" >class是 mini</div> </div> <span class="spanone">class为spanone的span元素</span> <span class="mini">class为mini的span元素</span> <input type="text" value="zhang" id="username" name="username"> </body> </html>
层级选择器
-
后代选择器
-
语法：$("A B ")
选择A元素内部的所有B元素
-
-
子选择器
-
语法：$("A > B")
选择A元素内部的所有B子元素
-
-
案例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>层次选择器</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="../js/jquery-3.3.1.min.js"></script> <style type="text/css"> div,span{ width: 180px; height: 180px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div .mini{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div .mini01{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } </style> <script type="text/javascript"> $(function () { // <input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色" id="b1"/> $("#b1").click(function () { $("body div").css("backgroundColor","pink"); }); // <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色" id="b2"/> $("#b2").click(function () { $("body > div").css("backgroundColor","pink"); }); }); </script> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" /> <input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色" id="b1"/> <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色" id="b2"/> <h1>有一种奇迹叫坚持</h1> <h2>自信源于努力</h2> <div id="one"> id为one </div> <div id="two" class="mini" > id为two class是 mini <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini" >class是 mini</div> <div class="mini" >class是 mini</div> </div> <div class="one"> class是 one <div class="mini01" >class是 mini01</div> <div class="mini" >class是 mini</div> </div> <span class="spanone"> span </span> </body> </html>
属性选择器
-
属性名称选择器
-
语法：$("A[属性名]")
包含指定属性的选择器
-
-
属性选择器
-
语法：$("A[属性名='值']")
包含指定属性等于指定值的选择器
-
-
复合属性选择器
-
语法：$("A[属性名='值'][]...")
包含多个属性条件的选择器
-
-
案例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>属性过滤选择器</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="../js/jquery-3.3.1.min.js"></script> <style type="text/css"> div,span{ width: 180px; height: 180px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div .mini{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div .mini01{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div.visible{ display:none; } </style> <script type="text/javascript"> $(function () { // <input type="button" value=" 含有属性title 的div元素背景色为红色" id="b1"/> $("#b1").click(function () { $("div[title]").css("backgroundColor","pink"); }); // <input type="button" value=" 属性title值等于test的div元素背景色为红色" id="b2"/> $("#b2").click(function () { $("div[title='test']").css("backgroundColor","pink"); }); // <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/> $("#b3").click(function () { $("div[title!='test']").css("backgroundColor","pink"); }); // <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色" id="b4"/> $("#b4").click(function () { $("div[title^='te']").css("backgroundColor","pink"); }); // <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色" id="b5"/> $("#b5").click(function () { $("div[title$='est']").css("backgroundColor","pink"); }); // <input type="button" value="属性title值 含有es的div元素背景色为红色" id="b6"/> $("#b6").click(function () { $("div[title*='es']").css("backgroundColor","pink"); }); // <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id="b7"/> $("#b7").click(function () { $("div[id][title*='es']").css("backgroundColor","pink"); }); }); </script> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" /> <input type="button" value=" 含有属性title 的div元素背景色为红色" id="b1"/> <input type="button" value=" 属性title值等于test的div元素背景色为红色" id="b2"/> <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/> <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色" id="b4"/> <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色" id="b5"/> <input type="button" value="属性title值 含有es的div元素背景色为红色" id="b6"/> <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id="b7"/> <div id="one"> id为one div </div> <div id="two" class="mini" title="test"> id为two class是 mini div title="test" <div class="mini" >class是 mini</div> </div> <div class="visible" > class是 one <div class="mini" >class是 mini</div> <div class="mini" >class是 mini</div> </div> <div class="one" title="test02"> class是 one title="test02" <div class="mini01" >class是 mini01</div> <div class="mini" style="margin-top:0px;">class是 mini</div> </div> <div class="visible" > 这是隐藏的 </div> <div class="one"> </div> <div id="mover" > 动画 </div> <input type="text" value="zhang" id="username" name="username"> </body> </html>
过滤选择器
-
首元素选择器
-
语法：:first
获得选择的元素中的第一个元素
-
-
尾元素选择器
-
语法：:last
获得选择的元素中的最后一个元素
-
-
非元素选择器
-
语法：:not(selector)
不包括指定内容的元素
-
-
偶数选择器
-
语法：:even
偶数，从 0 开始计数
-
-
奇数选择器
-
语法：:odd
奇数，从 0 开始计数
-
-
等于索引选择器
-
语法：:eq(index)
指定索引元素
-
-
大于索引选择器
-
语法：:gt(index)
大于指定索引元素
-
-
小于索引选择器
-
语法：:lt(index)
小于指定索引元素
-
-
标题选择器
-
语法：:header
获得标题（h1~h6）元素，固定写法
-
-
案例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>基本过滤选择器</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="../js/jquery-3.3.1.min.js"></script> <style type="text/css"> div,span{ width: 180px; height: 180px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div .mini{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div .mini01{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } </style> <script type="text/javascript"> $(function () { // <input type="button" value=" 改变第一个 div 元素的背景色为 红色" id="b1"/> $("#b1").click(function () { $("div:first").css("backgroundColor","pink"); }); // <input type="button" value=" 改变最后一个 div 元素的背景色为 红色" id="b2"/> $("#b2").click(function () { $("div:last").css("backgroundColor","pink"); }); // <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色" id="b3"/> $("#b3").click(function () { $("div:not(.one)").css("backgroundColor","pink"); }); // <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色" id="b4"/> $("#b4").click(function () { $("div:even").css("backgroundColor","pink"); }); // <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色" id="b5"/> $("#b5").click(function () { $("div:odd").css("backgroundColor","pink"); }); // <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色" id="b6"/> $("#b6").click(function () { $("div:gt(3)").css("backgroundColor","pink"); }); // <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色" id="b7"/> $("#b7").click(function () { $("div:eq(3)").css("backgroundColor","pink"); }); // <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色" id="b8"/> $("#b8").click(function () { $("div:lt(3)").css("backgroundColor","pink"); }); // <input type="button" value=" 改变所有的标题元素的背景色为 红色" id="b9"/> $("#b9").click(function () { $(":header").css("backgroundColor","pink"); }); }); </script> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" /> <input type="button" value=" 改变第一个 div 元素的背景色为 红色" id="b1"/> <input type="button" value=" 改变最后一个 div 元素的背景色为 红色" id="b2"/> <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色" id="b3"/> <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色" id="b4"/> <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色" id="b5"/> <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色" id="b6"/> <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色" id="b7"/> <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色" id="b8"/> <input type="button" value=" 改变所有的标题元素的背景色为 红色" id="b9"/> <h1>有一种奇迹叫坚持</h1> <h2>自信源于努力</h2> <div id="one"> id为one </div> <div id="two" class="mini" > id为two class是 mini <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini" >class是 mini</div> <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini01" >class是 mini01</div> <div class="mini" >class是 mini</div> </div> </body> </html>
表单过滤选择器
-
可用元素选择器
-
语法：:enabled
获得可用元素
-
-
不可用元素选择器
-
语法：:disabled
获得不可用元素
-
-
选中选择器
-
语法：:checked
获得单选/复选框选中的元素
-
-
选中选择器
-
语法：:selected
获得下拉框选中的元素
-
-
案例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>表单属性过滤选择器</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="../js/jquery-3.3.1.min.js"></script> <style type="text/css"> div,span{ width: 180px; height: 180px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div .mini{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div .mini01{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } #job{ margin: 20px; } #edu{ margin-top:-70px; } </style> <script type="text/javascript"> $(function () { // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/> $("#b1").click(function () { $("input[type='text']:enabled").val("aaa"); }); // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/> $("#b2").click(function () { $("input[type='text']:disabled").val("aaa"); }); // <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数" id="b3"/> $("#b3").click(function () { alert($("input[type='checkbox']:checked").length); }); // <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数" id="b4"/> $("#b4").click(function () { alert($("#job > option:selected").length); }); }); </script> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" /> <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/> <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/> <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数" id="b3"/> <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数" id="b4"/> <br><br> <input type="text" value="不可用值1" disabled="disabled"> <input type="text" value="可用值1" > <input type="text" value="不可用值2" disabled="disabled"> <input type="text" value="可用值2" > <br><br> <input type="checkbox" name="items" value="美容" >美容 <input type="checkbox" name="items" value="IT" >IT <input type="checkbox" name="items" value="金融" >金融 <input type="checkbox" name="items" value="管理" >管理 <br><br> <input type="radio" name="sex" value="男" >男 <input type="radio" name="sex" value="女" >女 <br><br> <select name="job" id="job" multiple="multiple" size=4> <option>程序员</option> <option>中级程序员</option> <option>高级程序员</option> <option>系统分析师</option> </select> <select name="edu" id="edu"> <option>本科</option> <option>博士</option> <option>硕士</option> <option>大专</option> </select> <br/> <div id="two" class="mini" > id为two class是 mini div <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini" >class是 mini</div> <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini01" >class是 mini01</div> <div class="mini" >class是 mini</div> </div> </body> </html>
DOM操作
内容操作
- html()：获取/设置元素的标签体内容 <a><font>内容</font></a> --> <font>内容</font>
- text()：获取/设置元素的标签体纯文本内容 <a><font>内容</font></a> --> 内容
- val()：获取/设置元素的value属性值
属性操作
-
通用属性操作
- attr()：获取/设置元素的属性
- removeAttr()：删除属性
- prop()：获取/设置元素的属性
- removeProp()：删除属性
- 注：attr和prop区别？
- 如果操作的是元素的固有属性，则建议使用prop
- 如果操作的是元素自定义的属性，则建议使用attr
-
对class属性操作
-
addClass()：添加class属性值
-
removeClass()：删除class属性值
-
toggleClass()：切换class属性
- toggleClass("one"):
- 判断如果元素对象上存在class="one"，则将属性值one删除掉。 如果元素对象上不存在class="one"，则添加
- toggleClass("one"):
-
css()：
CRUD操作:
- append()：父元素将子元素追加到末尾
- 对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾
- prepend()：父元素将子元素追加到开头
- 对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头
- appendTo()：
- 对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾
- prependTo()：
- 对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头
- after()：添加元素到元素后边
- 对象1.after(对象2)： 将对象2添加到对象1后边。对象1和对象2是兄弟关系
- before()：添加元素到元素前边
- 对象1.before(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系
- insertAfter()
- 对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
- insertBefore()
- 对象1.insertBefore(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系
- remove()：移除元素
- 对象.remove():将对象删除掉
- empty()：清空元素的所有后代元素。
- 对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点
案例
隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
//需求：将数据行的奇数行背景色设置为 pink，偶数行背景色设置为 yellow
$(function (){
//1. 获取数据行的奇数行的tr，设置背景色为pink
$("tr:gt(1):odd").css("backgroundColor","pink");
//2. 获取数据行的偶数行的tr，设置背景色为yellow
$("tr:gt(1):even").css("backgroundColor","yellow");
});
</script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center" >
<tr>
<td colspan="5"><input type="button" value="删除"></td>
</tr>
<tr style="background-color: #999999;">
<th><input type="checkbox"></th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
</html>
全选和全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
//分析:需要保证下边的选中状态和第一个复选框的选中状态一致即可
function selectAll(obj){
//获取下边的复选框
$(".itemSelect").prop("checked",obj.checked);
}
</script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center" >
<tr>
<td colspan="5"><input type="button" value="删除"></td>
</tr>
<tr>
<th><input type="checkbox" onclick="selectAll(this)" ></th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
</html>
QQ表情选择
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>QQ表情选择</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
.emoji{margin:50px;}
ul{overflow: hidden;}
li{float: left;width: 48px;height: 48px;cursor: pointer;}
.emoji img{ cursor: pointer; }
</style>
<script>
//需求：点击qq表情，将其追加到发言框中
$(function () {
//1. 给img图片添加onclick事件
$("ul img").click(function () {
//2. 追加到p标签中即可
$(".word").append($(this).clone());
});
});
</script>
</head>
<body>
<div class="emoji">
<ul>
<li><img src="img/01.gif" height="22" width="22" alt="" /></li>
<li><img src="img/02.gif" height="22" width="22" alt="" /></li>
<li><img src="img/03.gif" height="22" width="22" alt="" /></li>
<li><img src="img/04.gif" height="22" width="22" alt="" /></li>
<li><img src="img/05.gif" height="22" width="22" alt="" /></li>
<li><img src="img/06.gif" height="22" width="22" alt="" /></li>
<li><img src="img/07.gif" height="22" width="22" alt="" /></li>
<li><img src="img/08.gif" height="22" width="22" alt="" /></li>
<li><img src="img/09.gif" height="22" width="22" alt="" /></li>
<li><img src="img/10.gif" height="22" width="22" alt="" /></li>
<li><img src="img/11.gif" height="22" width="22" alt="" /></li>
<li><img src="img/12.gif" height="22" width="22" alt="" /></li>
</ul>
<p class="word">
<strong>请发言：</strong>
<img src="img/12.gif" height="22" width="22" alt="" />
</p>
</div>
</body>
</html>
左右移动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<style>
#leftName , #btn,#rightName{
float: left;
width: 100px;
height: 300px;
}
#toRight,#toLeft{
margin-top:100px ;
margin-left:30px;
width: 50px;
}
.border{
height: 500px;
padding: 100px;
}
</style>
<script>
//需求：实现下拉列表选择条目左右选择功能
$(function () {
//toRight
$("#toRight").click(function () {
//获取右边的下拉列表对象,append(左边下拉列表选中的option)
$("#rightName").append($("#leftName>option:selected"));
});
//toLeft
$("#toLeft").click(function () {
//appendTo 获取右边选中的option,将其移动到左边下拉列表中
$("#rightName>option:selected").appendTo($("#leftName"));
});
});
</script>
</head>
<body>
<div class="border">
<select id="leftName" multiple="multiple">
<option>张三</option>
<option>李四</option>
<option>王五</option>
<option>赵六</option>
</select>
<div id="btn">
<input type="button" id="toRight" value="-->"><br>
<input type="button" id="toLeft" value="<--">
</div>
<select id="rightName" multiple="multiple">
<option>钱七</option>
</select>
</div>
</body>
</html>
动画
三种方式显示和隐藏元素
默认显示和隐藏方式
-
show([speed,[easing],[fn]])
参数：
-
speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)
-
easing：用来指定切换效果，默认是"swing"，可用参数"linear"
-
swing：动画执行时效果是 先慢，中间快，最后又慢
- linear：动画执行时速度是匀速的
-
-
fn：在动画完成时执行的函数，每个元素执行一次。
-
-
hide([speed,[easing],[fn]])
-
toggle([speed],[easing],[fn])
滑动显示和隐藏方式
- slideDown([speed],[easing],[fn])
- slideUp([speed,[easing],[fn]])
- slideToggle([speed],[easing],[fn])
淡入淡出显示和隐藏方式
- fadeIn([speed],[easing],[fn])
- fadeOut([speed],[easing],[fn])
- fadeToggle([speed,[easing],[fn]])
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
//切换显示和隐藏---淡入淡出
function toggleFn() {
$("#showDiv").fadeToggle("slow","swing",function () {
alert("切换了");
});
}
//默认显示div
function showFn() {
$("#showDiv").show("normal","swing",function (){
alert("显示了");
});
}
//滑动隐藏div--5s
function hideFn() {
$("#showDiv").slideUp(5000);
}
</script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
<div id="showDiv" style="width:300px;height:300px;background:pink">
div显示和隐藏
</div>
</body>
</html>
遍历
js的遍历方式
for(初始化值;循环结束条件;步长)
jq的遍历方式
-
jq对象.each(callback)
-
语法：
jquery对象.each(function(index,element){});
-
index:就是元素在集合中的索引
-
element：就是集合中的每一个元素对象
-
this：集合中的每一个元素对象
-
-
回调函数返回值：
- true:如果当前function返回为false，则结束循环(break)。
- false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
-
-
$.each(object, [callback])
-
for..of: jquery 3.0 版本之后提供的方式
for(元素对象 of 容器对象)
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function () {
let cities=$("#city li");
// for (let i=0;i<cities.length;i++){
// alert(cities[i].innerHTML);
// }
// cities.each(function (index,element) {
// //1. 获取li第一种方式 this
// // alert(this.innerHTML);
// //2. 方式2: 在回调函数中定义参数 index(索引) element(元素对象)
// if ("上海"==$(element).html()){
// //如果当前function返回为false，结束循环。（break）
// // 返回为true，继续下次循环 （continue）
// return true;
// }
// alert(index+":"+$(element).html());
// });
// $.each(cities,function () {
// alert(this.innerHTML);
// });
//jquery3.x
for (li of cities){
alert(li.innerHTML);
}
});
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
事件绑定
jquery标准的绑定方式
jq对象.事件方法(回调函数)；
- 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
- 表单对象.submit();//让表单提交
on绑定事件/off解除绑定
- jq对象.on("事件名称",回调函数)
- jq对象.off("事件名称")
- 如果off方法不传递任何参数，则将组件上的所有事件全部解绑
事件切换：toggle
jq对象.toggle(fn1,fn2...)
- 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....
注意：1.9版本 .toggle() 方法删除，jQuery Migrate（迁移）插件可以恢复此功能。
-
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript">
$(function () {
// //获取name对象，绑定click事件
// $("#name").click(function (){
// alert("我被点击了");
// });
//
// //给name绑定鼠标移动到元素之上事件。绑定鼠标移出事件
// $("#name").mouseover(function () {
// alert("鼠标来了");
// });
//
// $("#name").mouseout(function () {
// alert("鼠标走了");
// });
// //简化操作，链式编程
// $("#name").click(function () {
// alert("我被点击了");
// }).mouseover(function () {
// alert("鼠标来了");
// }).mouseout(function () {
// alert("鼠标走了");
// });
// alert("555");
// //让文本输入框获得焦点
// $("#name").focus();
//表单对象.submit();//让表单提交
//1.使用on给按钮绑定单击事件 click
$("#btn").on("click",function () {
alert("点击");
});
//2. 使用off解除btn按钮的单击事件
$("#btn2").click(function () {
// $("#btn").off("click");
$("#btn").off();//将组件上的所有事件全部解绑
});
//获取按钮,调用toggle方法
$("#btn3").toggle(function () {
//改变div背景色backgroundColor 颜色为 green
$("#myDiv").css("backgroundColor","green");
},function () {
//改变div背景色backgroundColor 颜色为 pink
$("#myDiv").css("backgroundColor","pink");
});
});
</script>
</head>
<body>
<input id="name" type="text" value="绑定点击事件">
<input id="btn" type="button" value="使用on绑定点击事件">
<input id="btn2" type="button" value="使用off解绑点击事件">
<input id="btn3" type="button" value="事件切换">
<div id="myDiv" style="width:300px;height:300px;background:pink">
点击按钮变成绿色，再次点击红色
</div>
</body>
</html>
案例2
广告显示和隐藏
需求
-
当页面加载完，3s后。自动显示广告
-
广告显示5s后，自动消失
分析
- 使用定时器来完成。setTimeout（执行一次定时器）
- 分析发现jQuery的显示和隐藏动画效果其实就是控制display
- 使用 show/hide方法来完成广告的显示
实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>广告的自动显示与隐藏</title>
<style>
#content{width:100%;height:500px;background:#999}
</style>
<!--引入jquery-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
//入口函数，在页面加载完成之后，定义定时器，调用这两个方法
$(function () {
//定义定时器,调用这俩个方法
setTimeout(adShow,3000);
//第一个方法等待了3s，显示5s，所以广告消失时间是3s+5s=8s
setTimeout(adHide,8000);
});
//显示广告
function adShow() {
$("#ad").show("slow");
}
//隐藏广告
function adHide(){
$("#ad").hide("slow");
}
</script>
</head>
<body>
<!-- 整体的DIV -->
<div>
<!-- 广告DIV -->
<div id="ad" style="display: none;">
<img style="width:100%" src="../img/adv.jpg" />
</div>
<!-- 下方正文部分 -->
<div id="content">
正文部分
</div>
</div>
</body>
</html>
抽奖
分析
- 给开始按钮绑定单击事件
- 定义循环定时器
- 切换小相框的src属性
- 定义数组，存放图片资源路径
- 生成随机数，数组索引
- 给结束按钮绑定单击事件
- 停止计时器
- 给大相框设置src属性
实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery案例之抽奖</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
let imgs = [
"../img/man00.jpg",
"../img/man01.jpg",
"../img/man02.jpg",
"../img/man03.jpg",
"../img/man04.jpg",
"../img/man05.jpg",
"../img/man06.jpg"
];
let startId,index;
$(function () {
//开始按钮
$("#startID").click(function () {
//1.1 定义循环定时器 20ms执行一次
startId = setInterval(function () {
//1.2生成随机角标0-6
index = Math.floor(Math.random() * 7);
//处理按钮是否可用
$("#startID").prop("disabled",true);
$("#stopID").prop("disabled",false);
//1.3设置小相框的src属性
$("#img1ID").prop("src", imgs[index]);
}, 20);
});
//结束按钮
$("#stopID").click(function () {
//停止计时器
clearInterval(startId);
//处理按钮是否可用
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
//给大相框设置src属性
$("#img2ID").prop("src",imgs[index]);
});
});
</script>
</head>
<body>
<!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px">
<img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>
</div>
<!-- 大像框 -->
<div
style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
<img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/>
</div>
<!-- 开始按钮 -->
<input
id="startID"
type="button"
value="点击开始"
style="width:150px;height:150px;font-size:22px"
onclick="imgStart()">
<!-- 停止按钮 -->
<input
id="stopID"
type="button"
value="点击停止"
style="width:150px;height:150px;font-size:22px"
onclick="imgStop()">
</body>
</html>
插件
功能
增强JQuery的功能
实现方式
//增强通过Jquery获取的对象的功能 $("#id")
$.fn.extend(object)
//增强JQeury对象自身的功能 $/jQuery
$.extend(object)
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-jQuery对象进行方法扩展</title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<!--
<script type="text/javascript">
//使用jquery插件 给jq对象添加2个方法 check()选中所有复选框，uncheck()取消选中所有复选框
//1.定义jqeury的对象插件
$.fn.extend({
//定义了一个check()方法。所有的jq对象都可以调用该方法
check:function () {
//让复选框选中
//this:调用该方法的jq对象
this.prop("checked",true);
},
uncheck:function () {
//让复选框不选中
this.prop("checked",false);
}
});
$(function () {
// 获取按钮
//$("#btn-check").check();
//复选框对象.check();
$("#btn-check").click(function () {
//获取复选框对象
$("input[type='checkbox']").check();
});
$("#btn-uncheck").click(function () {
//获取复选框对象
$("input[type='checkbox']").uncheck();
});
});
</script>
-->
<script type="text/javascript">
//对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值
$.extend({
max:function (a,b) {
//返回两数中的较大值
return a >= b ? a:b;
},
min:function (a,b) {
//返回两数中的较小值
return a <= b ? a:b;
}
});
//调用全局方法
var max = $.max(4,3);
//alert(max);
var min = $.min(1,2);
alert(min);
</script>
</head>
<body>
<input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
<input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
<br/>
<input type="checkbox" value="football">足球
<input type="checkbox" value="basketball">篮球
<input type="checkbox" value="volleyball">排球
</body>
</html>
AJAX
概念
- Asynchronous Javascript And XML，异步的JavaScript和XML
- Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
异步和同步
客户端和服务器端相互通信的基础上
-
异步：客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
-
同步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。
作用
提升用户的体验
实现方式
原生JS实现方式
ajaxServlet
package learn;
import jakarta.servlet.*;
import jakarta.servlet.http.*;
import jakarta.servlet.annotation.*;
import java.io.IOException;
@WebServlet(name = "ajaxServlet", value = "/ajaxServlet")
public class ajaxServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 获取请求参数
String username = request.getParameter("username");
//处理业务逻辑
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
//2. 打印username
System.out.println(username);
//3. 响应
response.getWriter().write("success"+username);
}
}
JS实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
//定义方法
function fun() {
//发送异步请求
//1. 创建核心对象
let xmlHttp;
if (window.XMLHttpRequest){
//高版本浏览器
xmlHttp=new XMLHttpRequest();
}
else {
//低版本浏览器IE6，IE5
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2. 建立连接
/**
* 参数:
* 1. 请求方式: GET，POST
* - get方式: 请求参数在URL后边拼接。send方法为空参
* - post方式，请求参数在send方法中定义
* 2. 请求的URL:
* 3.同步或者异步请求: true(异步) 或者 false(同步)
*/
xmlHttp.open("GET","../ajaxServlet?username=tom",true);
//3.发送请求
xmlHttp.send();
//4. 接收并处理来自服务器响应的结果
//获取方式:xmlHttp.responseText
//什么时候获取: 当服务器响应成功后再获取
//当xmlHttp对象的就绪状态改变时，就会触发onreadystatechange事件
xmlHttp.onreadystatechange=function () {
//判断就绪状态是否为4，判断status响应状态码是否为200
if (xmlHttp.readyState==4 && xmlHttp.status==200){
//获取响应的结果
let result=xmlHttp.responseText;
//将结果显示在页面上
//document.getElementById("result").innerHTML=result;
alert(result);
}
}
}
</script>
<body>
<input type="button" onclick="fun()" value="发送异步请求">
<input type="text" name="" id="">
</body>
</html>
JQuery实现方式
方法
-
$.ajax()
-
语法：
$.ajax({键值对}); -
示例：
//定义方法 function fun() { //使用$.ajax()发送异步请求 $.ajax({ url: "../ajaxServlet",//请求路径 type: "POST",//请求方式 // data:"username=zhangsan&age=24",//请求参数 data:{ "username":"zhangsan", "age":24 }, success:function (data) { alert(data); },//响应成功后的回调函数 error:function () { alert("请求失败"); },//表示请求响应出现错误后,执行的回调函数 dateType:"json",//设置接收到的响应数据的格式 }); }
-
-
$.get()：发送get请求
-
语法：
$.get(url,[date],[callback],[type]); /** url：请求路径 data：请求参数 callback：回调函数 type：响应结果的类型 */
-
示例：
//定义方法 function fun() { $.get("../ajaxServlet",{ username:"张三", },function (data) { alert(data); }, "text"); }
-
-
$.post：发送post请求
-
语法
$.post(url,[date],[callback],[type]); /** url：请求路径 data：请求参数 callback：回调函数 type：响应结果的类型 */
-
示例
//定义方法 function fun() { $.post("../ajaxServlet",{ username:"张三", },function (data) { alert(data); }, "text"); }
-
JSON
概念
-
JavaScript Object Notation（JavaScript对象表示法）
let p={"name":"zhangsan","age":23,"gender":"男"}; -
JSON现在多用于存储和交换文本信息的语法
-
进行数据的传输
-
JSON比xml更小，更快，更易解析
语法
基本规则
- 数据在名称/值对中：JSON数据是由键值对构成的
- 键用引号(单双都行)引起来，也可以不使用引号
- 值得取值类型：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true 或 false）
- 数组（在方括号中） {"persons":[{},{}]}
- 对象（在花括号中） {"address":{"province"："陕西"....}}
- null
- 数据由逗号分隔：多个键值对由逗号分隔
- 花括号保存对象：使用{ }定义JSON格式
- 方括号保存数组：[ ]
示例
//定义基本格式
let person ={"name":"张三",age:20,'gender':true};
//嵌套格式 {}---->[]
let persons ={
"persons":[
{"name":"张三",age:20,'gender':true},
{"name":"张三",age:20,'gender':true},
{"name":"张三",age:20,'gender':false},
]
};
//嵌套格式 []--->{}
let ps=[
{"name":"张三",age:20,'gender':true},
{"name":"张三",age:20,'gender':true},
{"name":"张三",age:20,'gender':false},
];
获取数据
-
json对象.键名
-
json对象["键名"]
-
数组对象[索引]
-
遍历
//1.定义基本格式 var person = {"name": "张三", age: 23, 'gender': true}; var ps = [{"name": "张三", "age": 23, "gender": true}, {"name": "李四", "age": 24, "gender": true}, {"name": "王五", "age": 25, "gender": false}]; //获取person对象中所有的键和值 //for in 循环 /* for(var key in person){ //这样的方式获取不行。因为相当于 person."name" //alert(key + ":" + person.key); alert(key+":"+person[key]); }*/ //获取ps中的所有值 for (var i = 0; i < ps.length; i++) { var p = ps[i]; for(var key in p){ alert(key+":"+p[key]); } }
JSON数据和Java对象的相互转换
JSON解析器：
常见的解析器：Jsonlib，Gson，fastjson，jackson
JSON转为Java对象
-
导入jackson的相关jar包
Maven Repository: com.fasterxml.jackson.core » jackson-databind » 2.13.2.1 (mvnrepository.com)
-
创建Jackson核心对象 ObjectMapper
-
调用ObjectMapper的相关方法进行转换
readValue(json字符串数据,Class)
Java对象转换JSON
步骤
- 导入jackson的相关jar包
- 创建Jackson核心对象 ObjectMapper
- 调用ObjectMapper的相关方法进行转换
转换方法
-
writeValue(参数1，obj):
- 参数1：
- File：将obj对象转换为JSON字符串，并保存到指定的文件中
- Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
- OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
- 参数1：
-
writeValueAsString(obj):将对象转为json字符串
注解
-
@JsonIgnore：排除属性。
-
@JsonFormat：属性值得格式化
@JsonFormat(pattern = "yyyy-MM-dd")
复杂java对象转换
- List：数组
- Map：对象格式一致
示例
Person
package domain;
import com.fasterxml.jackson.annotation.JsonFormat;
import com.fasterxml.jackson.annotation.JsonIgnore;
import java.util.Date;
public class Person {
private String name;
private int age;
private String gender;
// @JsonIgnore//忽略该属性
@JsonFormat(pattern = "yyyy-MM-dd")
private Date birthday;
@Override
public String toString() {
return "Person{" +
"name='" + name + '\'' +
", age=" + age +
", gender='" + gender + '\'' +
", birthday=" + birthday +
'}';
}
public Date getBirthday() {
return birthday;
}
public void setBirthday(Date birthday) {
this.birthday = birthday;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
}
JacksonTest
package test;
import com.fasterxml.jackson.annotation.JsonIgnore;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import domain.Person;
import org.junit.jupiter.api.Test;
import java.io.File;
import java.io.FileWriter;
import java.io.IOException;
import java.util.*;
public class JacksonTest {
//Java对象转为JSON字符串
@Test
public void test1() throws IOException {
//创建Person对象
Person p=new Person();
p.setName("张三");
p.setAge(20);
p.setGender("男");
//创建Jackson的核心对象 ObjectMapper
ObjectMapper mapper=new ObjectMapper();
//转换
/**
* 转换方法:
* WriteValue(参数1,obj)
* 参数1:
* File：将obj对象转换为JSON字符串，并保存到指定的文件中
* Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
* OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
* WriteValueAsString(obj):将对象转换为JSON字符串
*/
String json=mapper.writeValueAsString(p);
//Output:{"name":"张三","age":20,"gender":"男"}
System.out.println(json);
//writeValue,将数据写到a.txt文件中
// mapper.writeValue(new File("src/test/resources/a.txt"),p);
//writeValue,将数据关联到Writer中
mapper.writeValue(new FileWriter("src/test/resources/b.txt"),p);
}
@Test
public void test2() throws IOException {
//创建Person对象
Person p=new Person();
p.setName("张三");
p.setAge(20);
p.setGender("男");
p.setBirthday(new Date());
//2.转换
ObjectMapper mapper=new ObjectMapper();
String json=mapper.writeValueAsString(p);
System.out.println(json);
}
@Test
public void test3() throws IOException {
//创建Person对象
Person p = new Person();
p.setName("张三");
p.setAge(20);
p.setGender("男");
p.setBirthday(new Date());
Person p1 = new Person();
p1.setName("张三");
p1.setAge(20);
p1.setGender("男");
p1.setBirthday(new Date());
Person p2 = new Person();
p2.setName("张三");
p2.setAge(20);
p2.setGender("男");
p2.setBirthday(new Date());
//创建List集合
List<Person> ps=new ArrayList<Person>();
ps.add(p);
ps.add(p1);
ps.add(p2);
//2.转换
ObjectMapper mapper=new ObjectMapper();
String json=mapper.writeValueAsString(ps);
//Output:[{"name":"张三","age":20,"gender":"男","birthday":"2022-03-27"},{"name":"张三","age":20,"gender":"男","birthday":"2022-03-27"},{"name":"张三","age":20,"gender":"男","birthday":"2022-03-27"}]
System.out.println(json);
}
@Test
public void test4() throws IOException {
//创建Person对象
Map<String,Object> map=new HashMap<String,Object>();
map.put("name","张三");
map.put("age",20);
map.put("gender","男");
//2.转换
ObjectMapper mapper=new ObjectMapper();
String json=mapper.writeValueAsString(map);
//Output:{"gender":"男","name":"张三","age":20}
System.out.println(json);
}
/**
* 演示JSON字符串转为Java对象
* @throws Exception
*/
@Test
public void test5() throws Exception{
//初始化JSON对象
String json="{\"gender\":\"男\",\"name\":\"张三\",\"age\":20};";
//创建Jackson的核心对象 ObjectMapper
ObjectMapper mapper=new ObjectMapper();
//转换为Java对象 Person对象
Person p=mapper.readValue(json,Person.class);
System.out.println(p);
}
}
案例
校验用户名是否存在
代码
UserDaoImpl
@Override
public Login findUserByName(String name) {
String sql="SELECT * FROM login WHERE username = ?";
try {
Login login=template.queryForObject(sql,new BeanPropertyRowMapper<Login>(Login.class),name);
return login;
} catch (EmptyResultDataAccessException e) {
return null;
}
}
test_findUserServlet
package web.servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
import domain.Login;
import jakarta.servlet.*;
import jakarta.servlet.http.*;
import jakarta.servlet.annotation.*;
import service.UserService;
import service.impl.UserServiceImpl;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
@WebServlet(name = "test_findUserServlet", value = "/test_findUserServlet")
public class test_findUserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 获取用户名
String username= request.getParameter("username");
//2. 调用service层的方法判断用户名是否存在
UserService service = new UserServiceImpl();
Login login = service.findUserByName(username);
//3. 判断用户名是否存在
//期望服务器响应回的数据格式: {"userExsit":true,"msg":"此用户名太受欢迎，请更换一个"}
// {"userExsit":false,"msg":"此用户名可以使用}
//设置响应的数据格式为json
response.setContentType("application/json;charset=utf-8");
Map<String, Object>map=new HashMap<String, Object>();
if(login!=null){
//存在
map.put("userExsit",true);
map.put("msg","此用户名太受欢迎，请更换一个");
}else if(username!=null&&!"".equals(username)){
//不存在
map.put("userExsit",false);
map.put("msg","此用户名可以使用");
}else{
map.put("userExsit",true);
map.put("msg","用户名不能为空");
}
//4. 将map对象转换为json字符串,并且传递给客户端浏览器
//将map转为json字符串
ObjectMapper mapper = new ObjectMapper();
//并且传递给客户端浏览器
mapper.writeValue(response.getWriter(),map);
}
}
regist.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
//在页面加载完成后执行
$(function () {
//给username绑定blur事件
$("#username").blur(function () {
//获取username文本输入框的值
let username = $(this).val();
//发送ajax请求
//期望服务器响应回的数据格式: {"userExsit":true,"msg":"此用户名太受欢迎，请更换一个"}
// {"userExsit":false,"msg":"此用户名可以使用}
$.get("test_findUserServlet",{username:username},function (date) {
//判断userExsit键的值是否为true
let span = $("#s_username");
if (date.userExsit){
//用户名存在
span.css("color","red");
span.html(date.msg);
}else{
//用户名不存在
span.css("color","green");
span.html(date.msg);
}
}, );
});
});
</script>
</head>
<body>
<form action="">
<input type="text" name="username" id="username" placeholder="请输入用户名">
<span id="s_username" class=""></span>
<br>
<input type="password" name="password" id="password" placeholder="请输入密码">
<input type="submit" value="注册">
</form>
</body>
</html>
注：
-
服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：
- $.get(type)：将最后一个参数type指定为"json"
- 在服务器端设置MIME类型
response.setContentType("application/json;charset=utf-8"); -
遇到的问题：
- 报错：
- 解决方案：
- 参考：java.lang.NoClassDefFoundError: com/fasterxml/jackson/databind/ObjectMapper_baidu_37907497的博客-CSDN博客
- 具体步骤：
- 解决方案：
- 报错
- 解决方案：
- 参考：org.springframework.dao.EmptyResultDataAccessException: Incorrect result size: expected 1,actual 0 1_5yong的博客-CSDN博客
- 具体步骤：
try-catch一下EmptyResultDataAccessException异常
- 解决方案：
- 报错：
这篇关于JavaWeb笔记Day10------JQuery，AJAX和JSON的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-12-22项目：远程温湿度检测系统
- 2024-12-21《鸿蒙HarmonyOS应用开发从入门到精通（第2版）》简介
- 2024-12-21后台管理系统开发教程：新手入门全指南
- 2024-12-21后台开发教程：新手入门及实战指南
- 2024-12-21后台综合解决方案教程：新手入门指南
- 2024-12-21接口模块封装教程：新手必备指南
- 2024-12-21请求动作封装教程：新手必看指南
- 2024-12-21RBAC的权限教程：从入门到实践
- 2024-12-21登录鉴权实战：新手入门教程
- 2024-12-21动态权限实战入门指南
