jQuery入门与插件、ajax数据交互

尽力漂亮

于 2019-07-27 21:25:48 发布

阅读量373

点赞数

分类专栏：前端文章标签： Jquery

本文链接：https://blog.csdn.net/weixin_44106334/article/details/97410931

版权

前端专栏收录该内容

34 篇文章 2 订阅

订阅专栏

一.入门jQuery

1.什么是jQuery

它是一个轻量级的javascript类库

就是一个类“jQuery”，简写“$”

2.jQuery优点

2.1  总是面向集合
2.2  多行操作集于一行

3. hello jQuery

3.1   导入js库（<script type="text/javascript" src=""></script>）

3.2   $(fn)做为程序入口

代码演示
（官网下载）导入jar包
在这里插入图片描述
导入js库

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>

案例1：(fn)、(document).ready(fn)与window.onload的区别？主要项目维护的时候用

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--  src:全路径名的好处，更改时不会出错-->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
 /* jquery入门程序 */
 /*$(fn)、$(document).read(fn)与window.onload的区别  */
  

    $(function(){
	   alert("hello jquery1");
   })
  $(document).ready(function(){
	  alert("hello jquery2");
  }) 
  window.onload = function(){
	 alert("hello jquery3");
  } 
  
</script>

</head>
<body>

</body>
</html>

问：先后顺序
答：jquery1快于jquery2快于jquery3

<script type="text/javascript">
 /* jquery入门程序 */
 /*$(fn)、$(document).read(fn)与window.onload的区别  */
  
    window.onload = function(){
	 alert("hello jquery3");
  } 
  
  $(document).ready(function(){
	  alert("hello jquery2");
  }) 
   $(function(){
	   alert("hello jquery1");
   })
   

</script>

问：先后顺序
结果：2>1>3

结论：1. $(f n) 、$ (document).read(fn)是等价的，哪个代码在前面就哪个先执行，jsp的dom树结构加载完毕即刻调用方法，
window.onload最后执行
2. jsp的dom树加载完，css,js等静态资源加载完毕执行

4. jQuery三种工厂方法（Demo2.jsp）

4.1. 常见的选择器：
css选择器
标签选择器
ID选择器
类选择器

包含选择器：E1 E2
组合选择器：E1,E2,E3

自定义选择器：:exp
jQuery类

package com.wxm;
/**
 * 
 *  4. jQuery三种工厂方法	（demo2.jsp）
 * @author 2019071003
 *
 */
public class JQuery {
	public final static int xxx = 33;
	  public int aaa = 33;
	  
	  public static void bbb() {
		  
	  }
	  
	  public void ccc() {
		  
	  }
	  
	  public static void main(String[] args) {
		
	}
}

demo2:

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript">
  $(function (){
	//利用a标签jquery实例
	$("a").click(function(){
		alert("点开了");
	});
  })
</script>
</head>
<body>
<p>
		<a id="a1" class="c1" href="#">点我1</a>
	</p>
	<p>
		<a id="a2" class="c2" href="#">点我2</a>
	</p>
	<p>
		<a id="a3" class="c3" href="#">点我3</a>
	</p>
	<div>
		<a id="a4" class="c1" href="#">点我4</a>
	</div>
	<div>
		<p>
			<a id="a5" class="c1" href="#">点我5</a>
		</p>
	</div>
<span>点我</span>
</body>
</html>

运行结果

在这里插入图片描述
jquery好处：代码缩减了

代码演示

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript">
  $(function (){
	//利用a标签jquery实例
	/* $("a").click(function(){
		alert("点开了");
	}); */
	
	//利用id=a3获取jquery实例(**id选择器**)
	/* $("#a3").click(function(){
		alert("点开了");
	}); */
	
	  //class=c1类选择器
	 /*  $(".c1").click(function(){
		  alert("点开了类选择器");
	  }) */
	  
	  
	  //包含选择器(p里面包含a)
	/*  $("p a").click(function(){
		 alert("点开了包含选择器");
	 }) */
	  //组合选择器 (可以不同加入多个事件)
  /*    $("a,span").click(function(){
    	 alert("点开了组合选择器");
     }) */

  })
</script>
</head>
<body>
<p>
		<a id="a1" class="c1" href="#">点我1</a>
	</p>
	<p>
		<a id="a2" class="c2" href="#">点我2</a>
	</p>
	<p>
		<a id="a3" class="c3" href="#">点我3</a>
	</p>
	<div>
		<a id="a4" class="c1" href="#">点我4</a>
	</div>
	<div>
		<p>
			<a id="a5" class="c1" href="#">点我5</a>
		</p>
	</div>
<span>点我</span>
</body>
</html>

在这里插入图片描述

如果要在div容器里面的a标签加入事件

4.2 jQuery(html) （demo3.jsp）

   **作用（用途）：js对象与html的相互转换**
