javaWeb-3 jQuery、Ajax

最新推荐文章于 2021-05-20 21:42:25 发布

Toroidals

最新推荐文章于 2021-05-20 21:42:25 发布

阅读量642

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/QYmufeng/article/details/103626723

版权

JavaWeb 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jQuery
jQuery概述

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

我们使用jquery可以更好完成以下操作

html文档操作，对于dom相关操作优化
jquery提供更加方便与丰富事件处理
jquery提供简单动画特效
jquery提供ajax交互

我们知道，要使用任何一个js框架，都是需要导入相关的js文件。

关于其它常用js框架:

dojo 面向对象的js框架
extjs 学习成本比较高它提供大量的丰富组件，它效果展示非常好
prototype 早期比较流行js框架
angularJS 它是一个mvc js框架，它提供双向数据绑定。。

jquery它的插件机制特别丰富,在开发中可以选择非常多的相关插件，例如，表单校验插件，树型结构。。。

jQuery快速入门

jquery最新版本3.1.1 我们学习的版本1.8.3

对于jquery它从jquery2.x以后对浏览器支持不是特别好。

在pc端开发使用比较主流的是1.x版本.

对于开发中，我们需要导入的是min.js文件，在学习阶段我们导入 jquery-1.8.3.js.

jQuery核心函数
jQuery(callback)

jQuery(callback)它是$(document).ready()的简写。

$(document).ready(function(){});页面加载完成后，指定的函数执行

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
//页面加载 完成后，加载函数
//window.onload = function(){
//	alert("hello html1")
//}
//window.onload = function(){
//	alert("hello html2")
//}
	//最完整的写法
	jQuery(document).ready(function(){
		alert("hello jquery1");
	});
	
	//简写1
	$(document).ready(function(){
		alert("hello jquery2");
	});
	
	//简写2
	jQuery(function(){
		alert("hello jquery3");
	})
	
	//简写3
	$(function(){
		alert("hello jquery4");
	})
</script>
</head>
<body>

</body>
</html>

jQuery(html,[ownerDocument])

jQuery(html代码)它的作用是将一个dom对象包装成jquery对象。

这个核心函数的作用是将一个dom对象包装成了jquery对象,而它的第一个参数是html代码.它的第二个参数是可选，它用于设置dom的相关属性.

html,[ownerDocument]String,DocumentV1.0

html:用于动态创建DOM元素的HTML标记字符串

ownerDocument:创建DOM元素所在的文档

$("<div><p>Hello</p></div>").appendTo("body");

$("<div>", {
  "class": "test",
  text: "Click me!",
  click: function(){
    $(this).toggleClass("test");
  }
}).appendTo("body");

jQuery([selector,[context]])

这个函数我们使用它的主要作用是用于在页面上查找，根据css选择器.

参数1就css选择器 jquery中提供了九种选择器

参数2 context 就是指定要查找的dom集.

selector,[context]String,Element,/jQueryV1.0

selector:用来查找的字符串

context:作为待查找的 DOM 元素集、文档或 jQuery 对象。

找到所有 p 元素，并且这些元素都必须是 div 元素的子元素。jQuery 代码:

$("div > p");

设置页面背景色。jQuery 代码:

$(document.body).css( "background", "black" );

关于jquery对象与dom对象转换

对于dom对象-----àjquery对象 $(dom)

对于jquery对象----àdom对象 jquery对象[0] 或 jquery.get(0)

jQuery选择器(重要)
基本选择器

#id 根据 id属性查找一个元素
Element 根据元素的标签名称查找元素
.class 根据元素的class属性查找元素
*匹配所有元素
Select1,selector2…将每一个选择器匹配到元素合并后一起返回
html ()方法，无参数代表获取元素中的html代码，如果有参数代表设置元素的html信息
text()方法，无参数代表获取元素中的文本信息，如果有参数代表设置元素的文本信息
each()方法，它的使用可以帮助我们遍历元素，可以传递一个函数 each(function(n)),n就代表的是每一个元素的序号，在函数中可以通过this来获取其dom对象
index()方法，它可以判断元素的序号

得到id=d1的元素中的内容显示出
将class=d元素中的内容后面添加欢迎你
得到id=d1这个div在整个页面上是第几个.
得到class=d的元素有几个
将所有的class=d或id=d1元素中的内容设置为java

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<script type="text/javascript">
$(function(){
	//1.得到id=d1的元素中的内容显示出
	var content01 = $("#d1").html();  //html方法得到div的id=d1元素中的所有html
	//alert(content01);
	var content02 = $("#d1").text();  //text方法得到div的id=d1元素中的所有文本
	//alert(content02);
	
	//2.将class=d元素中的内容后面添加欢迎你
	$(".d").each(function(i) {
		//alert(i);
		//this它是一个dom对象，我们要调用jquery的方法，应该将其转换为jquery对象
		+$(this).html($(this).html() + " 欢迎你");
	});

	//3.得到id=d1这个div在整个页面上是第几个.
	//3.1得到所有的div
	var alldiv = $("div");
	//3.2得到id=d1这个div
	var index = alldiv.index($("#d1"))//判断id=d1元素在所有div中的索引值，从0开始
	//alert(index);

	//4.得到class=d的元素有几个
	var allElementsD  = $(".d");
	var size = allElementsD.size();
	//var size=$(".d").size();
	//alert(size);

	//5.将所有的class=d或id=d1元素中的内容设置为java
	$(".d,#d1").html("java");

});

</script>
</head>
<body>
	<div class="d">itcast</div>
	<div class="d">itheima</div>
	<div id="d1">
		<a class="d">itcast</a>
	</div>
	<div>itheima</div>
	<div>itheima</div>
</body>
</html>

层级选择器

层级选择器是根据元素的关系来获取。关系是指父子关系，兄弟关系

空格得到元素下的所有子元素(包含直接子元素与间接子元素)
大于号> 只获取直接的子元素
加号+ 只获取直接的一个兄弟元素
波浪线~ 所有的后边的兄弟元素

css()方法

css()方法，它可以设置元素的样式,如果只有一个值 css(name,value),如果有多个值,css({name:value,name:value})

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<script type="text/javascript">
$(function(){
		//1.获取id=d的所有<a>子元素
		var size = $("#d a").size();

		//2.获取id=d 的直接<a>子元素
		var size = $("#d > a").size();
		
		//3.获取id=d第一个<p>兄弟元素
		//alert($("#d + p").html());
		
		//4.获取id=d的所有<p>兄弟元素
		var size = $("#d ~ p").size();
		//alert(size);
		
		//5.将id=d下的所有子元素<a>的文字颜色设置成红色
		$("#d a").css({"color":"red"});
		//$("#d > a").css({"color":"red"});
	});

</script>
</head>
<body>
    <div id="d">
		<a>itcast java</a>
		<p>
			<a>itheima ios</a>
		</p>
		<a>itcast android</a>
	</div>
	<p>itheima php</p>
	<p>itheima ui</p>
</body>
</html>

过滤器

过滤器它是在基本选择器与层次选择器获取到一批元素后，在进行过滤操作，使用过滤选择器基本都是”:”开头，除了属性过滤选择器。

基本过滤选择器

:first 获取第一个元素
:last 获取最后个元素
:not(selector) 去除所有与给定选择器匹配的元素,在jQuery 1.3中，已经支持复杂选择器了（例如:not(div a) 和 :not(div,a)）
:even 匹配所有索引值为偶数的元素，从 0 开始计数
:odd 匹配所有索引值为奇数的元素，从 0 开始计数
:eq 匹配一个给定索引值的元素
:gt 匹配所有大于给定索引值的元素
:lt 匹配所有小于给定索引值的元素
:header 匹配如 h1, h2, h3之类的标题元素
:animated 匹配所有正在执行动画效果的元素
:focus 匹配当前获取焦点的元素。如同其他伪类选择器（那些以":"开始），建议:focus前面用标记名称或其他选择;否则，通用选择("*")是不言而喻的。换句话说，$(':focus')等同为$('*:focus')。如果你正在寻找当前的焦点元素，$( document.activeElement )将检索，而不必搜索整个DOM树。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<script type="text/javascript">
	
	$(function(){
		//1.设置表格第一行，显示为红色
		//$("tr:first").css('color', 'red');
		
		//2.设置表格除了第一行以外，显示为蓝色
		//$("tr:not(tr:first)").css('color', "blue");
		//$("tr:gt(0)").css("color", "green");
		
		//3.设置表格的奇数与偶数行颜色不一致，例如，偶数行设置为红色，奇数行设置为蓝色
		$("tr:odd").css("color","green");
		$("tr:even").css("color", "red");

		//设置页面上的标题为灰色
		$(":header").css("color","gray");
	});

</script>
</head>
<body>

<h3>商品信息</h3>
	<table border='1'>
		<tr>
			<td>商品编号</td>
			<td>商品名称</td>
			<td>价格</td>
			<td>数量</td>
		</tr>
		<tr>
			<td>001</td>
			<td>电视机</td>
			<td>2100</td>
			<td>100</td>
		</tr>
		<tr>
			<td>002</td>
			<td>洗衣机</td>
			<td>1100</td>
			<td>200</td>
		</tr>
		<tr>
			<td>003</td>
			<td>缝纫机</td>
			<td>200</td>
			<td>1000</td>
		</tr>
		<tr>
			<td>004</td>
			<td>割草机</td>
			<td>11100</td>
			<td>10</td>
		</tr>
	</table>
	
</body>
</html>

内容过滤选择器

内容过滤选择器它是根据元素内部文本内容进行选中。

:contains(text) 匹配包含给定文本的元素一个用以查找的字符串
:empty 匹配所有不包含子元素或者文本的空元素
:has(selector) 匹配含有选择器所匹配的元素的元素
:parent 匹配含有子元素或者文本的元素

给所有包含 p 元素的 div 元素添加一个 text 类
HTML 代码:
<div><p>Hello</p></div>
<div>Hello again!</div>

jQuery 代码:
$("div:has(p)").addClass("test");

