jQuery

最新推荐文章于 2022-04-01 12:37:39 发布

CJQ余小C

最新推荐文章于 2022-04-01 12:37:39 发布

阅读量494

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/CJQYQX/article/details/97338728

本文详细介绍了jQuery的入门知识，包括jQuery的定义、优点、工厂方法和程序入口。接着讨论了jQuery插件的开发，如$.extend和$.fn.extend的用法。最后讲解了Ajax的基本应用，包括Jackson库的使用和$.ajax实现的省市联动示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、入门

1. 什么是jQuery
它是一个轻量级的javascript类库
注1：就一个类“jQuery”，简写“$”

2. jQuery优点
2.1 总是面向集合
2.2 多行操作集于一行

3. hello jQuery
3.1 导入js库（）
在这里插入图片描述
在jsp页面导入jquery：

 <scripttype=“text/javascript"src=”${pageContext.request.contextPath}/js/jquery.min.js">

3.2 $(fn)做为程序入口

4. jQuery三种工厂方法（demo2.jsp）
index2.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">
 $(function () {
  //利用a标签获取实例 标签选择器
  /* $("a").click(function () {
   alert("标签选择器");
  }) */
  //利用id=a3获取实例 id选择器
  /*  $("#a3").click(function () {
  alert("id选择器");
 })  */
  //类选择器
  /* $(".c2").click(function () {
   alert("类选择器");
  }) */
  
  // 包含选择器
  /* $("p a").click(function () {
   alert("包含选择器");
  }) */
  
  //组合选择器
  /* $("a,span").click(function () {
   alert("组合选择器");
  }) */
  
  
  //第二个参数的作用（在div标签的内部寻找a标签，给找到的a标签添加事件）
  //如果第二个参数没有填写，默认是document（整个文档）
  $("a","div").click(function () {
   alert("组合选择器");
  })
 })
</script>
<title>Insert title here</title>
</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 ="c4" href="#">点我4</a>
 </div>
 <div>
 <p>
 <a id = "a5" class ="c5" href="#">点我5</a>
 </p>
 </div>
 <span>点我6</span>
</body>
</html>

4.1 jQuery(exp[,context])
exp：选择器
context：上下文，环境/容器，documemt
注1：选择器，css选择器
标签选择器
ID选择器
类选择器
包含选择器：E1 E2
组合选择器：E1,E2,E3
自定义选择器：:exp

<script type="text/javascript">
 $(function() {
  
  //利用a标签获取jquery实例
  /* $("a").click(function() {
   alert("点你怎么了？");
  }); */
  
  //利用id选择器#获取jquery实例
  /* $("#a2").click(function() {
   alert("点你怎么了？");
  }); */
  
  //利用类选择器.获取jquery实例
  /* $(".c3").click(function() {
   alert("点你怎么了？");
  }); */
  
  //包含选择器：p a  p标签里面包含a标签 就能弹框
  /* $("p a").click(function() {
   alert("点你怎么了？");
  }); */
  
  //组合选择器
  /* $("a,h1").click(function() {
   alert("点你怎么了？");
  }); */
  
  //在div标签下 寻找a标签 如果找到的话 就给a标签添加属性
  //如果第二个参数没填 默认为document
  /* $("a","div").click(function() {
   alert("点你怎么了？");
  }); */  // 自定义选择器
  $(":input[name='name1']").click(function() {
   alert(1);
  });
  
 })
 </script>

4.2 jQuery(html) （demo3.jsp）
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">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript">
  $(function () {
   
 $(":input[name='name1']").click(function () {
  //在id=selld1 的select的jquery实例上追加自定义的html jquery实例
  $("#selId1").append("<option value='1'>湖南</option>")
 })
  //将自定义的htmljquery实例追加到id=selld2的select的jquery实例上
 $(":input[name='name2']").click(function () {
  $("<option value='1'>长沙</option>").appendTo("#selId2");
 })
})
</script>
<title>Insert title here</title>
</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>

4.3 jQuery(element) （demo3.jsp）
element：js对象，表示一个html元素对象
js对象与jquery对象的相互转换
注1：$就是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">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript">

  $(function () {
   
 //$就是jQuery简写  
   var $h1 = $("#h1");
   alert($h1.val());
   //jquery 转 js 对象
    //jquery 对象
  // var h1Node = $h1.get(0);
    //var h1Node = $h1[0];
   //alert(h1Node.value);
   
   //js对象
   var h2Node = document.getElementById("h2");
   //alert(h2Node.value)
  // alert(h2Node.val()) js对象无法直接使用
  
  //如何将js对象转jquery对象
 var $h2Node = $(h2Node);
   alert($h2Node.val());
  
  
  
})</script>
<title>Insert title here</title>
</head>
<body> 
 
 <input type="hidden" id="h1" value="h1">
 <input type="hidden" id="h2" value="h2">
 <input type="hidden" id="h3" value="h3"></body>