html：基于html的一个字符串

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--  src:全路径名的好处，更改时不会出错-->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
	//自定义选择器
	$(":input[name='name1']").click(function(){
		//在id=selId1的select的JQuery实例追加"<option value='1'>湖南省</option>"
		 $("#selId1").append("<option value='1'>湖南省</option>");
	});
	$(":input[name='name1']").click(function(){
	  //将"<option value='1'>长沙</option>"的html jquery实例追加到id=selId2的select标签jquery实例中
     // $("#selId2").append("<option value='1'>长沙</option>");
      $("<option value='1'>长沙</option>").appendTo("#selId2");

	});
})

</script>
</head>
<body>


	<select id="selId1">
		<option value="-1">---请选择---</option>
	</select>
	<select id="selId2">
		<option value="-1">---请选择---</option>
	</select>
	<input name="name1" value="add1" type="button">
	<input name="name2" value="add2" type="button">
	
	<input type="hidden" id="h1" value="h1">
	<input type="hidden" id="h2" value="h2">
	<input type="hidden" id="h3" value="h3">
</body>
</html>

在这里插入图片描述

相当于

public Jquery(int html) {
	super();
	this.aaa = html;
}

重点

4.3 jQuery(element) （demo3.jsp）

element：js对象，表示一个html元素对象

   **作用（用途）：js对象与jquery对象的相互转换**

注意：$就是jQuery简写

在这里插入图片描述

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--  src:全路径名的好处，更改时不会出错-->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
	//自定义选择器
	$(":input[name='name1']").click(function(){
		//在id=selId1的select的JQuery实例追加"<option value='1'>湖南省</option>"
		 $("#selId1").append("<option value='1'>湖南省</option>");
	});
	$(":input[name='name1']").click(function(){
	  //将"<option value='1'>长沙</option>"的html jquery实例追加到id=selId2的select标签jquery实例中
     // $("#selId2").append("<option value='1'>长沙</option>");
    $("<option value='1'>长沙</option>").appendTo("#selId2");
    
    /* var $h1= $("#h1");
      alert($h1.val());
      //jQuery对象转js对象
      var h1Node = $h1.get(0);//第一种：js对象看成一个集合 
      var h1Node = $h1[0];//第二种：js对象看成一个数组
      alert(h1Node.value); */
      
    var h2Node =document.getElementById("h2");
   // alert(h2Node.value);  
    
    //注意在开发中分清楚是js对象还是jquery对象
      //js对象转jQuery对象
     var  $h2Node=$(h2Node);
     alert($h2Node.val());  
	});
})

</script>
</head>
<body>


	<select id="selId1">
		<option value="-1">---请选择---</option>
	</select>
	<select id="selId2">
		<option value="-1">---请选择---</option>
	</select>
	<input name="name1" value="add1" type="button">
	<input name="name2" value="add2" type="button">
	
	<input type="hidden" id="h1" value="h1">
	<input type="hidden" id="h2" value="h2">
	<input type="hidden" id="h3" value="h3">
</body>
</html>

在这里插入图片描述
点击add1会弹框提示好,h1,h2,h2

5. jQuery程序的入口

$(document).ready(fn)
$(fn);

6. this指针的作用

6.1 事件源（获取当前按钮的按钮值）

 <script type="text/javascript">
  $(function (){
	$(":input").click(function(){
		alert(this.value);
	});
     
  })
</script>

在这里插入图片描述

6.2 当前元素（点击按钮，获取所有a标签的值）

<script type="text/javascript">
  $(function (){
	$(":input").click(function(){
		alert(this.value);
		//获取所有的a标签
		$("a").each(function(){
			//指是的当前元素
			alert($(this).html());
		}); 
		
		//获取所有的a标签,加上参数
	 $("a").each(function(index,item){
		//指是的当前元素
		alert(index+","+$(this).html()+","+$(item).html());
	}); 
	}); 
     
  })
</script>

在这里插入图片描述

7、使用jquery动态给table添加样式`在这里插入代码片`

核心代码

<script type="text/javascript">
$(function(){
	$("table tr:eq(0)").addClass("yello");
	$("table tr:gt(0)").addClass("red");//大于0hang 
	
})


</script>

在这里插入图片描述

二.jQuery插件

1. 插件机制简介

往jquery类库里面去扩展方法，这类方法就是jquery插件

2. json的三种格式

2.1 对象

var jsonObj1={
			sid:"s001",
			snanme:'zhangsan'
	}

2.2 列表/数组

	var jsonArray1=[1,3,4,7];

2.3 混合模式

var jsons={id:3,hobby:['a','b','c']};

代码演示

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>

