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>内容</a> --> 内容
text()：获取/设置元素的标签体纯文本内容 <a>内容</a> --> 内容
val()：获取/设置元素的value属性值

属性操作

通用属性操作
1. attr()：获取/设置元素的属性
2. removeAttr()：删除属性
3. prop()：获取/设置元素的属性
4. removeProp()：删除属性
- 注：attr和prop区别？
  1. 如果操作的是元素的固有属性，则建议使用prop
  2. 如果操作的是元素自定义的属性，则建议使用attr
对class属性操作
addClass()：添加class属性值
removeClass()：删除class属性值
toggleClass()：切换class属性
- toggleClass("one"):
  - 判断如果元素对象上存在class="one"，则将属性值one删除掉。如果元素对象上不存在class="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]])

参数：
1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)
2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
  - swing：动画执行时效果是先慢，中间快，最后又慢
    - linear：动画执行时速度是匀速的
3. 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)
1. 语法：
  
  jquery对象.each(function(index,element){});
  - index:就是元素在集合中的索引
  - element：就是集合中的每一个元素对象
  - this：集合中的每一个元素对象
2. 回调函数返回值：
  - 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>

抽奖

分析

给开始按钮绑定单击事件
1. 定义循环定时器
2. 切换小相框的src属性
  1. 定义数组，存放图片资源路径
  2. 生成随机数，数组索引
给结束按钮绑定单击事件
1. 停止计时器
2. 给大相框设置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数据是由键值对构成的
- 键用引号(单双都行)引起来，也可以不使用引号
- 值得取值类型：
  1. 数字（整数或浮点数）
  2. 字符串（在双引号中）
  3. 逻辑值（true 或 false）
  4. 数组（在方括号中） {"persons":[{},
  5. 对象（在花括号中） {"address":{"province"："陕西"....}}
  6. 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数据填充到字节输出流中
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数据格式使用。有两种解决方案：
1. $.get(type)：将最后一个参数type指定为"json"
2. 在服务器端设置MIME类型
```
 response.setContentType("application/json;charset=utf-8");
```
遇到的问题：
1. 报错：
  - 解决方案：
    - 参考：java.lang.NoClassDefFoundError: com/fasterxml/jackson/databind/ObjectMapper_baidu_37907497的博客-CSDN博客
    - 具体步骤：
2. 报错
  - 解决方案：
    - 参考：org.springframework.dao.EmptyResultDataAccessException: Incorrect result size: expected 1,actual 0 1_5yong的博客-CSDN博客
    - 具体步骤：
      try-catch一下EmptyResultDataAccessException异常

posted @ 2022-03-28 00:49 灰之魔女伊蕾娜阅读(94) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· JavaWeb笔记Day8------会话技术与JSP

· JavaWeb笔记Day4------JavaScript

· JQuery入门

· day22 --> (AJAX、JSON)

· day20 --> (JQuery基础)

阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了

公告

昵称：灰之魔女伊蕾娜
园龄： 3年3个月
粉丝： 7
关注： 21

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

阅读排行榜

评论排行榜

1. 慕课网秒杀系统项目笔记(1)

	<!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 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>

	//增强通过Jquery获取的对象的功能 $("#id")
	$.fn.extend(object)
	//增强JQeury对象自身的功能 $/jQuery
	$.extend(object)

	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);
	}
	}

	//定义方法
	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(url,[date],[callback],[type]);
	/**
	url：请求路径
	data：请求参数
	callback：回调函数
	type：响应结果的类型
	*/

	//定义方法
	function fun() {
	$.get("../ajaxServlet",{
	username:"张三",
	},function (data) {
	alert(data);
	}, "text");
	}

	$.post(url,[date],[callback],[type]);
	/**
	url：请求路径
	data：请求参数
	callback：回调函数
	type：响应结果的类型
	*/

	//定义方法
	function fun() {
	$.post("../ajaxServlet",{
	username:"张三",
	},function (data) {
	alert(data);
	}, "text");
	}

	//定义基本格式
	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},
	];

	//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]);
	}
	}

	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;
	}
	}

	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);
	}
	}

	@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;
	}
	}

	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);
	}
	}

道恒道也

JavaWeb笔记Day10------JQuery，AJAX和JSON

JQuery

概念

使用方法

JQuery对象和JS对象的区别与转换

选择器

概念

基本语法学习

代码

分类

基本选择器

层级选择器

属性选择器

过滤选择器

表单过滤选择器

DOM操作

内容操作

属性操作

CRUD操作:

案例

隔行换色

全选和全不选

QQ表情选择

左右移动

动画

三种方式显示和隐藏元素

默认显示和隐藏方式

滑动显示和隐藏方式

淡入淡出显示和隐藏方式

案例

遍历

js的遍历方式

jq的遍历方式

案例

事件绑定

jquery标准的绑定方式

on绑定事件/off解除绑定

事件切换：toggle

案例

案例2

广告显示和隐藏

需求

分析

实现

抽奖

分析

实现

插件

功能

实现方式

案例

AJAX

概念

异步和同步

作用

实现方式

原生JS实现方式

ajaxServlet

JS实现

JQuery实现方式

方法

JSON

概念

语法

基本规则

获取数据

JSON数据和Java对象的相互转换

JSON解析器：

JSON转为Java对象

Java对象转换JSON

步骤

转换方法

注解

复杂java对象转换

示例

Person

JacksonTest

案例

代码