结果:
[ <div class="test"><p>Hello</p></div> ]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内容过滤选择器</title>
<style type="text/css">
.divColor {
	color: yellow;
}
</style>

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<script type="text/javascript">
	$(function(){
		//1.设置含有文本内容JAVA的div字体颜色为红色
		$("div:contains('JAVA')").css("color","red");

		//2.设置没有子元素的div文本内容为"这是一个空的DIV"
		$("div:empty").html("这是一个空的DIV");

		//3.包含<a>元素的div字体颜色为黄色
		$("div:has(a)").addClass("divColor");      //addClass不会覆盖步骤一的效果
		//$("div:has(a)").css("color","yellow");   //.css会覆盖步骤一的效果
		
		//4.设置所有含有子元素的span字体为蓝色
		$("span:parent").css("color","blue");
		
	});

</script>
</head>
<body>
	<div>itcast JAVA</div>
	<div>itcast IOS</div>
	<div></div>
	<div>
		<a>传智播客</a>欢迎您
	</div>
	<div>
		世界第一语言<a>JAVA</a>
	</div>
	<div>
		<span>今天天天气不错</span>
	</div>
</html>

可见性过滤选择器

可见性过滤选择器它匹配display:none或表单中input hidden这样的元素.

val() 获取元素当前的值 value值
show() 让元素显示出来
hide() 让元素隐藏起来

:hidden 匹配所有不可见元素，或者type为hidden的元素
:visible 匹配所有的可见元素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>可见性过滤选择器</title>


<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<script type="text/javascript">
	$(function() {
		//1.获取表单中隐藏域的值
		var value = $("input:hidden").val();
		//alert(value);
		//alert($("form :hidden").val());
		
		//2.设置table中所有可见tr背景色为蓝色
		$("tr :visible").css("background-color", "blue");

		//3.获取table中所有隐藏tr中文本值，
		//alert($("tr:hidden").text());
		
		//并将隐藏tr显示出来，
		$("tr:hidden").show();
		//原来显示的tr隐藏起来
		//$("tr:visible").hide();
	});
</script>
</head>
<body>

	<form>
		<input type="text" name="email" /> <br>
		 <input type="hidden" name="id" value="10" />
	</form>
	<table>
		<tr style="display: none">
			<td>Value 1</td>
		</tr>
		<tr>
			<td>Value 2</td>
		</tr>
		<tr>
			<td>Value 3</td>
		</tr>
	</table>
</html>

属性过滤选择器

根据元素的属性来过滤

^=匹配开始
$=匹配结尾
*=匹配包含
attr(name|properties|key,value|fn) 设置或返回被选元素的属性值。

[attribute] 匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。此选择器等价于:not([attr=value]) 要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
[selector1][selector2][selectorN] 复合属性选择器，需要同时满足多个条件时使用。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性过滤选择器</title>


<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<script type="text/javascript">
	$(function() {
		//设置所有含有id属性的div，字体颜色红色
		$("div[id]").css("color", "red");		
		
		//获取name=username的value值
		//alert($("[name='username']").val());
		
		//设置所有多选框被选中
		//$("input[type='checkbox']").attr("checked", true);
		
		//设置class中包含itcast的多选框被选中
		$("input[type='checkbox'][class*='itcast']").attr("checked", true);
		
		//获取class=itcast1的多选框的name属性值
		alert($("input[type='checkbox'][class='itcast1']").attr("name"));

	});
</script>
</head>
<body>
	<div id="d">这是一个DIV</div>
	<form>
		<input type="text" name="username" value="tom"><br>
		<input type="checkbox" class="itcast1" name="food" value="米饭">米饭 
		<input type="checkbox" class="itcast2" name="food" value="牛奶">牛奶 
		<input type="checkbox" class="itcast3" name="food" value="洋肉">洋肉
		<hr>
		<input type="checkbox" name="hobby" class="itheima1" value="篮球">篮球
		<input type="checkbox" name="hobby" class="itheima2" value="篮球">篮球
		<input type="checkbox" name="hobby" class="itheima3" value="足球">足球
	</form>
	<span id="s"> 这是一个SPAN </span>
</html>

子元素过滤选择器

根据子元素顺序来获取。
nth-child根据序号来选择，序号是从1开始,也可以设置odd even 根据奇偶来设置，':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！可以使用: nth-child(even) :nth-child(odd) :nth-child(3n) :nth-child(2) :nth-child(3n+1) :nth-child(3n+2)
也可以通过倍数来设置
first-child 获取第一个
last-child 获取最后一个
only-child 获取只有一个子元素

:nth-child 匹配其父元素下的第N个子或奇偶元素,':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！可以使用: nth-child(even) :nth-child(odd) :nth-child(3n) :nth-child(2) :nth-child(3n+1) :nth-child(3n+2)
:first-child 匹配第一个子元素,':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
:last-child 匹配最后一个子元素,':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配,如果父元素中含有其他元素，那将不会被匹配。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子元素过滤选择器</title>


<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<script type="text/javascript">
	$(function() {
		//设置列表中第2个li字号为30
		$("ul li:nth-child(2)").css("font-size", 30);
		//$("ul li:nth-child(3n)").css("font-size", 30);  //设置列表中步长为3的li字号为30
		
		//设置列表中第一行字体为红色
		$("ul li:first-child").css("color","red");
		
		//设置列表中最后一行字体为蓝色	
		$("ul li:last-child").css("color","blue");

		//获取ul下只有一个li的信息
		alert($("ul li:only-child").html());
	});
</script>
</head>
<body>
	<ul>
		<li>JAVA</li>
		<li>IOS</li>
		<li>PYTHON</li>
		<li>C++</li>
	</ul>
	<ul>
		<li>刘德华</li>
		<li>张学友</li>
		<li>郭富城</li>
	</ul>
	<ul>
		<li>NodeJS</li>
	</ul>
</body>
</html>

表单过滤选择器

表单过滤选择器是用于选取表单中的元素

方法总结

trim()它是去掉字符串左右空格

常用事件处理

失去焦点事件 blur(function(){})
click(function(){}) 点击事件
submit() 表单提交

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单过滤选择器</title>


<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<script type="text/javascript">
	$(function(){
		//当username与password失去焦点后，判断录入的数据不能为空
		$("input:text, input:password").blur(function(){
			//获取数据
			var value = $(this).val();
			if ($.trim(value) == ""){
				alert($(this).attr("name") + "不可以为空");
			}
		})
		
		//对button添加点击事件，提交form表单
		$(":button").click(function(){
			$("form").submit();
		});
	});


</script>
</head>
<body>

	<form>
		USERNAME:<input type="text" name="username"><br>
		PASSWORD:<input type="password" name="password"><br> <input
			type="button" value="按钮">
	</form>

</body>
</html>

表单对象属性过滤选择器

checked它是用于radio,checkbox 判断选中

selected它是用于select下拉框选中。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单对象属性过滤选择器</title>


<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<script type="text/javascript">
	$(function(){
		$(":button").click(function(){
			//1.获取选中的性别信息
			//alert($(":radio:checked").val());
			
			//2.获取选中的爱好信息			
			$(":checkbox:checked").each(function(){
				alert($(this).val());
			});

			//3.获取选中的城市
			//alert($("select option:selected").val());
		
		});
	});
</script>
</head>
<body>
	<form>
		性别: <input type="radio" name="sex" value='男'>男 <input
			type="radio" name="sex" value='女'>女

		<hr>
		爱好: <input type="checkbox" name="hobby" class="itheima1" value="篮球">篮球
		<input type="checkbox" name="hobby" class="itheima2" value="排球">排球
		<input type="checkbox" name="hobby" class="itheima3" value="足球">足球
		<hr>
		城市 <select>
			<option value="">--请选择--</option>
			<option value="北京">北京</option>
			<option value="上海">上海</option>
			<option value="广州">广州</option>
		</select> <br> <input type="button" value="打印">
	</form>

</body>
</html>

在开发中，使用比较多的选择器有:

基本选择器 class id element
层次选择器父子关系兄弟关系
过滤选择器属性过滤基本过滤内容过滤关于表单过滤

jQuery DOM操作
插入操作
内部插入

append(content|fn) 向每个匹配的元素内部追加内容。这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。
appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合中。实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
prepend(content) 向每个匹配的元素内部前置内容。这是向所有匹配元素内部的开始处插入内容的最佳方式。
prependTo(content) 把所有匹配的元素前置到另一个、指定的元素元素集合中。

外部插入