<script type="text/javascript">
$(function(){
	//json对象的字符串体现形式
	var jsonObj1={
			sid:"s001",
			snanme:'zhangsan'
	}
	console.log(jsonObj1);
	//json数组的字符串体现形式
	var jsonArray1=[1,3,4,7];
	console.log(jsonArray1);
	//json混合模式的字符串体现模式
	var jsons={id:3,hobby:['a','b','c']};
	console.log(jsons);
})
</script>
<title>Insert title here</title>
</head>
<body>

</body>
</html>

在这里插入图片描述

3. 插件基础：$ .extend和$.fn.extend

2.1 $ .extend对象的扩展(或继承)

$.extend(obj1,obj2,obj3[,…])
$.extend(obj1,obj2)
$ .extend(obj1)/$.method=function(options){…};

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>

<script type="text/javascript">
$(function(){
	//json对象的字符串体现形式
	var jsonObj1={
			sid:"s001",
			snanme:'zhangsan'
	}
	console.log(jsonObj1);
	//json数组的字符串体现形式
	var jsonArray1=[1,3,4,7];
	console.log(jsonArray1);
	//json混合模式的字符串体现模式
	var jsons={id:3,hobby:['a','b','c']};
	console.log(jsons);
	
	
	var jsonObj3={
		sid:'s002',	
		sname:'list',
		hobby:['a','b','c']
	};
	//$.extends是用来扩展Jquery类属性或者方法所用
	var jsonObj2={};
	//用后面的对象扩充第一个对象
	//$.extend(jsonObj2,jsonObj1);
	//讲解值覆盖的问题，之前已经扩充的属性值会被后面的对象所覆盖，如果后面对象有新的属性，会继续扩充
	//还能对个扩充1和扩充2
	$.extend(jsonObj2,jsonObj1,jsonObj3);
	console.log(jsonObj1);
})
</script>
<title>Insert title here</title>
</head>
<body>

</body>
</html>

在这里插入图片描述

2.2 $.fn.extend

$. f n . e x t e n d (o b j 1) / /$ .fn.method=function(options){…};

<script type="text/javascript">
$(function(){
 $.extend({
		hello:function(){
			alert("来了");
		}
		
	});
	$.hello();
	//$.fn.extend是用来扩充jquery实例的属性或者方法所用
	$.fn.extend({
		sayHello:function(){
			alert("想你");
		}
	});
	$("#pink").sayHello();
	alert("pink");
	})
</script>

测试
在这里插入图片描述

总结：最常用的类方法拓展的比较少，一般类属性拓展比较多，实例方法
关于类的用的属性，关于实例用的是方法

4. jQuery插件的添加

其实就是给jQuery添加新的实例方法或类方法，然后将功能封闭在其中

5. jQuery插件开发实例

5.1 命名
jquery.xxx.js
5.2 扩展实例方法
5.3 如何面向集合
5.4 如何多行集于一行
5.5 命名参数的写法
$.extend(defaults,options);

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<style type="text/css">
	  

.over{
	background:  #ff66ff;
}
.out{
	background: #ffff66;
}
.head{
	background: #ff3333;
}
</style>
<script type="text/javascript">
$(function(){
	$("table").each(function(){
		//给默认值
		$("tr:eq(0)",this).addClass("head");
		$("tr:gt(0)",this).addClass("out");
		//添加动态效果
		$("tr:gt(0)",this).hover(function(){
			 $(this).removeClass().addClass('over');
		},function(){
			 $(this).removeClass().addClass('out');
		});
		
	});
	
})


</script>
<title>Insert title here</title>
</head>
<body>
	<table border="1" width="100%">
		<tr>
			<td>书名</td>
			<td>作者</td>
			<td>点击量</td>
		</tr>
		<tr>
			<td>圣墟</td>
			<td>辰东</td>
			<td>10万</td>
		</tr>
		<tr>
			<td>飞剑问道</td>
			<td>我吃西红柿</td>
			<td>11万</td>
		</tr>
		<tr>
			<td>杀神</td>
			<td>逆苍天</td>
			<td>22万</td>
		</tr>
		<tr>
			<td>龙王传说</td>
			<td>唐家三少</td>
			<td>18万</td>
		</tr>
		<tr>
			<td>斗破苍穹</td>
			<td>天蚕拖豆</td>
			<td>1万</td>
		</tr>
	</table>
</body>
</html>

在这里插入图片描述

需求：客户要求变颜色：
如何简化代码

定义插件
创建文件
在这里插入图片描述
jquery.table.css样式

@charset "UTF-8";
.fen {
	background: #ff66ff;
}

.yellow {
	background: #ffff66;
}

.red {
	background: #ff3333;
}

.blue {
	background: #9999ff;
}

.green {
	background: #bbff99;
}
.hui {
	background: #d6d6c2;
}

jquery.table.js写插件
代码如下

