JQuery笔记---JQuery入门案例（二）

最新推荐文章于 2021-11-21 14:29:53 发布

Rosinante.

最新推荐文章于 2021-11-21 14:29:53 发布

阅读量463

点赞数

分类专栏： Web前端文章标签： JQuery XML Json Html

本文链接：https://blog.csdn.net/qq_21420941/article/details/100017959

版权

Web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

案例一：JQuery校验用户

案例二：实现百度搜索提示

案例三：JQuery实现省市联动（XML传输数据方式）

案例四：JQuery实现省市联动（Json传输数据方式）

案例一：JQuery校验用户

需求：注册用户时，对已存在用户进行提示
JQuery：

<!-- 导入JQuery的支持 -->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">

	function checkUserName() {
		//1. 获取输入框的内容
		var name = $("#name").val();
		
		//2. 发送请求
		$.post("/rosinante/CheckUserNameServlet" , {name:name} , function(data , status){
			if(data == 1){//用户名存在
				$("#span01").html("<font color='red'>用户名已被注册</font>");
			}else{
				$("#span01").html("<font color='green'>用户名可以使用</font>");
			}
		} );
		//3. 输出响应的数据到页面上。
	}
	
</script>

html：

<body>
	<table border="1" width="500">
		<tr>
			<td>用户名:</td>
			<td><input type="text" name="name" id="name"  onblur="checkUserName()"><span id="span01"></span></td> 
		</tr>
		<tr>
			<td>密码</td>
			<td><input type="text" name=""></td>
		</tr>
		<tr>
			<td>邮箱</td>
			<td><input type="text" name=""></td>
		</tr>
		<tr>
			<td>简介</td>
			<td><input type="text" name=""></td>
		</tr>
		<tr>
			<td colspan="2"><input type="submit" value="注册"></td>
		</tr>
	</table>
</body>

Servlet：

public class CheckUserNameServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		try {
			
			request.setCharacterEncoding("UTF-8");
			
			//1. 检测是否存在
			String name = request.getParameter("name");
			System.out.println("name="+name);
			
			UserDao dao = new UserDaomImpl();
			boolean isExist = dao.checkUserName(name);
			
			//2.  通知页面，到底有还是没有。
			if(isExist){
				response.getWriter().println(1);  //存在用户名
			}else{
				response.getWriter().println(2); //不存在该用户名
			}
			
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}

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

}

Dao层代码参见：Ajax入门介绍以及检验用户名是否存在
测试：

案例二：实现百度搜索提示

需求：用户搜索时给出相关搜索提示
数据库准备：

创建一个名为baidu的表，表结构如下：

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">
<title>Insert title here</title>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/baidu.js"></script>
</head>
<body>
<center>
<h2>百度</h2>
	<input type="text" name="word" id="word" style="width: 600px ; height: 50px  ;font-size: 20px;">
	<input type="button" value="百度一下"  style="height: 55px ; width: 100px ; ">
	
	<div id="div01" style="position:relative; left : -54px; width: 600px; height: 200px ; border:  1px solid blue; display: none"></div>
</center>
</body>
</html>

baidu.js:

//1. 捕捉到键盘弹起的事件 
//在文档准备就绪的时候，对某一个元素进行onkeyup事件监听
/*$(document).ready(function(){
	
})*/
$(function(){
	$("#word").keyup(function() {
		//2。 获取输入框的值 
		//var word = $("#word").val();
		//this  对应就是执行这个方法的那个对象， $("#word")
		var word = $(this).val();

		if(word == ""){
			$("#div01").hide();
		}else{
			//3. 请求数据。
			$.post("find",{word:word} ,function(data , status){
				//alert(data);
				$("#div01").show();
				$("#div01").html(data);
			});
		}
		
	})
});

WordBean:

public class WordBean {

	private int id;
	private String words;
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getWords() {
		return words;
	}
	public void setWords(String words) {
		this.words = words;
	}
	@Override
	public String toString() {
		return "WordBean [id=" + id + ", words=" + words + "]";
	}
		
}

WordsDao:

public interface WordsDao {

	List<WordBean> findWords(String word) throws SQLException;
}

WordsDaoImpl:

public class WordsDaoImpl implements WordsDao{

	@Override
	public List<WordBean> findWords(String word) throws SQLException {
		QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());
		String sql = "select * from baidu where words like ?  limit ?";
		return runner.query(sql, new BeanListHandler<WordBean>(WordBean.class) , word+"%" , 5);
	}

}

Servlet：

public class FindWordsServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		request.setCharacterEncoding("utf-8");
		try {
			//1. 先获取参数
			String word = request.getParameter("word");
			System.out.println("word="+word);
			
			//2. 让dao执行查询
			WordsDao dao = new WordsDaoImpl();
			List<WordBean> list = dao.findWords(word);
			
			for (WordBean wordBean : list) {
				System.out.println("==="+wordBean.toString());
			}
			
			request.setAttribute("list", list);
			
			//3. 返回数据
			response.setContentType("text/html;charset=utf-8");

                        //响应这个jsp的页面，全部把它返回给请求者 
			request.getRequestDispatcher("list.jsp").forward(request, response);
		} catch (SQLException e) {
			e.printStackTrace();
		}
	
	}

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

}