after(content|fn) 在每个匹配的元素之后插入内容。
before(content|fn) 在每个匹配的元素之前插入内容。
insertAfter(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。
insertBefore(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。实际上，使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档操作-插入</title>

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<script type="text/javascript">
	$(function() {
		//内部插入
		//1.在select中开始添加一项<option value='学前班'>学前班</option>
		//$("#edu").prepend($("<option value='学前班'>学前班</option>"));
		//$("<option value='学前班'>学前班</option>").prependTo($("#edu"));
		
		//2.在select最后添加一项<option value='研究生'>研究生</option>
		//$("select[id='edu']").append($("<option value='研究生'>研究生</option>"));
		//$("<option value='研究生'>研究生</option>").appendTo($("#edu"));

		//外部插入
		//1.在select中开始添加一项<option value='学前班'>学前班</option>
		//$("option:first").before($("<option value='学前班'>学前班</option>"));
		//$("<option value='学前班'>学前班</option>").insertBefore($("option:first"));
		$("<option value='学前班'>学前班</option>").insertBefore($("#edu option:first"));

		//2.在select最后添加一项<option value='研究生'>研究生</option>
		//$("#edu option:last").after($("<option value='研究生'>研究生</option>"));
		$("<option value='研究生'>研究生</option>").insertAfter($("#edu option:last"));
		
	});
</script>
</head>
<body>
	<select id="edu">
	
		<option value="小学">小学</option>
		<option value="中学">中学</option>
		<option value="本科">本科</option>
		
	</select>
</body>
</html>

删除操作

方法	概述
empty()	删除匹配的元素集合中所有的子节点
remove([expr])	从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
detach([expr])	从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档操作-删除</title>

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<script type="text/javascript">

	$(function(){
		
		//1.empty代表的是将元素下所有子元素删除
		//$("#d1").empty();
		
		//给p注册事件
		$("#d1 p").click(function(){
			alert("pppppppppp");
		});
		
		//2.remove与detach功能都是删除
		//var p=$("#d1 p").remove();
		var p=$("#d1 p").detach();
		
		//remove与detach的区别:remove删除时连注册的事件也删除 而detach它不删除注册事件.
		$("#d2").append(p);
		
	});	
</script>
</head>
<body>

	<div id="d1">
		<p><a href="#">ppppp</a></p>
		<span>ssssss</span>
	</div>
	
	<div id="d2">
	</div>
	
</body>
</html>

替换与克隆操作
替换操作

replaceWith(content|fn) 将所有匹配的元素替换成指定的HTML或DOM元素。用于将匹配元素替换掉的内容。如果这里传递一个函数进来的话，函数返回值必须是HTML字符串。
replaceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素。
克隆操作

clone([Even[,deepEven]]) 克隆匹配的DOM元素并且选中这些克隆的副本。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档操作-替换与克隆</title>

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<script type="text/javascript">

	$(function(){
		//给div的id=d1的第一个p注册事件
		$("#d1 p:first").click(function(){alert("p被点击了！")});
		//给div的id=d1的第一个p的第一个超连接添加了mouseover
		$("#d1 p:first a").mousemove(function(){alert("鼠标在a上！")});

		//将 id=d1中的第一个p来克隆一份来替换 id=d2的div中的第二个span

		//1.得到div的id=d1的第一个p的克隆
		//clone第一个参数为true,代表它的事件也会被克隆  为false不会克隆事件
		//clone第二个参数为true 代表子元素的事件也被克隆  为false,代表子元素的事件不被克隆 (注意：父元素的事件克隆需要为true)
		var copyInfo = $("#d1 p:first").clone(true, true);

		//2.将到id=d2的div中第二个span使用copyInfo替换
		//$("#d2 span:last").replaceWith(copyInfo);
        copyInfo.replaceAll($("#d2 span:last"));
	});	
</script>
</head>
<body>

	<div id="d1">
		<p>ppppppppp
			<a>p1</a>
		</p>
		<p>p2</p>
	</div>
	<div id="d2">
		<span>span1</span>
		<span>span2</span>
	</div>
</body>
</html>

综合练习

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档操作-综合练习</title>

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<script type="text/javascript">
	$(function(){
		//给按钮添加点击事件
		$("#div1 input:button").click(function(){
			//1.创建一个tr
			var tr = $("<tr></tr>");
			//2.创建四个td,向td中添加内容
			var td1=$("<td></td>");
			td1.append($("#username").val());
			var td2=$("<td></td>");
			td2.append($("#phone").val());
			var td3=$("<td></td>");
			td3.append($("#email").val());
			var td4=$("<td></td>");
			//创建一个链接
			var a=$("<a href='javascript:void(0)'>删除</a>");
			td4.append(a);
			
			//完成删除功能
			a.click(function(){
				//$(this).parent().parent().remove();
				$(this).parents("tr").remove();
			});
			
			//3.将td添加到tr中
			tr.append(td1).append(td2).append(td3).append(td4);
			//4.将tr添加到table中
			$("#tab").append(tr);
		});
	});
</script>
</head>
<body>
<div id="div1" align="center">
	<table id="tab" border='1'>
		<tr>
			<td>姓名</td>
			<td>电话</td>
			<td>邮箱</td>
			<td>删除</td>
		</tr>
	</table>
	<hr>
	姓名:<input type="text" id="username">
	电话:<input type="text" id="phone">
	邮箱:<input type="text" id="email">
	<input type="button" value="添加">
	</div>
</body>
</html>

筛选

过滤

过滤操作它相当于是我们在jquery中使用的过滤选择器，

例如 eq可以根据序号来获取元素 first与last来获取第一个元素与最后一个元素

查找

是通过当前元素，获取祖先元素，父元素子元素等。

find方法，它可以直接来查找指定的元素.

jQuery事件

jQuery事件

Jquery中的事件与传统的javascript中事件区别: Jquery中事件允许绑定多个函数，而javascript中一个事件只能绑定一个函数.
事件绑定

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery事件绑定机制介绍</title>

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<script type="text/javascript">
	$(function(){
		//jquery提供的一种简化绑定事件操作
		$("#btn").click(function(){
			//alert("jquery提供的一种简化绑定事件操作");
		});

		//bind用于绑定事件
		// $("#btn").bind("click", function(){
		// 	alert("bind用于绑定事件");
		// });
		//unbind用于解除事件的绑定
		//$("#btn").unbind("click");
		
		//我们也可以使用live来进行事件绑定
		// $("#btn").live("click", function(){
		// 	alert("live事件绑定");
		// });
		
		//我们可以使用die方法来解决live的绑定操作
		//$("#btn").die("click");
		
		//live与bind的区别
		//bind只能为存在的元素进行事件的绑定，而live它可以为没有存在，后续通过代码新添加的元素绑定事件.
		$(":button").live("click",function(){
			alert("live与bind的区别");
		});
		
		//新添加一个按钮
		$("body").append($("<input type='button' value='新按钮'>"));
		
	});
	
		//传统的javascript中绑定事件
	/* windown.onload=function(){
		document.getElementById("btn").onclick=function(){
			
		}
	}; */
	
</script>
</head>
<body>
	<input type="button" id="btn" value="按钮">
</body>
</html>

一次性事件和自动触发
一次性事件

one()为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery事件绑定机制介绍</title>

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<script type="text/javascript">
	$(function(){
		//为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
		$("#button").one("click", function () {
			alert("一次性的事件");
		});
	});
	
</script>
</head>
<body>
<div>
	<input type="button" id="button" value="按钮">
</div>
</body>
</html>

事件触发

trigger()在每一个匹配的元素上触发某类事件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery事件触发</title>

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<script type="text/javascript">
	$(function() {
		//给按钮注册一个点击事件
		$("#button").bind("click", function(){
			alert("注册一个点击事件");
		});

		//给按钮注册一个mouseover事件
		$("#button").mousemove(function () {
			//触发点击事件
			$(this).trigger("click");
		});
	});
</script>
</head>
<body>
	<input type="button" id="button" value="按钮">
</body>
</html>

事件切换
hover

这个操作它可以绑定两个函数，当触发mouseover时第一个函数执行，当触发mouseout时第二个函数执行。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery事件切换-hover</title>

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<script type="text/javascript">
	$(function() {
		//1.先设置div隐藏
		$("div").hide();
		//2.给h1添加hover操作
		$("h1").hover(function(){
			//鼠标移入到h1上会执行
			//$("div").show(2000);
			//$("div").slideDown(2000);
			$("div").fadeIn(100);
		}, function(){
			//鼠标离开h1时会执行
			//$("div").hide(2000);
			//$("div").slideUp(2000);
			$("div").fadeOut(100);
		});
	});
</script>
</head>
<body>
	<h1>jquery介绍</h1>
	<div>
		jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。<br>
		jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。<br>
		它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。<br>
		jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。<br>
		jQuery兼容各种主流浏览器，如IE6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。[1]<br>
	</div>
</body>
</html>

toggle

用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery事件切换-toggle</title>

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

<script type="text/javascript">
	$(function() {
		$("img").toggle(function() {
			$(this).attr("src", "2.png");
		}, function() {

			$(this).attr("src", "3.png");
		}, function() {

			$(this).attr("src", "1.png");
		});

	});
</script>
</head>
<body>
	<img src='1.png' width="100" height="100">
</body>
</html>

Ajax概述

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。

Ajax 是一种用于创建快速动态网页的技术。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

AJAX优点

使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与Web服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。

AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

AJAX 可使因特网应用程序更小、更快，更友好

AJAX工作原理

AJAX快速入门
第一步:获取一个XMLHttpRequest对象

第二步:设置一个回调函数

回调函数它的作用就是用于处理服务器响应的数据

通过XMLHttpRequest对象的onreadystatechange设置回调函数

第三步设置请求方式GET/POST及请求的URL等

通过XMLHttpRequest对象的open方法

第四步真正向服务器发送请求

通过XMLHttpRequest对象的send方法

第五步在回调函数中获取服务器响应的数据

通过XMLHttpRequest对象的responseText

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	var xmlhttp = null;

	function sendAjax() {
		//1.获取一个XMLHttpRequest对象
		if (window.XMLHttpRequest) {// code for all new browsers
			xmlhttp = new XMLHttpRequest();
		} else if (window.ActiveXObject) {// code for IE5 and IE6
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}

		//2.设置回调函数
		xmlhttp.onreadystatechange = callback;

		//3.设置请求方式及url
		var url = "http://localhost:8080/Ajax/AjaxDemo01";
		xmlhttp.open("POST", url, true);
		
		xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
		
		//4.向服务器发送请求
		xmlhttp.send(null);

	}

	//回调函数
	function callback() {

		//alert(xmlhttp.readyState); //得到状态码
		
	//if (xmlhttp.readyState == 4) {
		//		if (xmlhttp.status == 200) {

		//5.得到响应数据
		//			alert(xmlhttp.responseText);
		//		}
		//	} else {
		//		alert("Problem retrieving XML data");
		//	}

	}
</script>
</head>
<body>

	<input type="button" value="按钮" onclick="sendAjax()">
</body>
</html>

XMLHttpRequest对象详解

通过一行简单的 JavaScript 代码，我们就可以创建 XMLHttpRequest 对象。在所有现代浏览器中（包括 IE 7）：

xmlhttp=new XMLHttpRequest()

在 Internet Explorer 5 和 6 中：

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

实例

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for all new browsers
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE5 and IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}

function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"
  if (xmlhttp.status==200)
    {// 200 = OK
    // ...our code here...
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}
</script>

XMLHttpRequest常用属性

onreadystatechange 它是用于绑定回调函数，当服务器响应数据回来后，我们可以在指定的回调函数中进行数据处理。
readyState 它描述的http请求的状态，HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。

5 个状态中每一个都有一个相关联的非正式的名称，下表列出了状态、名称和含义：

状态	名称	描述
0	Uninitialized	初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
1	Open	open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2	Send	Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3	Receiving	所有响应头部都已经接收到。响应体开始接收但未完成。
4	Loaded	HTTP 响应已经完全接收。

status 它描述的http状态码 200 404 405 500…
获取服务器响应数据，responesText或responseXML来获取

XMLHttpRequest常用方法
open它是用于设置请求方式，url及是否异步

参数1：HTTP 请求方式 POST/GET。
参数2:url路径
参数3:true/false 代表是否异步

send它是真正向服务器发送请求

如果请求方式是get，那么我们使用send(null) 原因:get请求方式是没有http请求体
只有post请求方式时，才有请求体,所以send的参数只是在post请求时使用例如
Xmlhttp.send(“username=xxx&password=xxx”);

setRequestHeader

注意：如果请求方式是POST,那么我们在使用时，必须设置一个请求头，就需要使用setRequestHeader方法来完成

案例2 验证录入的用户名是否可以使用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/Ajax/js/my.js"></script>

<script type="text/javascript">
	//验证录入的用户名是否可以使用
	function checkUsername(){
		//1.得到文本框中的信息
		var usernameVal = document.getElementById("username").value;
		//alert(usernameVal);
		//2.使用ajax向服务器发送请求，并且携带username信息
		
		//2.1获取XMLHttpRequest对象
/* 		xmlhttp=null;
		if (window.XMLHttpRequest)
		  {// code for all new browsers
		  xmlhttp=new XMLHttpRequest();
		  }
		else if (window.ActiveXObject)
		  {// code for IE5 and IE6
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		  } */
		//将获取XMLHttpRequest对象的代码封装在my.js中
		var xmlHttp = getXmlHttpRequest();
		  
		//2.2设置回调函数
		//xmlhttp.onreadystatechange = callback;
		//采用匿名函数
		xmlHttp.onreadystatechange = function (){
			if (xmlHttp.readyState == 4) {
				if (xmlHttp.status == 200) {
					//2.5根据服务器响应情况来处理响应数据
					var responseMsg = xmlHttp.responseText;
					//3.处理服务器响应的数据，在span块中显示信息
					document.getElementById("username_msg").innerHTML = responseMsg;
				}
			}
		};
		
		//2.3open，设置请求路径与方式
		xmlHttp.open("post", "/Ajax/UserServlet");
		//post请求方式需要设置请求头
		xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
		
		//2.4发送请求
		xmlHttp.send("username=" + usernameVal);
		
	}
	
	function callback() {
		if (xmlHttp.readyState == 4) {
			if (xmlHttp.status == 200) {
				//2.5根据服务器响应情况来处理响应数据
				var responseMsg = xmlHttp.responseText;
				//3.处理服务器响应的数据，在span块中显示信息
				document.getElementById("username_msg").innerHTML = responseMsg;
			}
		}
	}
	
</script>

</head>
<body>
	用户名：<input type="text" id="username" onblur="checkUsername()">
	<span id="username_msg"></span>
</body>
</html>

package com.toroidals.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class UserServlet
 */
public class UserServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 1.得到请求参数username
		String username = request.getParameter("username");
		System.out.println("用户名" + username);
		
		// 2.判断用户名是否已经存在，就代表用户名已经被占用,否则没有被占用
		String msg = "";
		if ("toroidal".equals(username) || "toroidals".equals(username)) {
			msg = "<font color='red'>用户名已经存在</font>";
		} else {
			msg = "<font color='green'>用户名可以使用</font>";
		}
		// 3.通过response获取输出流写回到浏览器
		response.setCharacterEncoding("utf-8");
		response.getWriter().write(msg);
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

案例3 -省市二级联动

仅在 body 和 frameset 元素中有效。

属性	值	描述
onload	脚本	当文档载入时执行脚本
onunload	脚本	当文档卸载时执行脚本

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/Ajax/js/my.js"></script>

<script type="text/javascript">
	//获取省份信息
	function getProvince() {
		//向服务器发送请求获取省份信息
		//1.获取xmlhttprequest对象
	    var xmlHttp = getXmlHttpRequest();
		alert("ssssss");
		//2.设置回调函数
		xmlHttp.onreadystatechange = function() {
			if (xmlHttp.readyState == 4) {
				if (xmlHttp.status == 200) {
					//将服务器得到的信息处理填充到省份下拉框
					var provinces = xmlHttp.responseText; //辽宁,黑龙江,吉林
					var ps = provinces.split(",");  //获取省份列表
					//使用html dom来完成将数据填充到下拉框操作
					for (var i = 0; i < ps.length; i++) {
						var option = document.createElement('option');
						option.text = ps[i];
						//将option添加到下拉框中
						document.getElementById("province").add(option);
					}
				}
			}
		}
		//3.open
		xmlHttp.open("POST", "/Ajax/GetProvince");
		//4.send
		xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
		xmlHttp.send(null);
	}

	//获取城市信息
	function getCity() {

		//1.得到省份名称 
		var provinceElement = document.getElementById("province"); //得到省份下拉框元素
		var ops = provinceElement.options; //得到下拉框下所有option数组
		var index = provinceElement.selectedIndex  //得到选中项的索引
		var option = ops[index]; //根据选中项索引在option数组中得到选中项option对象
		var provinceName = option.text; //得到option文本

		//2.向服务器发送请求

		//2.1.获取xmlhttprequest对象
		var xmlHttp = getXmlHttpRequest();
		//2.2.设置回调函数
		xmlHttp.onreadystatechange = function() {

			if (xmlHttp.readyState == 4) {
				if (xmlHttp.status == 200) {
					//清空城市下拉框信息（避免一直添加显示不正确）
					document.getElementById("city").innerHTML = "<option>--请选择城市--</option>";
					
					var citys = xmlHttp.responseText;
					var cs = citys.split(",");

					//使用html dom来完成将数据填充到下拉框操作
					for (var i = 0; i < cs.length; i++) {
						var option = document.createElement('option');
						option.text = cs[i];
						//将option添加到下拉框中
						document.getElementById("city").add(option);
					}
				}
			}
		}
		//2.3.open
		xmlHttp.open("POST", "/Ajax/GetCity");
		//4.send
		xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
		xmlHttp.send("provinceName=" + provinceName);

	}
</script>

</head>
<body onload="getProvince()">
	<select id="province" onchange="getCity()">
		<option>--请选择省份--</option>
	</select>
	<select id="city">
		<option>--请选择城市--</option>
	</select>
</body>
</html>

package com.toroidals.utils;

import java.util.HashMap;
import java.util.Map;
import java.util.Set;

public class CitysUtil {
	private static final Map<String, String> citys = new HashMap<String, String>();
	static {
		citys.put("黑龙江", "哈尔滨,大庆,齐齐哈尔");
		citys.put("吉林", "长春,吉林,四平");
		citys.put("辽宁", "沈阳,大连,葫芦岛");
	}
	// 获取省份方法
	public static String getProvince() {
		Set<String> set = citys.keySet();
		String provinces = "";
		for (String p : set) {
			provinces += p + ",";
		}

		return provinces.substring(0, provinces.length() - 1);
	}

	// 获取城市信息
	public static String getCitys(String provinceName) {

		return citys.get(provinceName);
	}

	public static void main(String[] args) {

		System.out.println(getProvince());
		
		System.out.println(getCitys("吉林"));
	}
}

public class GetProvince extends HttpServlet {
	
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//得到省份信息
		String province = CitysUtil.getProvince();
		System.out.println("省份");
		
		//写回到浏览器
		response.setCharacterEncoding("utf-8");
		response.getWriter().write(province);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}




public class GetCity extends HttpServlet {
	
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 解决post请求方式乱码
		request.setCharacterEncoding("utf-8");

		// 1.得到省份名称
		String provinceName = request.getParameter("provinceName");

		// 2.根据名称得到对应的城市
		String citys = CitysUtil.getCitys(provinceName);

		// 3.写回到浏览器
		response.setCharacterEncoding("utf-8");
		response.getWriter().write(citys);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

jquery ajax开发介绍

ajax()它是jquery提供的最基本的ajax编程方式。它的功能比较强大，但是使用比较麻烦，一般不使用，它是将远程数据加载到XMLHttpRequest对象中。

2.load get post 它们简化了$.ajax操作，get post针对get与post请求的，它们是开发中使用的比较多。

3.getScript getJSON 它们是用于解决ajax跨域问题的。

load使用（了解）

载入远程 HTML 文件代码并插入至 DOM 中.

实现一个用户名验证是否可以使用案例

注意事项:

load方法是将服务器响应的数据直接插入到指定的dom元素中。
jquery中的load方法它的请求方式是什么?
1. 如果有参数请求方式是post
2. 如果没有参数请求方式是get

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/Ajax/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	//页面加载完成后
	$(function() {
		//添加失焦事件
		$("#username").blur(function() {
			//获取录入的用户名
			var usernamevalue = $("#username").val();
			
			//向服务器发送请求
			var url="/Ajax/UserServlet";
			//$("#username_span").load(url,{'username':usernamevalue},function(){});
			$("#username_span").load(url,{'username':usernamevalue});
			
		});

	});
</script>
</head>
<body>

	<input type="text" name="username" id="username"><span id="username_span"></span>
	<br>
	<input type="password" name="password">
	<br>

</body>
</html>

public class UserServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 1.得到请求参数username
		String username = request.getParameter("username");
		System.out.println("用户名" + username);
		
		// 2.判断用户名是否已经存在，就代表用户名已经被占用,否则没有被占用
		String msg = "";
		if ("toroidal".equals(username) || "toroidals".equals(username)) {
			msg = "<font color='red'>用户名已经存在</font>";
		} else {
			msg = "<font color='green'>用户名可以使用</font>";
		}
		// 3.通过response获取输出流写回到浏览器
		response.setCharacterEncoding("utf-8");
		response.getWriter().write(msg);
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

$.ajax（了解）

实现一个用户名验证是否可以使用案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/Ajax/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	//页面加载完成后
	$(function() {
		//添加失焦事件
		$("#username").blur(function() {
			//获取录入的用户名
			var usernamevalue = $("#username").val();
			
			//向服务器发送请求
			//var url="/Ajax/UserServlet";
			//$("#username_span").load(url,{'username':usernamevalue},function(){});
			//$("#username_span").load(url,{'username':usernamevalue});
			//使用$.ajax完成操作
			$.ajax({
				url: "/Ajax/UserServlet",
				data: {'username': usernamevalue},
				type: "POST",
				dataType: "html",
				success: function(result){//参数result它接收了服务器响应的数据
					//参数result它接收了服务器响应的数据
					$("#username_span").html(result);
				}
			});
		});
	});
</script>
</head>
<body>

	用户名：<input type="text" name="username" id="username"><span id="username_span"></span>
	<br>
	密码：<input type="password" name="password">
	<br>

</body>
</html>

$.post与$.get介绍（重要）

$.get与$.post它们针对于get与post请求

$.get(url, [data], [callback], [type]) String,Map,Function,String

url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/Ajax/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	//页面加载完成后
	$(function() {
		//添加失焦事件
		$("#username").blur(function() {
			//获取录入的用户名
			var usernamevalue = $("#username").val();
			
			//使用$.get完成操作
			url="/Ajax/UserServlet"
			$.get(url, {"username": usernamevalue}, function(result){
				$("#username_span").html(result);
			}, "html")
		});
	});
</script>
</head>
<body>

	用户名：<input type="text" name="username" id="username"><span id="username_span"></span>
	<br>
	密码：<input type="password" name="password">
	<br>

</body>
</html>

$.post(url, [data], [callback], [type]) String,Map,Function,String

url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/Ajax/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	//页面加载完成后
	$(function() {
		//添加失焦事件
		$("#username").blur(function() {
			//获取录入的用户名
			var usernamevalue = $("#username").val();
			
			//使用$.post完成操作
			url="/Ajax/UserServlet"
			$.post(url, {"username": usernamevalue}, function(result){
				$("#username_span").html(result);
			}, "html")
		});
	});
</script>
</head>
<body>

	用户名：<input type="text" name="username" id="username"><span id="username_span"></span>
	<br>
	密码：<input type="password" name="password">
	<br>

</body>
</html>

jQuery ajax开发基于json(重点）
json概述

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.

json简单说就是javascript中的对象和数组.

对象: {key：value,key：value,...}
数组: ["java","javascript","vb",...]

注意:在json中它的两种结构可以互相嵌套

{key:[value1,value2],key:value}

[{name:xxx},{key:value},{key:value}]

Fastjson

将java的对象转换成json数据,也可以将一个json转换成java对象(不常用).

Fastjson是阿里提供的一个开源json插件.

对于json处理的插件 fastjson jsonlib flexjson Jackson

Fastjson使用介绍

导入相应的jar包

将java对象转换成json时，指定键名称

	@JSONField(name = "用户id")   //将java对象转换成json时，指定键名称
	private int id;

将java对象转换成json时，将日期类型属性java.util.Date,按指定的格式来转换

	//@JSONField(format="yyyy年MM月dd日")
	//将java对象转换成json时，将日期类型属性java.util.Date,按指定的格式来转换
	@JSONField(format = "yyyy-MM-dd HH:mm:ss")   
	private Date birth;

如果java类中的某些属性不想转换成json

方式一：

        // 指定一个Filter,去掉指定属性
		SerializeFilter filter = new PropertyFilter() {
			public boolean apply(Object arg0, String arg1, Object arg2) {
				//System.out.println(arg0); //类名
				//System.out.println(arg1);//属性名
				//System.out.println(arg2); //属性值
				//返回false表示不参与转换，true表示转换
				if ("sex".equals(arg1)) {
					return false;
				}else {
					return true;
				}
			}
		};

方式二（推荐）：

// 上述代码操作比较麻烦，可以简化
SerializeFilter filter = new SimplePropertyPreFilter("用户id", "name", "birth"); //指定需要转换的属性

public class User {
	
	@JSONField(name = "用户id")   //将java对象转换成json时，指定键名称
	private int id;
	
	private String name;
	private char sex;
	
	//@JSONField(format="yyyy年MM月dd日")
	//将java对象转换成json时，将日期类型属性java.util.Date,按指定的格式来转换
	@JSONField(format = "yyyy-MM-dd HH:mm:ss")   
	private Date birth;
	
	public User() {

	}
        
    ...



public class JsonDemo {
	public static void main(String[] args) {
		User user = new User(1, "希夷子", '男', new Date());
		
		//使用fastjson将p1转换成json数据 {id:xxx,name:xxx,price:xxx,count:xxx}
		String json = JSONObject.toJSONString(user);
		System.out.println(json);
		
		//将指定属性转为json
		// 指定一个Filter,去掉指定属性
//		SerializeFilter filter = new PropertyFilter() {
//			public boolean apply(Object arg0, String arg1, Object arg2) {
//				//System.out.println(arg0); //类名
//				//System.out.println(arg1);//属性名
//				//System.out.println(arg2); //属性值
//				//返回false表示不参与转换，true表示转换
//				if ("sex".equals(arg1)) {
//					return false;
//				}else {
//					return true;
//				}
//			}
//		};
		
		// 上述代码操作比较麻烦，可以简化
		SerializeFilter filter = new SimplePropertyPreFilter("用户id", "name", "birth"); //指定需要转换的属性

		String f_json = JSONObject.toJSONString(user, filter);
		System.out.println(f_json);

	}
}



//------------------result----------------------
{"birth":"2019-12-31 17:34:25","name":"希夷子","sex":"男","用户id":1}
{"birth":"2019-12-31 17:34:25","name":"希夷子","用户id":1}

问题:关于fastjson将java对象转换成json时的循环引用问题?

public class JsonDemo02 {
	public static void main(String[] args) {
		User user = new User(1, "希夷子", '男', new Date());
		
		List<User> list = new ArrayList<User>();
		list.add(user);
		list.add(user);
		list.add(user);
		
		//指定需要转换的属性
		SerializeFilter filter = new SimplePropertyPreFilter("用户id", "name", "birth"); 

		String f_json = JSONObject.toJSONString(list, filter);
		System.out.println(f_json);

	}
}

//---------------------result-----------------------
[{"birth":"2019-12-31 17:42:28","name":"希夷子","用户id":1},{"$ref":"$[0]"},{"$ref":"$[0]"}]

通过以下设置可以取消循环应用

SerializerFeature.DisableCircularReferenceDetect

package com.toroidals.json;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import com.alibaba.fastjson.JSONObject;
import com.alibaba.fastjson.serializer.SerializeFilter;
import com.alibaba.fastjson.serializer.SerializerFeature;
import com.alibaba.fastjson.serializer.SimplePropertyPreFilter;

public class JsonDemo02 {
	public static void main(String[] args) {
		User user = new User(1, "希夷子", '男', new Date());
		
		List<User> list = new ArrayList<User>();
		list.add(user);
		list.add(user);
		list.add(user);
		
		//指定需要转换的属性
		SerializeFilter filter = new SimplePropertyPreFilter("用户id", "name", "birth"); 

		String f_json = JSONObject.toJSONString(list, filter, SerializerFeature.DisableCircularReferenceDetect);
		System.out.println(f_json);

	}
}


//---------------------result-----------------------
[{"birth":"2019-12-31 17:49:16","name":"希夷子","用户id":1},{"birth":"2019-12-31 17:49:16","name":"希夷子","用户id":1},{"birth":"2019-12-31 17:49:16","name":"希夷子","用户id":1}]

案例1-显示商品信息

步骤 :

创建一个html页面，页面上有一个”显示商品”连接
当我们点击页面上的连接时，向服务器发送ajax请求，获取商品信息.
服务器得到商品信息List<Product>,将集合信息转换成json响应到浏览器端。
在页面上来处理服务器响应回来的数据。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>案例-显示商品信息</title>
<script type="text/javascript" src="/Ajax/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	$(function(){
		
		//将div隐藏
		$("#content").hide();
		
		$("#a").toggle(function(){
			//向服务器发送请求，得到商品信息，在页面上展示 
			var url="/Ajax/ProductInfo"
			$.post(url,function(data){
				var jsonObj=eval(data); 
				//[{"count":100,"id":1,"name":"电视机","price":2000},{"count":200,"id":2,"name":"洗衣机","price":1000}]
				//处理响应json数据，封装成table的html代码
				var tab=$("<table border='1'><tr><td>编号</td><td>名称</td><td>数量</td><td>价格</td></tr></table>");
				
				for( var i=0;i<jsonObj.length;i++){
					var obj=jsonObj[i];
					var tr=$("<tr><td>"+obj.id+"</td><td>"+obj.name+"</td><td>"+obj.count+"</td><td>"+obj.price+"</td></tr>");
					//内部插入操作
					tab.append(tr);
				}
				//将table在添加到div中
				$("#content").append(tab);
				
				//显示div
				$("#content").fadeIn(1500);
				
			},"json");
			
		},function(){
			//将商品的信息隐藏
			//将div隐藏
			$("#content").fadeOut(1500);
			//清空div
			$("#content").html("");
		});
	});
</script>
</head>
<body>

	<a href="javascript:void(0)" id="a">显示商品信息</a>
	<hr>
	<div id="content">
		
	</div>
</body>
</html>

public class ProductInfo extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String callback=request.getParameter("callback");
		//处理响应数据的中文乱码
		response.setCharacterEncoding("utf-8");
		Product p1 = new Product();
		p1.setId(1);
		p1.setCount(100);
		p1.setName("电视机");
		p1.setPrice(2000);

		Product p2 = new Product();
		p2.setId(2);
		p2.setCount(200);
		p2.setName("洗衣机");
		p2.setPrice(1000);

		List<Product> list = new ArrayList<Product>();
		list.add(p1);
		list.add(p2);
		// 将其转换成json响应到浏览器
		String json = JSONObject.toJSONString(list);
		response.getWriter().write(json);
		System.out.println(json);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

省市二级联动优化（Jquery + Ajax）

通过一个CityServlet来处理这两次请求？

我们可以在请求中添加一个参数来判断这次请求操作要完成什么功能。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>案例-省市二级联动</title>
<script type="text/javascript" src="/Ajax/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	$(function() {
		//页面加载完成后向服务器发送请求来获取省份信息--不带参数
		var url = "/Ajax/CityServlet";
		$.post(url,{"method": "GetProvince"}, function(data) {
			//data [{"id":1,"name":"黑龙江"},{"id":3,"name":"辽宁"},{"id":2,"name":"吉林"}]
			var jsonObj = eval(data);
			$(jsonObj).each(function() {
				//得到省份名称
				var pname = this.name;
				//转换成jquery对象
				$("#province").append($("<option>" + pname + "</option>"));
			});
		}, "json");

		//当选择了省份时
		$("#province").change(function(){
			//清理城市下拉框,避免连续添加显示错误
			$("#city").html("<option>--选择城市--</option>");
			//这次请求操作的作用是获取省份对应的城市信息---带参数
			//获取选择的省份名称
			var provinceName=$(this).val();  //获取当前选中项的名称
			$.post(url,{"method": "GetCitis", "pname": provinceName}, function(data){
				//[{"id":1,"name":"哈尔滨"},{"id":2,"name":"大庆"}]
				var jsonObj=eval(data);  
				//遍历
				$(jsonObj).each(function(){
					var cityName=this.name; //获取城市名称
					$("#city").append($("<option>" + cityName + "</option>"));
				});
			});
		});
	});