$(function(){
	var defaults = {
			head : 'fen',
			out  : 'yellow',
			over : 'red'
	}
	$.fn.extend({
		//使用return的原因是让该实例方法支持链编程，好比stringbuffer
		bgColor:function(option){
			$.extend(defaults,option);
			//这里的this指的是插件本身，可以看成一个jquery实例。
			return this.each(function(){
				//this指的是当前元素
				$("tr:eq(0)",this).addClass(defaults.head);
				$("tr:gt(0)",this).addClass(defaults.out);
				
				//添加动态效果
				$("tr:gt(0)",this).hover(function(){
					$(this).removeClass().addClass(defaults.over);
				},function(){
					$(this).removeClass().addClass(defaults.out);
				});
			});
		}
	});
})

引入这两个外部文件

<!--引入css  -->
<link href="${pageContext.request.contextPath }/jquery/table/css/jquery.table.css" type="text/css" rel="stylesheet"/>
<!-- 引入js -->
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery/table/js/jquery.table.js"></script>

代码演示

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<!--引入css  -->
<link href="${pageContext.request.contextPath }/jquery/table/css/jquery.table.css" type="text/css" rel="stylesheet"/>
<!-- 引入js -->
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery/table/js/jquery.table.js"></script>
<script type="text/javascript">
$(function(){
	$("table").bgColor({
		head:"blue",
		out:"green",
		over:"hui"
	});
		
	
})


</script>
<title>Insert title here</title>
</head>
<body>
	<table border="1" width="100%">
		<tr>
			<td>书名</td>
			<td>作者</td>
			<td>点击量</td>
		</tr>
		<tr>
			<td>圣墟</td>
			<td>辰东</td>
			<td>10万</td>
		</tr>
		<tr>
			<td>飞剑问道</td>
			<td>我吃西红柿</td>
			<td>11万</td>
		</tr>
		<tr>
			<td>杀神</td>
			<td>逆苍天</td>
			<td>22万</td>
		</tr>
		<tr>
			<td>龙王传说</td>
			<td>唐家三少</td>
			<td>18万</td>
		</tr>
		<tr>
			<td>斗破苍穹</td>
			<td>天蚕拖豆</td>
			<td>1万</td>
		</tr>
	</table>
</body>
</html>

效果

在这里插入图片描述
解决：当客户需要更改颜色时，只需要该改如下

架构优化

创建文件：
抽取头部文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE>
<link href="${pageContext.request.contextPath }/jquery/table/css/jquery.table.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery/table/js/jquery.table.js"></script>

通过jsp指令来引入
如图：在这里插入图片描述

三.ajax

jax)

1. jackson

Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象
和xml文档，同样也可以将json、xml转换成Java对象
在这里插入图片描述

Teacher

package com.wxm;

import java.util.HashSet;
import java.util.Set;

public class Teacher {
	 private String tid;
	   private String sname;
	   private Set<Student> stus = new HashSet<>();
	public String getTid() {
		return tid;
	}
	public void setTid(String tid) {
		this.tid = tid;
	}
	public String getSname() {
		return sname;
	}
	public void setSname(String sname) {
		this.sname = sname;
	}
	public Set<Student> getStus() {
		return stus;
	}
	public void setStus(Set<Student> stus) {
		this.stus = stus;
	}
	public Teacher(String tid, String sname, Set<Student> stus) {
		super();
		this.tid = tid;
		this.sname = sname;
		this.stus = stus;
	}
	public Teacher() {
		super();
	}
	@Override
	public String toString() {
		return "Teacher [tid=" + tid + ", sname=" + sname + ", stus=" + stus + "]";
	}
}

Student

package com.wxm;

import java.util.HashSet;
import java.util.Set;

public class Student {
	 private String sid;
	 private String sname;
	 private Set<Teacher> teas = new HashSet<>();
	public String getSid() {
		return sid;
	}
	public void setSid(String sid) {
		this.sid = sid;
	}
	public String getSname() {
		return sname;
	}
	public Set<Teacher> getTeas() {
		return teas;
	}
	public void setTeas(Set<Teacher> teas) {
		this.teas = teas;
	}
	public void setSname(String sname) {
		this.sname = sname;
	}
	public Student(String sid, String sname) {
		super();
		this.sid = sid;
		this.sname = sname;
	}

	public Student(String sid, String sname, Set<Teacher> teas) {
		super();
		this.sid = sid;
		this.sname = sname;
		this.teas = teas;
	}
	public Student() {
		super();
	}
	@Override
	public String toString() {
		return "Student [sid=" + sid + ", sname=" + sname + ", teas=" + teas + "]";
	}
}

demo

package com.wxm;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

/**
 * 后台json的三种格式的体现形式
 * @author 2019071003
 *
 */
