一. jQuery入门
1. 什么是jQuery
它是一个轻量级的javascript类库
注1:就一个类“jQuery”,简写“$”
2. jQuery优点
2.1 总是面向集合
2.2 多行操作集于一行
3.先导入js库:
3.1再导入js文件库
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
3.2 $(fn)做为程序入口
demo1$(fn)的三种写法
<%@ 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>
<script type="text/javascript">
/**三种写法:
* $(fn)、$(document).ready(fn)与window.onload的区别?
*/
/* 执行顺序213 */
/* 第三种写法 */
/*项目维护时候需要用到 */
window.onload=function(){
alert("hello jquery3");
}
/*第二种写法 */
$(document).ready(function() {
alert("hello jquery2");
})
/*第一种写法 */
$(function(){
alert("hello jquery1");
});
/* 结论:$(fn)与$(document).ready(fn)是 等价的,那个代码在前面就先执行,
jsp的dom树结构加载完毕即刻调用方法
window.onload最后执行
jsp的dom树加载完,css、js等静态资源加载完毕执行
*/
</script>
</head>
<body>
</body>
</html>
4. jQuery三种工厂方法 (demo2.jsp)
4.1 jQuery(exp[,context])
exp:选择器
context:上下文,环境/容器,documemt
jquery的六大选择器,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>
<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>
<script type="text/javascript">
/* 标签选择器 */
$(function () {
//利用a标签获取jqurey实例
/* $("a").click(function(){
alert("被翻拍了")
}); */
/* id选择器:利用id的a3获取jqurey实例 */
/* $('#a3').click(function(){
alert("被翻拍了")
}); */
/*类选择器 */
/* $('.c1').click(function(){
alert("被翻拍了")
}); */
/*包含选择器 */
/* $('p a').click(function() {
alert("你中奖了");
}); */
/* 组合选择器 */
/* $("a,span").click(function() {
alert("你中了5000万");
}); */
//讲解第二个参数的作用(在div标签内部寻找a标签,然后给找到的标签添加事件)
//如果第二个参数没有填,那么默认是document
$("a","div").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>
4.2.jQuery(html)
html:基于html的一个字符串
4.3. jQuery(element)
element:js对象,表示一个html元素对象
js对象与jquery对象的相互转换:
//获取到js对象
var h2Node=document.getElementById("h2");
alert(h2Node.value);
//js对象转jQuery对象
var $h2Node = $(h2Node);
alert($h2Node.val());
demo3:
<%@ 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>
<script type="text/javascript">
//自定义选择器
$(function () {
$(":input[name='name1']").click(function() {
//在id="selId1"追加一个option的实例(就是往id="selId1"加个省份)
//在id等于selId1的select的jQuery的实例上追加<option value='1'>湖南省</option>的html的jQuery实例
$("#selId1").append("<option value='1'>湖南省</option>")
});
$(":input[name='name1']").click(function() {
//将 <option value='1'>长沙</option>的html实例追加到id=selId2的select标签jQuery实例中
$("<option value='1'>长沙</option>").appendTo("#selId2")
/*jquery对象 */
/* var $h1= $("#h1");
alert($h1.val());
//jQuery多一些转化js对象
var h1Node = $h1[0];//Node节点
alert(h1Node.value); */
//获取到js对象
var h2Node=document.getElementById("h2");
alert(h2Node.value);
//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>
注意:$就是jQuery简写
5. this指针的作用
5.1 事件源(获取当前按钮的按钮值)
5.2 当前元素(点击按钮,获取所有a标签的值)
demo4:
<%@ 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>
6、使用jquery动态给table添加样式
demo5
<%@ 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>
<style type="text/css">
.fen {
background: #ff66ff;
}
.yello {
background: #ffff66;
}
.red {
background: #ff3333;
}
</style>
<title>Insert title here</title>
<script type="text/javascript">
$(function () {
$("table tr:eq(0)").addClass("yello");//eq查找第几行
$("table tr:gt(0)").addClass("red");//gt大于第一行
$("table tr:gt(0)").hover(function () {//hover事件
$(this).removeClass().addClass("fen");
},function(){
$(this).removeClass().addClass("red");
});
})
</script>
</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>
demo5运行结果
二. 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.
.
e
x
t
e
n
d
和
.extend和
.extend和.fn.extend
3.1 $.extend:对象的扩展(或继承)
$.extend(obj1,obj2,obj3[,…])
$.extend(obj1,obj2)
.
e
x
t
e
n
d
(
o
b
j
1
)
/
.extend(obj1)/
.extend(obj1)/.method=function(options){…};
3.2 $.fn.extend
.
f
n
.
e
x
t
e
n
d
(
o
b
j
1
)
/
/
.fn.extend(obj1)//
.fn.extend(obj1)//.fn.method=function(options){…};
demo6:(json的三种格式、 . e x t e n d 和 .extend和 .extend和.fn.extend)
<%@ 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>
3. jQuery插件的添加
其实就是给jQuery添加新的实例方法或类方法,然后将功能封闭在其中
4. jQuery插件开发实例(demo7.jsp demo8.jsp demo9.jsp)
4.1 命名
jquery.xxx.js
4.2 扩展实例方法
4.3 如何面向集合
4.4 如何多行集于一行
4.5 命名参数的写法
$.extend(defaults,options);
先建一个css样式和js文件:
把css样式放在专门创建的jquery.table.css文件中:
@charset "UTF-8";
.fen {
background: #ff66ff;
}
.yellow {
background: #ffff66;
}
.red {
background: #ff3333;
}
.blue {
background: #9999ff;
}
.green {
background: #bbff99;
}
.hui {
background: #d6d6c2;
}
把js代码放在专门创建的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);
});
});
}
});
$("table")
})
先把css和js代码封装在head.jsp页面:
<%@ 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>
然后在页面调用head.jsp里面的css样式和js代码:
<%@ include file="/jsp/common/head.jsp" %>
最后为jsp页面demo9:
<%@ 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">
<style type="text/css">
@import url(js/bgColor/bgColor.css);
</style>
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
$("table").bgColor({
head : 'yellow',
out : 'red',
over : 'blue'
});
})
</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));
-
jackson将java–>json
2.1 JavaBean/Map
{}
2.2 数组/List/Set[]
2.3 类里嵌类
混合模式Demo1( 后台json的三种格式的体现形式:)
package com.xiaoyi.jquery;
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.sun.xml.internal.ws.client.Stub;
import com.xiaoyi.entity.Student;
/**
* 后台json的三种格式的体现形式
*后台三种格式的体现形式
*
*/
public class Demo1 {
public static void main(String[] args) throws JsonProcessingException {
//j\第一种体现形式: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));
//第三种:混合格式
Map<String, Object>map=new HashMap<String, Object>();
map.put("total", 2);
map.put("stus", list1);
System.out.println(om.writeValueAsString(map));
}
}
Demo2( javaBean与Map集合转化成json字符串格式是一样的)
package com.xiaoyi.jquery;
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字符串格式是一样的
*
*/
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));
Map<String, Object>stu2=new HashMap<String, Object>();
stu2.put("sid", "s002");
stu2.put("sname", "李四");
List<Map<String, Object>> list1=new ArrayList<>();
list1.add(stu1);
list1.add(stu2);
System.out.println(om.writeValueAsString(list1));
}
}
- java->json死循环
忽略双向关联的一个方向即可
@JsonIgnore/程序控制
Demo3( json死循环问题)
package com.xiaoyi.jquery;
import java.util.HashSet;
import java.util.Set;
import com.fasterxml.jackson.annotation.JsonIgnore;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.xiaoyi.entity.Student;
import com.xiaoyi.entity.Teacher;
/**
*
*json死循环问题
*/
public class Demo3 {
/**
* StackOverflowError栈溢出 双向绑定
* 1.由双向绑定改成单向,就是将彼此之间的关系交于一方维护
* 2.@JsonIgnore:将彼此循环调用的属性忽略,不参与对象转成json格式
*/
public static void main(String[] args) throws JsonProcessingException {
Student stu1=new Student("soo1", "哈哈");
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实现省市联动例子
ReginDao
package com.xiaoyi.dao;
import java.sql.SQLException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.xiaoyi.util.JsonBaseDao;
import com.xiaoyi.util.JsonUtils;
import com.xiaoyi.util.PageBean;
import com.xiaoyi.util.StringUtils;
public class ReginDao extends JsonBaseDao {
public List<Map<String, Object>>list(Map<String, String[]>paraMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
String id=JsonUtils.getParamVal(paraMap, "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[]>paraMap=new HashMap<String, String[]>();
paraMap.put("ID", new String[]{"9504"});
ReginDao reginDao=new ReginDao();
try {
List<Map<String, Object>>list=reginDao.list(paraMap, 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();
}
}
}
JsonUtils(专门用来处理json数据的工具包)
package com.xiaoyi.util;
import java.util.Arrays;
import java.util.Map;
/**
* 专门用来处理json数据的工具包
*
*/
public class JsonUtils {
/**
* 从paramMap拿到咱们所需要用到的查询维度,用于sql语句拼接
* paramMap 获取从jsp页面传递到后台的参数集合(req.getParamterMap)
* key
*
*/
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.xiaoyi.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.xiaoyi.dao.ReginDao;
import com.xiaoyi.util.ResponseUtil;
public class RegionServlet extends HttpServlet {
private static final long serialVersionUID = -7694858310078820183L;
private ReginDao reginDao=new ReginDao();
@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=reginDao.list(req.getParameterMap(), null);
ObjectMapper om=new ObjectMapper();
ResponseUtil.write(resp, om.writeValueAsString(list));
} catch (InstantiationException | IllegalAccessException | SQLException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}
}
demo10.js(里面放入js代码)
$(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"
});
});
})
配置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>Pro_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.xiaoyi.web.RegionServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>regionServlet</servlet-name>
<url-pattern>/regionServlet</url-pattern>
</servlet-mapping>
</web-app>
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><title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/demo10.js"></script><title>Insert title here</title>
<title>Insert title here</title>
</head>
<body>
<div>
<input type="hidden"id="ctx" value="${pageContext.request.contextPath}">
<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">
<h1>$.ajax实现省市联动</h1>
<div>
收货地址
<select id="province">
<option selected="selected">---请选择省份---</option>
</select>
<select id="city">
<option selected="selected">---请选择城市---</option>
</select>
<select id=" county">
<option selected="selected">---请选择县区---</option>
</select>
</div>
</div>
</body>
</html>
以下为结果: