JQuery 入门、插件和ajax

最新推荐文章于 2021-11-06 15:30:15 发布

浪漫2020.

最新推荐文章于 2021-11-06 15:30:15 发布

阅读量189

点赞数

分类专栏：程序代码文章标签： JQuery

本文链接：https://blog.csdn.net/weixin_43654482/article/details/97241778

版权

程序代码专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一：JQuery 入门

1. 什么是jQuery

它是一个轻量级的javascript类库

注1：就一个类“jQuery”，简写“$”

2. jQuery优点

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

3. hello jQuery
3.1 写一个demo1.jsp 导入js库

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

3.2 $(fn)做为程序入口

<script type="text/javascript">
    $(function(){
    	alert("hello jQuery");
    })
</script>

如图：

在这里插入图片描述
注：

$(fn)、$(document).ready(fn)与window.onload的区别
<script type="text/javascript">
window.onload=function(){
    alert("hello jQuery3");
}
$(document).read(function(){
    alert("hello jQuery2");
})   
$(function(){
	alert("hello jQuery1");
})

a.执行时间
$ $(f n) 、$ (document).ready(fn)是等价的谁在前面谁就先执行 (jsp的dom树结构加载完毕即刻调用方法)
window.onload最后执行 (jsp的dom树加载完 css、js等静态资源加载完毕执行)

b.编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行

c.简化写法
window.onload没有简化写法
$ $document).ready(function(){})可以简写成$ (function(){});

4. jQuery三种工厂方法

4.1 jQuery(exp[,context])
exp：选择器
context：上下文，环境/容器，documemt

demo2.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>入门</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="c1" href="#">点我4</a>
	</div>
	<div>
		<p>
			<a id="a5" class="c1" href="#">点我5</a>
		</p>
	</div>

</body>
</html>

标签选择器

<script type="text/javascript">
 $(function(){
	   /* 标签选择器  */
	   $("a").click(function () {
			alert("中午好");
		})
})
</script>

ID选择器

/* ID选择器 */
 $("#a3").click(function () {
		    alert("中午好");
 })

类选择器

$(".c1").click(function () {
			alert("中午好");
})

包含选择器：E1 E2

$("p a").click(function () {
			alert("中午好");
})

组合选择器：E1,E2,E3

$("a,span").click(function () {
			alert("中午好");
})

自定义选择器：:exp

     /* 讲解第二个参数的作用（在div标签内部寻找a标签，然后给找到的标签添加事件）
		如果第二个参数没有填，那么默认是document(在整个jsp页面去找) */
		$("a","div").click(function () {
			alert("中午好");
		})

4.2 jQuery(html)
html：基于html的一个字符串