public class Demo1 {
public static void main(String[] args) throws JsonProcessingException {
	//json对象
	Student stu1=new Student("s001", "小明");
	ObjectMapper om=new ObjectMapper();
	System.out.println(om.writeValueAsString(stu1));
	//json数组
	Student stu2=new Student("s002","小白");
	List<Student> list1=new ArrayList<>();
	list1.add(stu1);
	list1.add(stu2);
	System.out.println(om.writeValueAsString(list1));
	
	//json混合形式
	Map<String, Object> map=new HashMap<String, Object>();
	map.put("total", 2);
	map.put("stus", list1);
	System.out.println(om.writeValueAsString(map));
	
}
}

在这里插入图片描述

json基础,后台版的json格式，用jquery把这种形式传入到前台显示

2. jackson将java–>json

2.1 JavaBean/Map
{}
2.2 数组/List/Set
[]
2.3 类里嵌类
混合模式
代码演示对比

package com.wxm;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

/**
 * 后台json的三种格式的体现形式
 * @author 2019071003
 *
 */
public class Demo1 {
public static void main(String[] args) throws JsonProcessingException {
	//json对象
	Student stu1=new Student("s001", "小明");
	ObjectMapper om=new ObjectMapper();
	System.out.println(om.writeValueAsString(stu1));
	//json数组
	Student stu2=new Student("s002","小白");
	List<Student> list1=new ArrayList<>();
	list1.add(stu1);
	list1.add(stu2);
	System.out.println(om.writeValueAsString(list1));
	
	//json混合形式
	Map<String, Object> map=new HashMap<String, Object>();
	map.put("total", 2);
	map.put("stus", list1);
	System.out.println(om.writeValueAsString(map));
	
}
}

在这里插入图片描述

package com.wxm;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.mysql.fabric.xmlrpc.base.Array;
/**
 * javaBean(实体类)与Map集合转换成json字符串格式是一样的

 * @author 2019071003
 *
 */
public class Demo2 {
public static void main(String[] args) throws JsonProcessingException {
	Map<String, Object> stu1=new HashMap<String, Object>();
	stu1.put("sid","s001");
	stu1.put("sname", "小明");
	ObjectMapper om=new ObjectMapper();
	System.out.println(om.writeValueAsString(stu1));
	
	
	//{"sid":"s001","sname":"小明"}
	Map<String,Object> stu2=new HashMap<String,Object>();
	stu2.put("sid","s002");
	stu2.put("sname","小可爱");
	List<Map<String, Object>> list1=new ArrayList<Map<String,Object>>();
	list1.add(stu1);
	list1.add(stu2);
	System.out.println(om.writeValueAsString(list1));
	
//	[{"sname":"小明","sid":"s001"},{"sname":"小可爱","sid":"s002"}]

 }
}

在这里插入图片描述

结果和上面1的一样，map是无序

3. java->json死循环

@JsonIgnore/程序控制
代码演示
学生和老师是多对多的关系，用如下类描写

Student
Teacher这两个实体类前面提到了


    package com.wxm;

import java.util.HashSet;
import java.util.Set;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

public class Demo3 {
public static void main(String[] args) throws JsonProcessingException {
	Student stu1=new Student("s001","小猪");
	Student stu2=new Student("s002","小熊");
	Teacher tea1=new Teacher("t001", "李宁", null);
	Teacher tea2=new Teacher("t002", "刘翔", null);
	Set<Teacher> teas=new HashSet<>();
	teas.add(tea1);
	teas.add(tea2);
	stu1.setTeas(teas);
	Set<Student> stus=new HashSet<>();
	stus.add(stu1);
	stus.add(stu2);
	tea1.setStus(stus);
	ObjectMapper om=new ObjectMapper();
	System.out.println(om.writeValueAsString(stu1));
	
	
	
	
}
}

异常解决
名词解释：StackOverflowError：栈溢出错误
程序详解：

在这里插入图片描述

彼此之间相互调用

在这里插入图片描述
因为Teachers是属于list的，把大范围的对象放到子范围的对象中，明显是一个死递归,栈满了

解决：
json死循环问题

由双向绑定改成单向绑定，也就是说将彼此之间的关系交于一方维护
@JsonIgnore:将彼此循环调用的属性忽略，不参与对象转成json格式
去Teacher加上如下：

@JsonIgnore

在这里插入图片描述
再重新运行一次
运行结果：

4. $.ajax实现省市联动

利用map集合存储数据，然后利用把数据以json格式传入前台，然后jsp页面利用ajax接收，转译Json格式，然后给市和县添加change事件

BaseDao

package com.wxm.dao;

import java.lang.reflect.Field;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import com.wxm.util.DBAccess;
import com.wxm.util.PageBean;

/**
 * 通用的查询方法 23中设计模式的策略模式
 * 作用：在方法或类中已经完成了对应的功能，然后在调用方法去根据你的需求
 * <T>代表你要对那个实体类对应分页查询
 * @author 2019071003
 *
 */
