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

本文主要是介绍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异常

这篇关于JavaWeb笔记Day10------JQuery，AJAX和JSON的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！