</html>

5. jQuery程序的入口
$(document).ready(fn)
$(fn);

6. this指针的作用（demo4.jsp）
6.1 事件源（获取当前按钮的按钮值）
6.2 当前元素（点击按钮，获取所有a标签的值）

<%@ 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><title>Insert title here</title>
<title>Insert title here</title>
<script type="text/javascript">
/*  this:1.事件源*/
$(function() {
 $(":input").click(function(){
 alert(this.value); 
 /* 2.this:当前元素 */
 $("a").each(function (index,item) {
  alert(index+","+$(this).html()+","+$(item));
  
 });
 
 });
 
})

</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>
 
 <input type="button" value="ok"></body>
</html>

7、使用jquery动态给table添加样式

<%@ 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 () {
 $("table tr:eq(0)").addClass("fen")
 $("table tr:gt(0)").addClass("yello")
 
 $("table tr:gt(0)").hover(function () {
  $(this).removeClass().addClass("red");
 },function () {
  $(this).removeClass().addClass("blue");
 }
 
 )
 
 /* //当鼠标指针位于元素上方时时，改变元素的背景色：
 $("table tr:gt(0)").mouseover(function () {
  $("table tr:gt(0)").css("background-color","red");
 })
 //当鼠标从元素上移开时，改变元素的背景色：
 $("table tr:gt(0)").mouseout(function () {
  $("table tr:gt(0)").css("background-color","yellow");
 }) */
})
</script>
<style type="text/css">
.fen {
 background: #ff66ff;
}
.yello {
 background: #ffff66;
}.red {
 background: #ff3333;
}.blue {
 background: #9999ff;
}.green {
 background: #bbff99;
}
.hui {
 background: #d6d6c2;
}</style><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插件

1. 插件机制简介
往jquery类库里面去扩展方法，这类方法就是jquery插件

2. json的三种格式
2.1 对象
{sid:‘s01’,sname:‘zs’}

2.2 列表/数组
[1,3,4,5]

2.3 混合模式
{id:3,hobby:[‘a’,‘b’,‘c’]}

3. .extend和.extend和 .extend和.extend和.fn.extend
3.1 $.extend：对象的扩展(或继承)
$.extend(obj1,obj2,obj3[,…])
$.extend(obj1,obj2)
.extend(obj1)/.extend(obj1)/ .extend(obj1)/.extend(obj1)/.method=function(options){…};

3.2 $.fn.extend
.fn.extend(obj1)//.fn.extend(obj1)// .fn.extend(obj1)//.fn.extend(obj1)//.fn.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><title>Insert title here</title>
<title>Insert title here</title>
<script type="text/javascript">
//插件的基本知识:
$(function () {//程序入口
 //json对象的字符串体现形式
 //第一种形式 json对象
 var jsonObj1 ={
   sid:'s001',
  sname:'haha'
};
console.log(jsonObj1); 

//第二种形式：json数组的字符串体现形式
var jsonArray1=[1,3,4,5];
console.log(jsonArray1);

//第三种形式：json混合模式的字符串体现形式
var jsons={id:3,hobby:['a','b','c']};
console.log(jsons);
var jsonObj3 ={
   sid:'s001',
   hobby:['a','b','c']
};
//$.extend是用来扩充jquery类、属性或者方法所用
var jsonObj2 = {};
//用后面的对象扩充第一个对象
$.extend(jsonObj2,jsonObj3);//讲解扩冲值覆盖问题,之前已经扩充的属性值会被后面的对象所覆盖，如果后面对象有新的属性扩充，会继续扩充
console.log(jsonObj2);
$.extend({
 hello:function(){
  alert('我来了');
 }
});

$.hello();//$ fn.extend用来扩充jquery实例的属性和方法所使用
$.fn.extend({
 sayhello:function(){
  alert('午安');
 }
});

$("#yellow").sayhello();
alert("yellow");

})
</script>
</head>
<body>
<span id="yellow">yellow</span>
</body>
</html>

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

jQuery插件开发实例（demo7.jsp demo8.jsp demo9.jsp）
5.1 命名
jquery.xxx.js
5.2 扩展实例方法
5.3 如何面向集合
5.5 如何多行集于一行
5.5 命名参数的写法
$.extend(defaults,options);