public class BaseDao<T> {
	// $.ajax
		protected interface Callback<T> {
			public List<T> foreach(ResultSet rs) throws SQLException, InstantiationException, IllegalAccessException;
		}

		public List<T> executeQuery(String sql, PageBean pageBean, Callback<T> callback)
				throws SQLException, InstantiationException, IllegalAccessException {
			if (pageBean != null && pageBean.isPagination()) {
				Connection con = DBAccess.getConnection();
				String countSql = getCountSql(sql);
				PreparedStatement countPst = con.prepareStatement(countSql);
				ResultSet countRs = countPst.executeQuery();
				if (countRs.next()) {
					pageBean.setTotal(countRs.getObject(1).toString());
				}
				DBAccess.close(null, countPst, countRs);

				String pageSql = getPageSql(sql, pageBean);
				PreparedStatement pagePst = con.prepareStatement(pageSql);
				ResultSet pageRs = pagePst.executeQuery();
				return callback.foreach(pageRs);
			} else {
				Connection con = DBAccess.getConnection();
				PreparedStatement pst = con.prepareStatement(sql);
				ResultSet rs = pst.executeQuery();
				return callback.foreach(rs);
			}

		}

		/**
		 * 将原生态的sql语句转换成查对应的当页记录数sql语句
		 * 
		 * @param sql
		 * @param pageBean
		 * @return
		 */
		private String getPageSql(String sql, PageBean pageBean) {
			return sql + " limit " + pageBean.getStartIndex() + "," + pageBean.getRows();
		}

		/**
		 * 将原生态的sql语句转换成查总记录输的sql语句
		 * 
		 * @param sql
		 * @return
		 */
		private String getCountSql(String sql) {
			return "select count(1) from (" + sql + " ) t";
		}
}

RegionDao

package com.wxm.dao;

import java.sql.SQLException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.wxm.util.JsonUtils;
import com.wxm.util.PageBean;
import com.wxm.util.StringUtils;

public class RegionDao extends JsonBaseDao {
	public List<Map<String, Object>> list(Map<String,String[]> paramMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String id = JsonUtils.getParamVal(paramMap, "ID");
		String sql = "select * from ch_region where true";
		if(StringUtils.isBlank(id)) {
			sql += " and parent_id=7459";
		}else {
			sql += " and parent_id="+id;
		}
		return super.executeQuery(sql, pageBean);
	}
	