demo3.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>入门</title>
<script type="text/javascript">
   $(function(){
	   $(":input[name='name1']").click(function(){
		   //在id=selId1的select的jquery实例上追加"<option value='1'>湖南省</option>"的html jquery实例
		   $("#selId1").append("<option value='1'>湖南省</option>")
	   });
	    $(":input[name='name2']").click(function(){
	    	//将<option value='1'>邵阳</option>的html jquery实例追加到id=selId2的select 标签jquery中
		   $("<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>

如图：
点击add1 add2 可以在下拉框里加入属性
在这里插入图片描述
4.3 jQuery(element)
element：js对象，表示一个html元素对象
js对象与jquery对象的相互转换

jquery 对象转 js对象

    var $h1= $("#h1");
    alert($h1.val());
	var h1Node=$h1.get(0);
	var h1Node=$h1[0];
	alert(h1Node.value());

js对象转jQuery对象

   var h2Node=document.getElementById("h2");
   alert(h2Node.value);
   var $h2Node=$(h2Node);
   alert(h2Node.val());

5. this指针的作用
5.1 事件源（获取当前按钮的按钮值）
5.2 当前元素（点击按钮，获取所有a标签的值）

<script type="text/javascript">
   $(function(){
	   $(":input").click(function(){
		 //指的是事件源
		  alert(this.value); 
		 //可放参数
		  $("a").each(function(index,item) {
			  //指的时当前元素
		      alert(index+","+$(this).html()+","+$(item).html());
		  })
	   })
   })
</script>

6、使用jquery动态给table添加样式
demo5.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>入门</title>
<style type="text/css">
.fen {
	background: pink;
}

.yello {
	background: #ffff66;
}

.red {
	background: #ff3333;
}

.blue {
	background: #9999ff;
}

.green {
	background: #bbff99;
}
.hui {
	background: #d6d6c2;
}
</style>

<script type="text/javascript">
     $(function(){
    	 $("table tr:eq(0)").addClass("red");
    	 $("table tr:gt(0)").addClass("yellow");
    	 
    	 $("table tr:gt(0)").hover(function(){
 			$(this).removeClass().addClass("fen");
 		},function(){
 			$(this).removeClass().addClass("green");
 		})
     })
     
</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>

如图：
在这里插入图片描述

二： JQuery 插件

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

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

<script type="text/javascript">
    $(function(){
        //json对象的字符串体现形式
    	var jsonObj1={
    			sid='t001',
    			sname='李翔'
    	};
    	console.log(jsonObj1);
</script>

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

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

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

   //json混合模式的字符串体现形式
   var jsons = {id:3,hobby:['a','b','c']};
   console.log(jsons);

3. $. e x t e n d 和$ .fn.extend
3.1 $.extend 是用来扩充jquery类属性或者方法所用

        var jsonObj2={};
		//用后面的对象扩充定一个对象
		//讲解扩充值覆盖的问题,之前已经扩充的属性值会被后面的对象所覆盖，如果后面对象有新的属性，会继续扩充
		$.extend(jsonObj2,jsonObj1,jsonObj3);
		console.log(jsonObj2);
		
		$.extend({
			hello:function(){
				alert('中午好');
			}
		});
		
		$.hello();

3.2 $.fn.extend 是用来扩充jquery实例的属性或者方法所用

        $.fn.extend({
			hi:function(){
				alert('你吃饭了吗');
			}
		});
		$("#yellow").hi();
		alert("yellow");

4. jQuery插件开发实例
js

   $(function(){
	   
	   var defaults = {
				head : 'red',
				out : 'green',
				over : 'yellow'
		}
	   
	   $.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

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

.yellow {
	background: #ffff66;
}

.red {
	background: #ff3333;
}

.blue {
	background: #9999ff;
}

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

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>

demo7.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!-- 引入自己定义的head.jsp -->
    <%@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>插件</title>
<style type="text/css">
@import url(js/bgColor/bgColor.css);
</style>
<script type="text/javascript">
	$(function(){
			$("table").bgColor({
				head : 'yellow',
				out : 'fen',
				over : 'red'
			});
	  })
</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对象

Student实体类

package com.xwt;

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

/**
 * 实体类
 * @author 婉婷宝贝
 *
 */
public class Student {
	private String sid;
	private String sname;
	private Set<Teacher> teas=new HashSet<>();
	
	public Set<Teacher> getTeas() {
		return teas;
	}
	public void setTeas(Set<Teacher> teas) {
		this.teas = teas;
	}
	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() {}
	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;
	}
	@Override
	public String toString() {
		return "Student [sid=" + sid + ", sname=" + sname + ", teas=" + teas + "]";
	}
}

在这里插入图片描述
2.javaBean与map集合转换成json字符串格式是一样的
Demo2.java

package com.xwt;

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 婉婷宝贝
 *
 */
public class Demo2 {
	public static void main(String[] args) throws JsonProcessingException {
		//Map集合是无序的
		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));
	}
}

在这里插入图片描述
3.java->json死循环
Teacher

package com.xwt;

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

import com.fasterxml.jackson.annotation.JsonIgnore;

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() {}
	public Teacher(String tid, String sname, Set<Student> stus) {
		super();
		this.tid = tid;
		this.sname = sname;
		this.stus = stus;
	}
	@Override
	public String toString() {
		return "Teacher [tid=" + tid + ", sname=" + sname + ", stus=" + stus + "]";
	}

}

Demo3.java

package com.xwt;

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

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
/**
 * * json死循环问题
 * 1、由双向绑定改成单向，也就是说将彼此之间的关系交于一方维护
 * 2、@JsonIgnore：将彼此循环调用的属性忽略，不参与对象转成json格式
 *
 * @author 婉婷宝贝
 *
 */
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));
	}
}

双方绑定相互调用
在这里插入图片描述
解决方式：
a.忽略双向关联的一个方向即可

b.直接在实体类调用@JsonIgnore/程序控制

    private String tid;
	private String sname;
	@JsonIgnore
	private Set<Student> stus=new HashSet<>();

在这里插入图片描述
4. jQuery的ajax省市县三级联动
思路：利用map集合存储数据，然后利用把数据以json格式传入前台，然后jsp页面利用ajax接收，转译Json格式，然后给市和县添加change事件
JsonBaseDao

package com.xwt.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;
			}
		});
	}
}

RegionServlet

package com.xwt.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.xwt.dao.RegionDao;
import com.xwt.util.ResponseUtil;

public class RegionServlet extends HttpServlet {

    private static final long serialVersionUID = 2174029632039137855L;
	
	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();
		}
	}
}

RegionDao

package com.xwt.dao;

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

import com.xwt.util.JsonBaseDao;
import com.xwt.util.JsonUtils;
import com.xwt.util.PageBean;
import com.xwt.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) {
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			e.printStackTrace();
		} catch (SQLException e) {
		    e.printStackTrace();
		}
	}

}

JsonUtil

package com.xwt.util;

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

/**
 * 专门用来处理json数据的工具包
 *
 */
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 "";
	}
}

demo.js

$(function(){
	var ctx = $("#ctx").value;
	$.ajax({
		url:ctx+"/regionServlet",
		success:function(data){
			for(index in data){
				$("#province").append("<option selected='"+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){
					$("#city").append("<option selected='"+data[index].ID+"'>"+data[index].REGION_NAME+"</option>");
				}
			},
			dataType:"json"
		});
	});
	
	
	$("#city").change(function(){
		$("option:gt(0)","#county").remove();
		$.ajax({
			url:ctx+"/regionServlet?ID="+this.value,
			success:function(data){
				for(index in data){
					$("#county").append("<option selected='"+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>my_jQuery</display-name>
<servlet>
 <servlet-name>regionServlet</servlet-name>
 <servlet-class>com.myy.web.RegionServlet</servlet-class>
</servlet>
<servlet-mapping>
 <servlet-name>regionServlet</servlet-name>
 <url-pattern>/regionServlet</url-pattern>
</servlet-mapping>
</web-app>

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

浪漫2020.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery 入门、插件和ajax

一：jquery 入门1. 什么是jQuery它是一个轻量级的javascript类库注1：就一个类“jQuery”，简写“$”2. jQuery优点2.1 总是面向集合2.2 多行操作集于一行3. hello jQuery3.1 写一个demo1.jsp 导入js库<script type="text/javascript" src="${pageContext.requ...
复制链接

扫一扫