</script>
</head>
<body>

	<select id="province">
		<option>--选择省份--</option>
	</select>省

	<select id="city">
		<option>--选择城市--</option>
	</select>市
</body>
</html>

public class CityServlet extends HttpServlet {
	private Map<Province, List<City>> map;
	
	@Override
	public void init() throws ServletException {
		
		map = new HashMap<Province, List<City>>();
		// 创建省份
		Province p1 = new Province();
		p1.setId(1);
		p1.setName("黑龙江");

		City c11 = new City();
		c11.setId(1);
		c11.setName("哈尔滨");

		City c12 = new City();
		c12.setId(2);
		c12.setName("大庆");

		List<City> l1 = new ArrayList<City>();
		l1.add(c11);
		l1.add(c12);

		map.put(p1, l1);

		Province p2 = new Province();
		p2.setId(2);
		p2.setName("吉林");

		City c21 = new City();
		c21.setId(1);
		c21.setName("长春");

		City c22 = new City();
		c22.setId(2);
		c22.setName("吉林");

		List<City> l2 = new ArrayList<City>();
		l2.add(c21);
		l2.add(c22);

		map.put(p2, l2);

		Province p3 = new Province();
		p3.setId(3);
		p3.setName("辽宁");

		City c31 = new City();
		c31.setId(1);
		c31.setName("沈阳");

		City c32 = new City();
		c32.setId(2);
		c32.setName("大连");

		List<City> l3 = new ArrayList<City>();
		l3.add(c31);
		l3.add(c32);

		map.put(p3, l3);
		System.out.println(map);
	}

	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("GetProvince");
		// 处理中文乱码
		response.setCharacterEncoding("utf-8");// 响应乱码
		request.setCharacterEncoding("utf-8"); // 请求中文乱码，只对post请求有效