	public static void main(String[] args) {
		Map<String,String[]> paramMap = new HashMap<>();
		paramMap.put("ID", new String[] {"9504"});
		RegionDao regionDao = new RegionDao();
		try {
			List<Map<String, Object>> list = regionDao.list(paramMap, null);
			System.out.println(list);
		} catch (InstantiationException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
}

JsonBaseDao

package com.wxm.dao;

import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.wxm.util.PageBean;

import javafx.util.Callback;

public class JsonBaseDao extends BaseDao<Map<String, Object>>{
public List<Map<String,Object>> executeQuery(String sql, PageBean pageBean) throws SQLException, InstantiationException, IllegalAccessException{
return super.executeQuery(sql, pageBean, new Callback<Map<String,Object>>() {
@Override
public List<Map<String,Object>> foreach(ResultSet rs) throws SQLException, InstantiationException, IllegalAccessException {
/*
* 1、创建一个实体类的实例
* 2、给创建的实例属性赋值
* 3、将添加完类容的实体类添加到list集合中
*/
// list.add(new Book(rs.getInt(“bid”), rs.getString(“bname”), rs.getFloat(“price”)));
List<Map<String,Object>> list = new ArrayList<>();
// 获取源数据
ResultSetMetaData md = rs.getMetaData();
int count = md.getColumnCount();
Map<String,Object> map = null;
while(rs.next()) {
map = new HashMap<>();
for (int i = 1; i <= count; i++) {
map.put(md.getColumnName(i), rs.getObject(i));
}
list.add(map);
}
return list;
}
});
}
}

准备工具
在这里插入图片描述
注意到mysql的连接包

DBAccess 连接数据库mysql

package com.wxm.util;

import java.io.InputStream;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Properties;

/**
 * 提供了一组获得或关闭数据库对象的方法
 * 
 */
public class DBAccess {
	private static String driver;
	private static String url;
	private static String user;
	private static String password;

	static {// 静态块执行一次，加载 驱动一次
		try {
			InputStream is = DBAccess.class
					.getResourceAsStream("config.properties");

			Properties properties = new Properties();
			properties.load(is);

			driver = properties.getProperty("driver");
			url = properties.getProperty("url");
			user = properties.getProperty("user");
			password = properties.getProperty("pwd");

			Class.forName(driver);
		} catch (Exception e) {
			e.printStackTrace();
			throw new RuntimeException(e);
		}
	}

	/**
	 * 获得数据连接对象
	 * 
	 * @return
	 */
	public static Connection getConnection() {
		try {
			Connection conn = DriverManager.getConnection(url, user, password);
			return conn;
		} catch (SQLException e) {
			e.printStackTrace();
			throw new RuntimeException(e);
		}
	}

	public static void close(ResultSet rs) {
		if (null != rs) {
			try {
				rs.close();
			} catch (SQLException e) {
				e.printStackTrace();
				throw new RuntimeException(e);
			}
		}
	}

	public static void close(Statement stmt) {
		if (null != stmt) {
			try {
				stmt.close();
			} catch (SQLException e) {
				e.printStackTrace();
				throw new RuntimeException(e);
			}
		}
	}

	public static void close(Connection conn) {
		if (null != conn) {
			try {
				conn.close();
			} catch (SQLException e) {
				e.printStackTrace();
				throw new RuntimeException(e);
			}
		}
	}

	public static void close(Connection conn, Statement stmt, ResultSet rs) {
		close(rs);
		close(stmt);
		close(conn);
	}

	public static boolean isOracle() {
		return "oracle.jdbc.driver.OracleDriver".equals(driver);
	}

	public static boolean isSQLServer() {
		return "com.microsoft.sqlserver.jdbc.SQLServerDriver".equals(driver);
	}
	
	public static boolean isMysql() {
		return "com.mysql.jdbc.Driver".equals(driver);
	}

	public static void main(String[] args) {
		Connection conn = DBAccess.getConnection();
		DBAccess.close(conn);
		System.out.println("isOracle：" + isOracle());
		System.out.println("isSQLServer：" + isSQLServer());
		System.out.println("isMysql：" + isMysql());
		System.out.println("数据库连接(关闭)成功");
	}
}

#oracle9i
#driver=oracle.jdbc.driver.OracleDriver
#url=jdbc:oracle:thin:@localhost:1521:ora9
#user=test
#pwd=test


#sql2005
#driver=com.microsoft.sqlserver.jdbc.SQLServerDriver
#url=jdbc:sqlserver://localhost:1423;DatabaseName=test
#user=sa
#pwd=sa


#sql2000
#driver=com.microsoft.jdbc.sqlserver.SQLServerDriver
#url=jdbc:microsoft:sqlserver://localhost:1433;databaseName=unit6DB
#user=sa
#pwd=888888


#mysql5
driver=com.mysql.jdbc.Driver
url=jdbc:mysql://127.0.0.1:3306/test?useUnicode=true&characterEncoding=utf8&serverTimezone=GMT
user=root
pwd=123

在这里插入图片描述
PageBean

package com.wxm.util;

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

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;

/**
 *分页工具
 *
 */
public class PageBean {

	private int page = 1;// 页码

	private int rows = 10;// 页大小

	private int total = 0;// 总记录数


	//保留上一次 的请求地址
private String url="";
//保留上一次请求所携带的参数
private  Map<String, String[]> paMap=new HashMap<>();
/**
 * pageBean初始化的方法
 * @param req
 */
    public void setRequest(HttpServletRequest req) {
    	//改变它第几页的数据
    	this.setPage(req.getParameter("page"));
    	//改变它每页展示的数据
//    	System.out.println(req.getParameter("rows"));
    	if(req.getParameter("rows")!=null) {
    	this.setRows(Integer.parseInt(req.getParameter("rows")));
    	}else {
    		this.setRows(10);
    	}
    	//控制页面是否分页
    	this.setPagination(req.getParameter("pagination"));
    	
    	
    	this.setUrl(req.getRequestURL().toString());//上一次的地址
    	this.setPaMap(req.getParameterMap());//上一次查询的参数
    }

	private void setPagination(String parameter) {
		// 当你填false就不分页
		if("false".equals(pagination)) {
			this.setPagination(false);
		}
	}
    public void setPage(String page) {
//    	如果不为空的时候
    	if(StringUtils.isNotBlank(page)) {
    		this.setPage(Integer.valueOf(page));
    	}
    }
	public String getUrl() {
	return url;
}

public void setUrl(String url) {
	this.url = url;
}



	public Map<String, String[]> getPaMap() {
	return paMap;
}

public void setPaMap(Map<String, String[]> paMap) {
	this.paMap = paMap;
}



	private boolean pagination = true;// 是否分页

	public PageBean() {
		super();
	}

	public int getPage() {
		return page;
	}

	public void setPage(int page) {
		this.page = page;
	}

	public int getRows() {
		return rows;
	}

	public void setRows(int rows) {
		this.rows = rows;
	}

	public int getTotal() {
		return total;
	}

	public void setTotal(int total) {
		this.total = total;
	}

	public void setTotal(String total) {
		this.total = Integer.parseInt(total);
	}

	public boolean isPagination() {
		return pagination;
	}

	public void setPagination(boolean pagination) {
		this.pagination = pagination;
	}

	/**
	 *获得起始记录的下标
	 * 
	 * @return
	 */
	public int getStartIndex() {
		return (this.page - 1) * this.rows;
	}

	@Override
	public String toString() {
		return "PageBean [page=" + page + ", rows=" + rows + ", total=" + total + ", pagination=" + pagination + "]";
	}
/**
 * 最大页码
 * @return
 */
	public int getMaxPage() {
		return this.total%this.rows==0? this.total/this.rows:this.total/this.rows+1;
		
	}
	/**
	 * 获取下一页
	 * @return
	 */
  public int getNextPage() {
	return this.page<this.getMaxPage()?this.page+1:this.page;
	  
  }
  public int getPreviousPage() {
	return this.page>1?this.page-1:this.page;
	  
  }
}

JsonUtil（专门用来处理Jon数据的工具包1）

package com.wxm.util;

import java.util.Arrays;
import java.util.Map;

/**
 * 专门用来处理json数据的工具包
 * @author 2019071003
 *
 */
public class JsonUtils {
	/**
	 * 从paramMap拿到咱们所需要用到的查询维度，用于sql语句拼接
	 * @param paramMap	获取从jsp页面传递到后台的参数集合（req.getParamterMap）
	 * @param key
	 * @return
	 */
	public static String getParamVal(Map<String,String[]> paramMap, String key) {
		if(paramMap != null && paramMap.size()>0) {
			String[] vals = paramMap.get(key);
			if(vals != null && vals.length > 0) {
				String val = Arrays.toString(vals);
				return val.substring(1, val.length()-1);
			}
			return "";
		}
		return "";
	}
}

RegionServlet

package com.wxm.web;

import java.io.IOException;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.wxm.dao.RegionDao;
import com.wxm.util.ResponseUtil;

public class RegionServlet {

	private static final long serialVersionUID = 6531004209491725231L;
	private RegionDao regionDao = new RegionDao();

	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}

	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		try {
			List<Map<String, Object>> list = regionDao.list(req.getParameterMap(), null);
			ObjectMapper om = new ObjectMapper();
			try {
				ResponseUtil.write(resp, om.writeValueAsString(list));
			} catch (Exception e) {
				e.printStackTrace();
			}
		} catch (InstantiationException | IllegalAccessException | SQLException e) {
			e.printStackTrace();
		}
	}
}