1.创建css和js文件：
在这里插入图片描述
css样式：

.fen {
    background: #ff66ff;
}
.yello {
    background: #ffff66;
}.red {
    background: #ff3333;
}.blue {
    background: #9999ff;
}.green {
    background: #bbff99;
}
.hui {
    background: #d6d6c2;
}

js插件：

$(function() {
    var defaults = {
            head : 'green',
            out : 'blue',
            over : 'hui'
    }
    
    $.fn.extend({
        bgColor:function(option){
            $.extend(defaults,option);
            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);
                });
            });
        }
    });
    
})

index.jsp页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ include file="/jsp/common/head.jsp" %>
<!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">
<title>Insert title here</title>
<script type="text/javascript">
 $(function(){
  $("table").bgColor({
   head:'blue',
   out:'hui',
   over:'green'
  });
 })
</script>
</head>
<body>
 <table id="t1" 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>
 <table id="t2" 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>

三、Ajax

1. jackson
Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象
和xml文档，同样也可以将json、xml转换成Java对象
核心代码：
ObjectMapper mapper = new ObjectMapper();
mapper.writeValueAsString(obj);
int count = md.getColumnCount();
map.put(md.getColumnName(i), rs.getObject(i));

示例：
Student ：

package com.cjq.entity;
public class Student {
 private String sid;
 private String sname;
public String getSid() {
 return sid;
}
public void setSid(String sid) {
 this.sid = sid;
}
public String getSname() {
 return sname;
}
public void setSname(String sname) {
 this.sname = sname;
}
public Student(String sid, String sname) {
 super();
 this.sid = sid;
 this.sname = sname;
}public Student() {
 super();
}
@Override
public String toString() {
 return "Student [sid=" + sid + ", sname=" + sname + "]";
}
}

导入jar包：
在这里插入图片描述
Demo1( 后台json的三种格式的体现形式):

package com.cjq;
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.cjq.entity.Student;
/**
 * 后台json的三种格式的体现形式
 * @author cjq
 *
 */
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));
 }
}

2. jackson将java–>json
2.1 JavaBean/Map
{}

2.2 数组/List/Set
[]

2.3 类里嵌类
混合模式

Demo2( javaBean与Map集合转化成json字符串格式是一样的) ：

package com.cjq;
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;/**
 * javaBean(实体类)与Map集合转换成json字符串格式是一样的
 * @author cjq
 *
 */
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));
  
//  [{"sid":"s001","sname":"小明"},{"sid":"s002","sname":"小白"}]
 }
}

3. java->json死循环
忽略双向关联的一个方向即可
@JsonIgnore/程序控制
Student:

package com.cjq.entity;
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 + "]";
}
 
}

Teacher:

package com.cjq.entity;
import java.util.HashSet;
import java.util.Set;
import javax.print.attribute.HashAttributeSet;

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 + "]";
}}

Demo3:

package com.cjq;
import java.util.HashSet;
import java.util.Set;import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.cjq.entity.Student;
import com.cjq.entity.Teacher;
/**
 * @author cjq
 *
 */
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));
 }
}

4. $.ajax实现省市联动
RegionDao ：

package com.cjq.dao;
import java.sql.SQLException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;import com.myy.util.JsonBaseDao;
import com.cjq.util.JsonUtils;
import com.cjq.util.PageBean;
import com.cjq.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.cjq.util;
import java.lang.reflect.Field;
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;
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;
   }
  });
 }
}

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

package com.cjq.util;
import java.util.Arrays;
import java.util.Map;
/**
 * 专门用来处理json数据的工具包
 * @author Administrator
 *
 */
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.cjq.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.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.cjq.dao.RegionDao;
import com.cjq.util.ResponseUtil;
public class RegionServlet extends HttpServlet {    

private static final long serialVersionUID = 7544272901399137424L;
 
 private RegionDao regionDao = new RegionDao(); @Override
 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  doPost(req, resp);
 } @Override
 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) {
    // TODO Auto-generated catch block
    e.printStackTrace();
   }
  } catch (InstantiationException | IllegalAccessException | SQLException e) {
   e.printStackTrace();
  }
 }
}

ResponseUtil:

package com.cjq.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>cjq_jQuery</display-name>
<servlet>
 <servlet-name>regionServlet</servlet-name>
 <servlet-class>com.cjq.web.RegionServlet</servlet-class>
</servlet>
<servlet-mapping>
 <servlet-name>regionServlet</servlet-name>
 <url-pattern>/regionServlet</url-pattern>
</servlet-mapping>
</web-app>

index.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>

运行结果如下：

在这里插入图片描述