		String method = request.getParameter("method");
		System.out.println("method" + method);
		// 判断是获取省份信息，还是获取城市信息
		if ("GetProvince".equals(method)) {
			// 获取省份信息
			Set<Province> ps = map.keySet();

			// 将ps转换成json
			String json = JSONObject.toJSONString(ps);
			response.getWriter().write(json);
			System.out.println(json);

		}
		// 要获取城市信息
		if ("GetCitis".equals(method)) {
			// 获取省份名称
			String pname = request.getParameter("pname");

			// 遍历map,根据省份名称来获取对应的List<City>
			for (Province p : map.keySet()) {
				if (pname.equals(p.getName())) {

					List<City> citys = map.get(p);
					// 将citys转换成json响应到浏览器
					String json = JSONObject.toJSONString(citys);

					response.getWriter().write(json);
					break;
				}
			}

		}
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

XStream

可以使用XStream工具来完成xml与java对象之间的转换。它也可以完成java对象与json之间的转换。XStream是Java类库，用来将对象序列化成XML （JSON）或反序列化为对象。

XStream使用时需要导入以下ar包

XStream将java对象转换成xml

XStream的常用方法
方法实现

设置别名
忽略属性（转换时不需要转换的属性）
将类的属性设置成xml中字段的属性

public class XmlTest {