ResponseUtil

package com.wxm.util;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

public class ResponseUtil {
	public static void write(HttpServletResponse response,Object o)throws Exception{
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out=response.getWriter();
		out.println(o.toString());
		out.flush();
		out.close();
	}
}

web.xml配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>wxm_jquery</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
 <servlet-name>regionServlet</servlet-name>
 <servlet-class>com.wxm.web.RegionServlet</servlet-class>
</servlet>
<servlet-mapping>
 <servlet-name>regionServlet</servlet-name>
 <url-pattern>/regionServlet</url-pattern>
</servlet-mapping>
</web-app>

demo10

$(function(){
	var ctx = $("#ctx").val();
	$.ajax({
		url:ctx+"/regionServlet",
		success:function(data){
			for(index in data){
				//console.log(data[index]);
				$("#province").append("<option value='"+data[index].ID+"'>"+data[index].REGION_NAME+"</option>");
			}
		},
		dataType:"json"
	});
	
	$("#province").change(function(){
		$("option:gt(0)","#city").remove();
		$.ajax({
			url:ctx+"/regionServlet?ID="+this.value,
			success:function(data){
				for(index in data){
					//console.log(data[index]);
					$("#city").append("<option value='"+data[index].ID+"'>"+data[index].REGION_NAME+"</option>");
				}
			},
			dataType:"json"
		});
	});
})

jsp 页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/demo10.js"></script>
<title>Insert title here</title>
</head>
<body>
<div>
	<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">
	<h1>$.ajax实现省市联动</h1>
	<div>
		收货地址&nbsp;&nbsp;
		<select id="province">
			<option selected="selected">---请选择省份---</option>
		</select>&nbsp;&nbsp;
		<select id="city">
			<option selected="selected">---请选择城市---</option>
		</select>&nbsp;&nbsp;
		<select id=" county">
			<option selected="selected">---请选择县区---</option>
		</select>
	</div>
</div>
</body>
</html>

在这里插入图片描述
运行

结果：

尽力漂亮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery入门与插件、ajax数据交互

一.入门jQuery1.什么是jQuery2.jQuery优点3. hello jQuery4. jQuery三种工厂方法（Demo2.jsp）4.2 jQuery(html) （demo3.jsp）4.3 jQuery(element) （demo3.jsp）1.什么是jQuery它是一个轻量级的javascript类库就是一个类“jQuery”，简写“$”2.jQuery优点2.1...
复制链接

扫一扫