c3p0连接数据库请参考：Ajax入门介绍以及检验用户名是否存在Demo
测试：

案例三：JQuery实现省市联动（XML传输数据方式）

需求：点击省份下拉框，选择一个身份，市下拉框显示该省对应的城市
数据库准备：

创建一个名为city的表，表结构如下：

需要导入的相关jar包：

city.jsp：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/city.js"></script>
</head>
<body>
省份: <select name="province" id ="province">
		<option value="" >-请选择 -
		<option value="1" >山西
		<option value="2" >江苏
		<option value="3" >山东
		<option value="4" >四川
	</select>
城市: 
	<select name="city" id="city">
		<option value="" >-请选择 -
	</select>
</body>
</html>

list.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>



<table style="width: 100%">
	<c:forEach items="${list }" var="wordBean">
		<tr>
			<td>${wordBean.words}</td>
		</tr>
	</c:forEach>
</table>

city.js

$(function() {
	//1。找到省份的元素
	$("#province").change(function() {
		//2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
		var pid = $(this).val();
		
	
		
		$.post( "CityServlet",{pid:pid} ,function(data,status){		
			//先清空以前的值：
			$("#city").html("<option value='' >-请选择-")
			//遍历： 
			//从data数据里面找出所有的city  ， 然后遍历所有的city。
			//遍历一个city，就执行一次function方法
			$(data).find("city").each(function() {
				
				//遍历出来的每一个city，取它的孩子。 id , cname
				var id = $(this).children("id").text();
				var cname = $(this).children("cname").text();
				
				$("#city").append("<option value='"+id+"' >"+cname)
			});
		} );
		
	});
});

CityBean.java:

public class CityBean {

	private int id;
	private int pid ; 
	private String cname;
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public int getPid() {
		return pid;
	}
	public void setPid(int pid) {
		this.pid = pid;
	}
	public String getCname() {
		return cname;
	}
	public void setCname(String cname) {
		this.cname = cname;
	}
	
}

CityDao.java:

public interface CityDao {

	List<CityBean> findCity(int pid)  throws SQLException ;
}

CityDaoImpl.java:

public class CityDaoImpl implements CityDao {

	@Override
	public List<CityBean> findCity(int pid) throws SQLException {
		
		QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());
		String sql = "select * from city where pid = ?";
		return runner.query(sql, new BeanListHandler<CityBean>(CityBean.class) , pid);			
	}
}

CityServlet:

public class CityServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	
		try {
			//1. 获取参数
			int pid = Integer.parseInt(request.getParameter("pid"));
			
			//2 找出所有的城市
			CityDao dao = new CityDaoImpl();
			List<CityBean> list = dao.findCity(pid);
			
			//3. 返回数据。手动拼  ---> XStream  转化 bean对象成 xml
			XStream xStream = new XStream();

			//想把id做成属性
			//xStream.useAttributeFor(CityBean.class, "id");
			//设置别名
			xStream.alias("city", CityBean.class);
			//转化一个对象成xml字符串
			String xml = xStream.toXML(list);
			
			//返回数据
			response.setContentType("text/xml;charset=utf-8");
			response.getWriter().write(xml);
			
		} catch (SQLException e) {
			e.printStackTrace();
		};
	}

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

}

c3p0连接数据库请参考：Ajax入门介绍以及检验用户名是否存在Demo
测试：

案例四：JQuery实现省市联动（Json传输数据方式）

将服务器传输的数据转为json：

CityServlet02：

public class CityServlet02 extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	
		try {
			//1. 获取参数
			int pid = Integer.parseInt(request.getParameter("pid"));
			
			//2 找出所有的城市
			CityDao dao = new CityDaoImpl();
			List<CityBean> list = dao.findCity(pid);
			
			//3. 把list ---> json数据
			//JSONArray ---> 变成数组 ， 集合  []
			//JSONObject ---> 变成简单的数据  { name : zhangsan , age:18}
			
			JSONArray jsonArray = JSONArray.fromObject(list);
			String json = jsonArray.toString();
			
			
			response.setContentType("text/html;charset=utf-8");
			response.getWriter().write(json);
			
			
		} catch (SQLException e) {
			e.printStackTrace();
		};
	}

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

}

city_json.js:

$(function() {
	//1。找到省份的元素
	$("#province").change(function() {
		//2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
		//$("#province").varl();
		var pid = $(this).val();
		$.post( "CityServlet02",{pid:pid} ,function(data,status){
			
			//先清空
			$("#city").html("<option value='' >-请选择-");
			//再遍历，追加
			$(data).each(function(index , c) {
				$("#city").append("<option value='"+c.id+"' >"+c.cname)
			});
		},"json" );
		
	});
});

在city.jsp页面引入city_json.js：

<script type="text/javascript" src="js/city_json.js"></script>

<!-- 引用的是 xml的处理方法  -->
<!-- <script type="text/javascript" src="js/city.js"></script> -->

测试：

Rosinante.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery笔记---JQuery入门案例（二）

目录案例一：JQuery校验用户案例二：实现百度搜索提示案例三：JQuery实现省市联动（XML传输数据方式）案例四：JQuery实现省市联动（Json传输数据方式）案例一：JQuery校验用户需求：注册用户时，对已存在用户进行提示 JQuery：<script type="text/javascri...
复制链接

扫一扫