	public static void main(String[] args) {
		Map<Province, List<City>> map = new HashMap<Province, List<City>>();
		// 创建省份
		Province p1 = new Province();
		p1.setId(1);
		p1.setName("黑龙江");

		City c11 = new City();
		c11.setId(1);
		c11.setName("哈尔滨");

		City c12 = new City();
		c12.setId(2);
		c12.setName("大庆");

		List<City> l1 = new ArrayList<City>();
		l1.add(c11);
		l1.add(c12);

		map.put(p1, l1);

		Province p2 = new Province();
		p2.setId(2);
		p2.setName("吉林");

		City c21 = new City();
		c21.setId(1);
		c21.setName("长春");

		City c22 = new City();
		c22.setId(2);
		c22.setName("吉林");

		List<City> l2 = new ArrayList<City>();
		l2.add(c21);
		l2.add(c22);

		map.put(p2, l2);

		Province p3 = new Province();
		p3.setId(3);
		p3.setName("辽宁");

		City c31 = new City();
		c31.setId(1);
		c31.setName("沈阳");

		City c32 = new City();
		c32.setId(2);
		c32.setName("大连");

		List<City> l3 = new ArrayList<City>();
		l3.add(c31);
		l3.add(c32);

		map.put(p3, l3);

		// 使用XStream来完成java对象转换成xml操作
		XStream xstream = new XStream();
		// 设置类或属性别名
		xstream.alias("省份", Province.class);  //类别名
		xstream.alias("城市", City.class);     //类别名
		xstream.aliasField("省份名称", Province.class, "name");  // 属性别名
		xstream.aliasField("城市名称", City.class, "name");  // 属性别名
		xstream.alias("城市列表", java.util.List.class);         // List别名
		
		// 忽略属性
		//xstream.omitField(Province.class, "id"); 
		
		//设置java类中的属性变成节点的属性(属性名称追加到类名后)
		xstream.useAttributeFor(Province.class, "id");
		xstream.useAttributeFor(City.class, "id");

		String xml = xstream.toXML(map);
		System.out.println(xml);
	}
}

<map>
  <entry>
    <省份 id="1">
      <省份名称>黑龙江</省份名称>
    </省份>
    <城市列表>
      <城市 id="1">
        <城市名称>哈尔滨</城市名称>
      </城市>
      <城市 id="2">
        <城市名称>大庆</城市名称>
      </城市>
    </城市列表>
  </entry>
  <entry>
    <省份 id="3">
      <省份名称>辽宁</省份名称>
    </省份>
    <城市列表>
      <城市 id="1">
        <城市名称>沈阳</城市名称>
      </城市>
      <城市 id="2">
        <城市名称>大连</城市名称>
      </城市>
    </城市列表>
  </entry>
  <entry>
    <省份 id="2">
      <省份名称>吉林</省份名称>
    </省份>
    <城市列表>
      <城市 id="1">
        <城市名称>长春</城市名称>
      </城市>
      <城市 id="2">
        <城市名称>吉林</城市名称>
      </城市>
    </城市列表>
  </entry>
</map>

注解实现

设置别名
忽略属性（转换时不需要转换的属性）
将类的属性设置成xml中字段的属性

注意：要想使用XStream的注解，必须开启注解扫描.

		//开启注解扫描
		xstream.autodetectAnnotations(true);

package com.toroidals.json;

import com.thoughtworks.xstream.annotations.XStreamAlias;
import com.thoughtworks.xstream.annotations.XStreamAsAttribute;
import com.thoughtworks.xstream.annotations.XStreamOmitField;

@XStreamAlias("省份")  //起别名
public class Province {

	@XStreamOmitField  //忽略属性
	//@XStreamAsAttribute
	private int id;
	private String name;

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

}





package com.toroidals.json;

import com.thoughtworks.xstream.annotations.XStreamAlias;
import com.thoughtworks.xstream.annotations.XStreamOmitField;

@XStreamAlias("城市")   //设置类名别名
public class City {

	@XStreamAlias("编号")   //设置属性别名
	@XStreamOmitField  //忽略属性
	private int id;
	private String name;

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

}

public class XmlTest {

	public static void main(String[] args) {
		Map<Province, List<City>> map = new HashMap<Province, List<City>>();
		// 创建省份
        ...

		map.put(p3, l3);

		// 使用XStream来完成java对象转换成xml操作
		XStream xstream = new XStream();
		// 设置类或属性别名
		/*
		 * xstream.alias("省份", Province.class); //类别名 xstream.alias("城市", City.class);
		 * //类别名 xstream.aliasField("省份名称", Province.class, "name"); // 属性别名
		 * xstream.aliasField("城市名称", City.class, "name"); // 属性别名 xstream.alias("城市列表",
		 * java.util.List.class); // List别名
		 * 
		 * // 忽略属性 //xstream.omitField(Province.class, "id");
		 * 
		 * //设置java类中的属性变成节点的属性(属性名称追加到类名后) xstream.useAttributeFor(Province.class,
		 * "id"); xstream.useAttributeFor(City.class, "id");
		 */

		//开启注解扫描
		xstream.autodetectAnnotations(true);

		String xml = xstream.toXML(map);
		System.out.println(xml);
	}
}

<map>
  <entry>
    <省份>
      <name>黑龙江</name>
    </省份>
    <list>
      <城市>
        <name>哈尔滨</name>
      </城市>
      <城市>
        <name>大庆</name>
      </城市>
    </list>
  </entry>
  <entry>
    <省份>
      <name>辽宁</name>
    </省份>
    <list>
      <城市>
        <name>沈阳</name>
      </城市>
      <城市>
        <name>大连</name>
      </城市>
    </list>
  </entry>
  <entry>
    <省份>
      <name>吉林</name>
    </省份>
    <list>
      <城市>
        <name>长春</name>
      </城市>
      <城市>
        <name>吉林</name>
      </城市>
    </list>
  </entry>
</map>

案例-返回xml完成省市二级联动

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>案例-省市二级联动</title>
<script type="text/javascript" src="/Ajax/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	$(function() {
		//页面加载完成后向服务器发送请求
		var url="/Ajax/CityServlet"
		$.post(url, {"method": "xml"}, function(data){
			//alert(data); //这时的data它代表的是xml的document对象.
			//将dom对象转换成jquery对象
			var xml = $(data)
			//在xml中查找 省份标签下有name标签的所有name标签
			var names=xml.find("省份 name");
			//遍历所有的name标签
			names.each(function(){
				//得到name标签中的省份名称
				var provinceName=$(this).text();
				$("#province").append("<option>" + provinceName + "</option>");
			});

			//给省份下拉框添加change事件
			$("#province").change(function(){
				//清空city下拉框
				$("#city").html("<option>--选择城市--</option>");
				
				//得到选择的省份名称
				var provinceName=$(this).val();
				//查找对应的provinceName的父元素<省份>
				var province=xml.find("name:contains('"+provinceName+"')").parent();
				//得到 <省份> 标签的下一个标签 <list>
				var list=province.next();
				//得到list标签下的所有子标签name
				var cnames=list.find("name")
				cnames.each(function(){
					var cname=($(this).text());
					$("#city").append("<option>"+cname+"</option>")
				});
				
			});
			
		}, "xml");
	});
		
</script>
</head>
<body>

	<select id="province">
		<option>--选择省份--</option>
	</select>省

	<select id="city">
		<option>--选择城市--</option>
	</select>市
</body>
</html>

public class CityServlet extends HttpServlet {
	private Map<Province, List<City>> map;
	
    ...
		
		//返回xml数据
		if("xml".equals(method)){
			XStream xstream = new XStream();
			//开启注解扫描
			xstream.autodetectAnnotations(true);
			String xml=xstream.toXML(map);
			response.getWriter().write(xml);
		}
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

Ajax跨域问题
什么是跨域

跨域它是不同的域名(服务器)之间的相互的资源的访问。

当协议，域名，端口号任意一个不相同，它们就是不同的域。

正常情况下，因为浏览器安全问题，不同域的资源是不可以访问的。

跨域解决方案

什么情况下会使用到跨域？

一般情况是在自己的内部的工程中会出现跨域情况。

有三种解决方案:

1.代理方案前端页面访问本地的服务器，本地服务器访问其它域的资源，它是服务器端的跨域问题解决。

2.jsonp JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

3.XHR2全称XMLHttpRequest Level2它是HTML5提供的方法，一般是在移动开发中使用。

jQuery解决跨域操作

在jquery中我们可以使用$.ajax,$.getJSON,$.getScript来解跨域问题。

$.ajax解决跨域问题

采用 $.ajax 发送请求后，请求地址后面自动添加了一个callback

关于json与jsonp格式的区别

Json格式 :[value1,value],{name:value}

Jsonp格式: callback(json)

解决方案：将 callback 拼接到返回结果

                String callback=request.getParameter("callback");
		response.getWriter().write(json);
		//response.getWriter().write(callback + "(" + json + ")");

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>案例-显示商品信息</title>
<script type="text/javascript" src="/JspDemo/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	$(function(){
		
		//将div隐藏
		$("#content").hide();
		
		$("#a").toggle(function(){
			//向服务器发送请求，得到商品信息，在页面上展示 
			var url="http://localhost:8080/Ajax/ProductInfo"
			$.ajax({
				url:url,
				type: "post",
				data: "name=toroidals&location=cd",
				dataType: "jsonp",
				success:function(data){
					var jsonObj=eval(data); 
					//[{"count":100,"id":1,"name":"电视机","price":2000},{"count":200,"id":2,"name":"洗衣机","price":1000}]
					//处理响应json数据，封装成table的html代码
					var tab=$("<table border='1'><tr><td>编号</td><td>名称</td><td>数量</td><td>价格</td></tr></table>");
					
					for( var i=0;i<jsonObj.length;i++){
						var obj=jsonObj[i];
						var tr=$("<tr><td>"+obj.id+"</td><td>"+obj.name+"</td><td>"+obj.count+"</td><td>"+obj.price+"</td></tr>");
						//内部插入操作
						tab.append(tr);
					}
					//将table在添加到div中
					$("#content").append(tab);
					
					//显示div
					$("#content").fadeIn(1500);
				}
			});
		},function(){
			//将商品的信息隐藏
			//将div隐藏
			$("#content").fadeOut(1500);
			//清空div
			$("#content").html("");
		});
	});
</script>
</head>
<body>

	<a href="javascript:void(0)" id="a">显示商品信息</a>
	<hr>
	<div id="content">
		
	</div>
</body>
</html>

$.getJSON解决跨域问题

$.getJSON它就是$.ajax解决跨域问题的简化操作。

url,[data],[callback]String,Map,FunctionV1.0

url:发送请求地址。
data:待发送 Key/value 参数。
callback:载入成功时回调函数。

			//向服务器发送请求，得到商品信息，在页面上展示 
			var url="http://localhost:8080/Ajax/ProductInfo?callback=?"
			$.getJSON(url,function(data){
					var jsonObj=eval(data); 
					//[{"count":100,"id":1,"name":"电视机","price":2000},{"count":200,"id":2,"name":"洗衣机","price":1000}]
					//处理响应json数据，封装成table的html代码
					var tab=$("<table border='1'><tr><td>编号</td><td>名称</td><td>数量</td><td>价格</td></tr></table>");
					
					for( var i=0;i<jsonObj.length;i++){
						var obj=jsonObj[i];
						var tr=$("<tr><td>"+obj.id+"</td><td>"+obj.name+"</td><td>"+obj.count+"</td><td>"+obj.price+"</td></tr>");
						//内部插入操作
						tab.append(tr);
					}
					//将table在添加到div中
					$("#content").append(tab);
					
					//显示div
					$("#content").fadeIn(1500);
			});

分页介绍

因为数据量比较大，为了用户有更好的体验。一般情况下，数据在展示时都会进行分页操作。

分页的种类

分页有两种:

1.物理分页 :使用数据库本身提供的分页操作来完成数据查询，查询到的就是当前页的信息。例如mysql可以使用limit oracle数据库可以使用rownum来宛成。这种方案的优点是性能比较好，但是它存在不通用问题。

2.逻辑分页：它是利用数据库的游标来操作（将数据库所有数据都查询出来，存储在内存中），性能比较低，但是它通用。

现在开发中一般使用的比较多的是物理分页。

分页基本原理

分页实现可以使用ajax分页，也可以使用服务器端分页，它们原理是一样的。

Mysql中的limit如何完成分页数据查询操作
Select * from 表名 limit num1,num2;
Num1代表的是从第几行开始查询，起始值是0.
Num2代表的是要查询几条记录。
例如查询第二页数据(每页显示5条)
Select * from product limit (页码-1)*每页条数,(每页条数);

完成分页操作必备条件:

页码pageNo 默认是1 会根据上一页，下一页，首页尾页选择变化，我们通过js来控制。
每页显示条数pageSize 人为设置。
总条数
总页数=总条数/每页显示条数 (要取整)
封装的当前页的数据。

JAVAEE三层架构

采用三层架构优点:利用开发与复用结构清晰，利用标准化。

三层:

Web层：它主要包含的关于javaweb相关操作，例如request,response,session对象操作，它调用业务层来实现具体的功能。
业务层(service层):它主要是业务逻辑操作，它不包含web常用对象，它只是java代码。
数据访问层(dao层):它主要是与数据库进行交互，完成crud操作。

缺点:开发难度加大，性能得到一定的消耗。

Bootstrap分布组件使用介绍

bootstrap官网：https://www.bootcss.com/

注意：在使用bootstrap的分页组件时，需要导入相关的css文件与js文件，并且bootstrap它依赖于jquery,在导入bootstrap的js文件前要导入jquery的js文件，并且它的版本要求必须是1.9.1以上版本.

代码实现

导入相关jar包

C3p0连接池jar

Dbutils

json处理的相关jar包

mysql的驱动jar

不分页展示

public class ShowAll extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException{
		// 处理响应数据中文乱码
		response.setContentType("text/html;charset=UTF-8");
		// 查询所有的产品，得到List<Product>对象，转换成json响应到浏览器
		ProductService service = new ProductService();
		try {
			List<Product> products = service.showAll();
			// 将ps转换成json响应到浏览器
			String json = JSONObject.toJSONString(products);
			System.out.println(json);
			response.getWriter().write(json);

		} catch (SQLException e) {
			e.printStackTrace();
			// 向浏览器发送一条描述错误信息的json数据
		}
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}



public class ProductService {
        ...
	public List<Product> showAll() throws SQLException {
		ProductDAO dao = new ProductDAO();
		List<Product> products = dao.showAll();
		return products;
	}
}




public class ProductDAO {
    ...
    public List<Product> showAll() throws SQLException {
		QueryRunner runner = new QueryRunner(JdbcUtils.getDataSource());

		return runner.query("select * from product", new BeanListHandler<Product>(Product.class));
	}
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" href="/ShowProduct/bootstrap/css/bootstrap.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="/ShowProduct/jquery/jquery-1.11.3.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="/ShowProduct/bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript">
	//页面加载 无成后，要向服务器发送请求，来获取产品信息，在table中显示出来
	$(function(){
		var url="/ShowProduct/ShowAll"
		$.post(url, function(data){
			var json = eval(data);
			//将json数据遍历转换成对应的html代码插入到table中。
			$(json).each(function(){
				$("#tab").append($("<tr><td>"+this.id+"</td><td>"+this.name+"</td><td>"+this.count+"</td><td>"+this.price+"</td></tr>"));
			});
		}, "json");
	});

</script>


<style type="text/css">
div {
	width: 70%;
	margin-left: 200px;
	margin-top: 100px;
}
</style>
</head>
<body>
<div align="center">
	<table class="table table-bordered" id="tab">
		<tr>
			<td>序号</td>
			<td>名称</td>
			<td>数量</td>
			<td>价格</td>
	    </tr>
	</table>
</body>
</html>

分页展示

public class PageBean<T> {

	private int pageNo; // 页码
	private int pageSize; // 每页显示条数
	private int totalPage; // 总页数
	private int totalCount; // 总条数
	private List<T> content; // 当前页显示的数据
        ...
}

public class ShowPage extends HttpServlet {
	
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 处理响应数据中文乱码
		response.setContentType("text/html;charset=UTF-8");
		// 查询对应的产品，得到List<Product>对象，转换成json响应到浏览器
		int pageNo = Integer.parseInt(request.getParameter("pageNo"));
		int pageSize = Integer.parseInt(request.getParameter("pageSize"));
		ProductService service = new ProductService();
		PageBean pageBean;
		try {
			pageBean = service.showPage(pageNo, pageSize);
			// 将products转换成json响应到浏览器
			String json = JSONObject.toJSONString(pageBean);
			System.out.println(json);
			response.getWriter().write(json);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}




public class ProductService {
        ...
    	public PageBean showPage(int pageNo, int pageSize) throws SQLException {
		ProductDAO dao = new ProductDAO();
		PageBean pageBean = new PageBean();
		// 查询的分页的产品信息
		List<Product> products = dao.showPage(pageNo, pageSize);
		
		// 查询的总条数
		int totalCount = dao.queryCount();
		
		// 计算总页数
		int totalPage = (int) Math.ceil((totalCount * 1.0) / pageSize);
//		private int pageNo; // 页码
//		private int pageSize; // 每页显示条数
//		private int totalPage; // 总页数
//		private int totalCount; // 总条数
//		private List<T> content; // 当前页显示的数据
		pageBean.setPageNo(pageNo);
		pageBean.setPageSize(pageSize);
		pageBean.setTotalCount(totalCount);
		pageBean.setTotalPage(totalPage);
		pageBean.setContent(products);
		System.out.println(pageBean.toString());
		return pageBean;
	}
}




public class ProductDAO {
        ...
	public List<Product> showPage(int pageNo, int pageSize) throws SQLException {
		QueryRunner runner = new QueryRunner(JdbcUtils.getDataSource());
		Integer startIndex = (pageNo - 1)*pageSize;
		List<Product> products = runner.query("select * from product limit ?,?", new BeanListHandler<Product>(Product.class), startIndex, pageSize);
		return products;
	}

	public int queryCount() throws SQLException {
		QueryRunner runner = new QueryRunner(JdbcUtils.getDataSource());
		Long count = (Long) runner.query("select count(*) from product", new ScalarHandler());
		return count.intValue();
	}
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" href="/ShowProduct/bootstrap/css/bootstrap.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="/ShowProduct/jquery/jquery-1.11.3.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="/ShowProduct/bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript">

	var pageNo = 1; //默认第一页
	var pageSize = 5;//每页显示条数
	var totalPage = 5; //总页数
	var totalCount = 0; //总条数
	//页面加载 无成后，要向服务器发送请求，来获取产品信息，在table中显示出来
	$(function() {
		skipPage(pageNo);
	});
	
	//处理跳转页面
	function skipPage(pageNum) {
		pageNo = pageNum;
		var url="/ShowProduct/ShowPage";
		$.post(url,{
							"pageNo" : pageNo,
							"pageSize" : pageSize
						},
						function(data) {
							var json = eval(data);
							var jsonObj = json.content; //得到分页数据
							//将页码  每页条数  总条数，总页数与服务器响应的数据同步
							paqgeNo = json.pageNo;
							pageSize = json.pageSize;
							totalPage = json.totalPage;
							totalCount = json.totalCount;
	
							//将json数据遍历转换成对应的html代码插入到table中。
							var html = "";
							for (var i = 0; i < jsonObj.length; i++) {
								html += "<tr>";
								html += "<td>" + jsonObj[i].id + "</td><td>"
										+ jsonObj[i].name + "</td><td>"
										+ jsonObj[i].count + "</td><td>"
										+ jsonObj[i].price + "</td>";
								html += "</tr>";
							}
							//展示分页条数据
							var pageMsg = "<ul class='pagination pagination-sm'>";
	
							//处理上一页操作
							if (pageNo == 1) {
								//上一页操作不可以点击
								pageMsg += "<li class='disabled'><a href='#'>&laquo;</a></li>";
							} else {
	
								pageMsg += "<li><a href='javascript:void(0)' onclick=skipPage("
										+ (pageNo - 1) + ")>&laquo;</a></li>";
							}
	
							for (var i = 0; i < totalPage; i++) {
	
								//判断页码与(i+1)是否一致,一致就代表当前页码要高亮显示
								if (i + 1 == pageNo) {
									pageMsg += "<li class='active'><a href='javascript:void(0)' onclick='skipPage("
											+ (i + 1)
											+ ")'>"
											+ (i + 1)
											+ " <span class='sr-only'>(current)</span></a></li>";
								} else {
									pageMsg += "<li><a href='javascript:void(0)' onclick='skipPage("
											+ (i + 1)
											+ ")'>"
											+ (i + 1)
											+ "</a></li>";
								}
	
							}
							//处理下一页操作
							if (pageNo == totalPage) {
								pageMsg += "<li class='disabled'><a href='#'>&raquo;</a></li>";
							} else {
								pageMsg += "<li><a href='javascript:void(0)' onclick='skipPage("
										+ (pageNo + 1) + ")')>&raquo;</a></li>";
							}
							pageMsg += "</ul>";
	
							//清空table中的数据，让它恢复成原始状态
							$("#tab").html("<tr><td>序号</td>	<td>名称</td><td>数量</td>	<td>价格</td>	</tr><tr><td colspan='4'><nav id='n'></nav></td></tr>");
	
							$("#n").append(pageMsg);
	
							$("#tab tr:nth-child(1)").after(html);
	
						}, "json");
	}

</script>


<style type="text/css">
div {
	width: 70%;
	margin-left: 200px;
	margin-top: 100px;
}
</style>
</head>
<body>
<div align="center">
	<table class="table table-bordered" id="tab">
		<tr>
			<td>序号</td>
			<td>名称</td>
			<td>数量</td>
			<td>价格</td>
	    </tr>
	</table>
</body>
</html>

jQuery扩展 serialize与serializeArray
serialize:它的作用是将表单的数据序列化

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="/ShowProduct/jquery/jquery-1.11.3.js"></script>
<script type="text/javascript">
	$(function(){
		var info = $("#f").serialize();  //将表单的数据序列化成请求的参数 name=value&name=value
		alert(info);
	});
	
</script>
</head>
<body>
<form id="f" actopm="#" method="post">
	username:<input type="text" name="username" value="toroidal"><br>
	password:<input type="password" name="username" value="123456"><br>
</form>
</body>
</html>

serializeArray:将表单序列化，返回的是json数据格式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="/ShowProduct/jquery/jquery-1.11.3.js"></script>
<script type="text/javascript">
	$(function(){
		var info = $("#f").serializeArray();
		//将表单信息序列化成json数据:
		//[Object { name="username",  value="tom"}, Object { name="password",  value="123"}]
		//想要的是这样格式{username=tom,password=123}
		console.info(info); //将信息打印到浏览器的控制台  
	});
	
</script>
</head>
<body>
<form id="f" actopm="#" method="post">
	username:<input type="text" name="username" value="toroidal"><br>
	password:<input type="password" name="username" value="123456"><br>
</form>
</body>
</html>

插件机制与自定义插件

在开发中使用jquery,除了它本身提供的API,我们更多的还会使用jquery的插件。

例如jquery easyui….

jQuery.extend();

上面这个是扩展jquery全局对象本身 $.post $.ajax $.get

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery.extend</title>

<script src="/ShowProduct/jquery/jquery-1.11.3.js"></script>
<script type="text/javascript">
	//对全局的jquery对象扩展(插件)
	$.extend({
		maxValue:function(a,b){
			return a>b?a:b;
		},
		minValue:function(a,b){
			return a>b?b:a;
		}
	});
	
	//页面加载完成后操作
	$(function() {
		alert($.maxValue(10,20));
		alert($.minValue(10,20));
	});
</script>
</head>
<body>

</body>
</html>

jQuery.fn.extend();

上面这个是扩展jquery对象 $(“#f”).find() $(“abc”).val() 通过创建一个插件完成表单数据转换成json操作

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery.fn.extend</title>

<script src="/ShowProduct/jquery/jquery-1.11.3.js"></script>
<script type="text/javascript">
	//定义一个jquery的插件，完成表单转换成json操作-----{username:tom,password:123}
	$.fn.extend({
		serializeJson:function(){
			
			var json={}; //就是一个javascript的对象.
			
			//1.通过jquery提供的serializeArray方法得到不符合要求的json串
			var msg=this.serializeArray();
			//console.info(msg);  //[Object { name="username",  value="tom"}, Object { name="password",  value="123"}]
			$(msg).each(function(){
				json[this.name]=this.value
			});
			
			return json
		}
	});
	//页面加载完成后操作
	$(function() {
		var json=$("#f").serializeJson();
		console.info(json);
	});
</script>
</head>
<body>
	<form id="f" action="#" method="post">
		username:<input type="text" name="username" value="tom"><br>
		password:<input type="password" name="password" value="123"><br>
		<input type="submit" value="login">
	</form>
</body>
</html>

如果表单中出现一个名称对应多个值的元素，怎样处理

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery.fn.extend</title>

<script src="/ShowProduct/jquery/jquery-1.11.3.js"></script>
<script type="text/javascript">
	//定义一个jquery的插件，完成表单转换成json操作-----{username:tom,password:123,hobby:[eat,drink,play]}
	$.fn.extend({
		serializeJson : function() {
			var json = {}; //就是一个javascript的对象.
			//1.通过jquery提供的serializeArray方法得到不符合要求的json串
			var msg = this.serializeArray();
			//console.info(msg);  
			//[Object { name="username",  value="tom"}, Object { name="password",  value="123"}, Object { name="hobby",  value="eat"}, Object { name="hobby",  value="drink"}, Object { name="hobby",  value="play"}]
			$(msg).each(function() {
				if (json[this.name]) { //在json对象中没有this.name对应的值
					//有,需要考虑一个名称对应多个值，而这些值应该放入到数组中
					if (!json[this.name].push) { //如果为true,代表是数组,如果为false，代表不是数组
						json[this.name] = [ json[this.name] ]; //创建数组
					}
					//装入到数组
					json[this.name].push(this.value || ''); // this.value || ''如果 this.value 不存在 则将其用空代替

				} else {
					//没有
					json[this.name] = this.value || '';
				}
			});

			return json
		}
	});
	//页面加载完成后操作
	$(function() {
		var json = $("#f").serializeJson();
		console.info(json);
	});
</script>
</head>
<body>
	<form id="f" action="#" method="post">
		username:<input type="text" name="username" value="tom"><br>
		password:<input type="password" name="password" value="123"><br>
		hobby:<input type="checkbox" name="hobby" value="eat"
			checked="checked">吃 <input type="checkbox" name="hobby"
			value="drink" checked="checked">喝 <input type="checkbox"
			name="hobby" value="play" checked="checked">玩 <input
			type="submit" value="login">
	</form>
</body>
</html>

Toroidals

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
javaWeb-3 jQuery、Ajax

jQuery jQuery概述 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML...
复制链接

扫一扫