Ajax & Jquery

最新推荐文章于 2024-03-13 07:00:00 发布

欢乐·猿

最新推荐文章于 2024-03-13 07:00:00 发布

阅读量62

点赞数

本文链接：https://blog.csdn.net/weixin_42278316/article/details/102922696

版权

Ajax

是什么?
“Asynchronous Javascript And XML”（异步JavaScript和XML），
并不是新的技术，只是把原有的技术，整合到一起而已。

     1.使用CSS和XHTML来表示。
     2.使用DOM模型来交互和动态显示。
     3.使用XMLHttpRequest来和服务器进行异步通信。
     4.使用javascript来绑定和调用。

有什么用?

咱们的网页如果想要刷新局部内容。那么需要重新载入整个网页。用户体验不是很好。就是为了解决局部刷新的问题。保持其他部分不动，只刷新某些地方。

数据请求 Get

			1.创建对象
			function  ajaxFunction(){
			   var xmlHttp;
			   try{ // Firefox, Opera 8.0+, Safari
			        xmlHttp=new XMLHttpRequest();
			    }
			    catch (e){
				   try{// Internet Explorer
				         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
				      }
				    catch (e){
				      try{
				         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
				      }
				      catch (e){}
				      }
			    }
		
				return xmlHttp;
			 }


	2. 发送请求
	//执行get请求
	function get() {
		//1. 创建xmlhttprequest 对象
		var request = ajaxFunction();
		
		//2. 发送请求。
		// http://localhost:8080/day16/demo01.jsp
		//http://localhost:8080/day16/DemoServlet01
		
		/*	
			参数一： 请求类型  GET or  POST
			参数二： 请求的路径
			参数三： 是否异步， true  or false
		*/
		request.open("GET" ,"/day16/DemoServlet01" ,true );
		request.send();
	}


	如果发送请求的同时，还想获取数据，那么代码如下
	//执行get请求
	function get() {
		
		//1. 创建xmlhttprequest 对象
		var request = ajaxFunction();
		
		//2. 发送请求
		request.open("GET" ,"/day16/DemoServlet01?name=aa&age=18" ,true );
		
		//3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变，那么就执行 = 号右边的方法
		request.onreadystatechange = function(){
			
			//前半段表示 已经能够正常处理。  再判断状态码是否是200
			if(request.readyState == 4 && request.status == 200){
				//弹出响应的信息
				alert(request.responseText);
			}
		}
		request.send();
	}

数据请求 Post

<script type="text/javascript">

	//1. 创建对象
	function  ajaxFunction(){
	   var xmlHttp;
	   try{ // Firefox, Opera 8.0+, Safari
	        xmlHttp=new XMLHttpRequest();
	    }
	    catch (e){
		   try{// Internet Explorer
		         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		      }
		    catch (e){
		      try{
		         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		      }
		      catch (e){}
		      }
	    }
	
		return xmlHttp;
	 }
	
	function post() {
		//1. 创建对象
		var request = ajaxFunction();
		
		//2. 发送请求
		request.open( "POST", "/day16/DemoServlet01", true );
	
		//如果不带数据，写这行就可以了
		//request.send();
		
		//如果想带数据，就写下面的两行
		
		//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
		request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		
		//带数据过去  ， 在send方法里面写表单数据。 
		request.send("name=aobama&age=19");
	}
</script>


		需要获取数据
		function post() {
			//1. 创建对象
			var request = ajaxFunction();
			
			//2. 发送请求
			request.open( "POST", "/day16/DemoServlet01", true );
			
			//想获取服务器传送过来的数据， 加一个状态的监听。 
			request.onreadystatechange=function(){
				if(request.readyState==4 && request.status == 200){
					
					alert("post："+request.responseText);
				}
			}
			
			//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
			request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			
			//带数据过去  ， 在send方法里面写表单数据。 
			request.send("name=aobama&age=19");
		}

校验用户名是否可用

1. 搭建环境

页面准备

<%@ 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">

	//1. 创建对象
	function  ajaxFunction(){
	   var xmlHttp;
	   try{ // Firefox, Opera 8.0+, Safari
	        xmlHttp=new XMLHttpRequest();
	    }
	    catch (e){
		   try{// Internet Explorer
		         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		      }
		    catch (e){
		      try{
		         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		      }
		      catch (e){}
		      }
	    }
	
		return xmlHttp;
	 }

	function checkUserName() {
		
		//获取输入框的值 document 整个网页
		var name = document.getElementById("name").value; // value  value() val val()
	
		//1. 创建对象
		var request = ajaxFunction();
		
		//2. 发送请求
		request.open("POST"  ,"/AjAxDemo/UserServlet" , true );
		
		//注册状态改变监听，获取服务器传送过来的数据
		request.onreadystatechange = function(){
			
			if(request.readyState == 4 && request.status == 200){
				//alert(request.responseText);
				var data = request.responseText;
				if(data == 1){
					//alert("用户名已存在");
					document.getElementById("span01").innerHTML = "<font color='red'>用户名已存在!</font>";
				}else{
					document.getElementById("span01").innerHTML = "<font color='green'>用户名可用!</font>";
					//alert("用户名未存在");
				}
			}
			
		}
		
		request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		request.send("name="+name);
	}
	
</script>
</head>
<body>
<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="password"></td>
		</tr>
		<tr>
			<td>邮箱</td>
			<td><input type="text" name="Email"></td>
		</tr>
		<tr>
			<td>简介</td>
			<td><input type="text" name="info"></td>
		</tr>
		<tr>
			<td colspan="2"><input type="submit" value="注册"></td>
		</tr>
	</table>
</body>
</html>

2. 数据库准备

3. Servlet代码

package com.wangshi.servlet;

import java.io.IOException;
import java.sql.SQLException;

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

import com.wangshi.dao.UserDaoImpl;
import com.wangshi.dao.UserDaoInte;

/**校验用户名是否可用
 * @author wanghaichuan
 *
 */
public class UserServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	
		request.setCharacterEncoding("utf-8");
		try {
			//1.检测是否存在
			String name =request.getParameter("name");
			System.out.println("name="+name);
			
			UserDaoInte udi = new UserDaoImpl();
			boolean isExist = udi.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 {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

3. Dao代码

package com.wangshi.dao;

import java.sql.SQLException;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.ScalarHandler;

import com.wangshi.util.JDBCUtil;

public class UserDaoImpl implements UserDaoInte {

	public boolean checkUserName(String username) throws SQLException {
		
		QueryRunner runner = new 	QueryRunner(JDBCUtil.getDataSource());
		Long result = (Long) runner.query("select count(*) from t_user where username=? ", new ScalarHandler(),username);
		return result> 0;
	}

}

jsp页面显示

	function checkUserName() {

		//获取输入框的值 document 整个网页
		var name = document.getElementById("name").value; // value  value() val val()
		//1. 创建对象
		var request = ajaxFunction();
		
		//2. 发送请求
		request.open("POST"  ,"/day16/CheckUserNameServlet" , true );
		
		//注册状态改变监听，获取服务器传送过来的数据
		request.onreadystatechange = function(){
			
			if(request.readyState == 4 && request.status == 200){
				//alert(request.responseText);
				var data = request.responseText;
				if(data == 1){
					//alert("用户名已存在");
					document.getElementById("span01").innerHTML = "<font color='red'>用户名已存在!</font>";
				}else{
					document.getElementById("span01").innerHTML = "<font color='green'>用户名可用!</font>";
					//alert("用户名未存在");
				}
			}
			
		}
		
		request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		request.send("name="+name);
	}

JQuery

是什么?
javascript 的代码框架。
有什么用?
简化代码，提高效率。
核心
write less do more , 写得更少，做的更多。

load

<%@ 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>jq加载load</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
		function load() {
			
			//$("#aaa").val("aaa");
			//$("#aaa").html("9999999");
			//$("#aaa").load("/day16/DemoServlet02");
			
			//$("#text01") --- document.getElementById("text01");
			$("#a").load("JQServlet",function(responseText , statusTXT  , xhr){
				//alert("jieguo:"+responseText);
				//找到id为text01的元素， 设置它的value属性值为 responseText 对应的值
				$("#a").val(responseText);
			});
		}

</script>
</head>
<body>

	<h3><input type="button"  onclick="load()" value="使用JQuery执行load方法"></h3>
	
	<input type="text" id="a">

</body>
</html>

<a href="" onclick="load()">使用JQuery执行load方法</a>
有两次刷新，  先走 onClick的方法，取到数据回来之后，赋值显示。
 接着走 href=""的路径，但是这个属性没有给值，所以会把当前的页
 面重新再刷新一次。所以导致看不见值。

//找到这个元素， 去执行加载的动作， 加载/day16/DemoServlet02 ， 得到的数据，赋值显示

$("#aaa").load("/day16/DemoServlet02" , function(responseText , statusTXT  , xhr) {
		//找到id为text01的元素， 设置它的value属性值为 responseText 对应的值
		$("#aaa").val(responseText);
	});

Get

<%@ 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>jq的get</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">



/* * val("aa"); 
> 只能放那些标签带有value属性
* html("aa"); ---写html代码
* text("aa");
> 其实没有什么区别，如果想针对这分数据做html样式处理，那么只能用html()
 */

 		/* get语法格式 ： $.get(URL,callback);	 */
		$.get("/JQDemo/JQServlet",function(data,status){
			$("#div01").text(data);
		});
		
		/* post语法格式：$.post(URL,data,callback); */
		$.post("/JQDemo/JQServlet",{name:"zhangsan",age:18},function(data,status){
			//alert("回来数据le:"+data);
			//想要放数据到div里面去。 --- 找到div
			$("#div02").html(data);
		});
		

</script>
</head>
<body>

	<h3><input type="button"  onclick="get()" value="使用JQuery执行get方法"></h3>
	<div id="div01"  style="width: 100px; height: 100px; border: 1px solid green; "></div>
	
	<h3><input type="button"  onclick="post()" value="使用JQuery执行post方法"></h3>
	<div id="div02"  style="width: 100px; height: 100px; border: 1px solid green; "></div>

</body>
</html>

load & get

load

$("#元素id").load(url地址);
$("#div1").load(serlvet); —> 使用的get请求，回来赋值的时候，使用text（）;去赋值
get
语法格式： $.get(URL,callback);
使用案例：
$.get("/JQDemo/JQServlet",function(data,status){
$("#div01").text(data);
});
post
语法格式：$.post(URL,data,callback);
使用案例：
$.post("/JQDemo/JQServlet",{name:“zhangsan”,age:18},function(data,status){
//alert(“回来数据le:”+data);
//想要放数据到div里面去。 — 找到div
$("#div02").html(data);
});

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

<!-- 导入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("/JQDemo/CheckUserNameServlet" , {name:name} , function(data , status){
			//alert(data);
			if(data == 1){//用户名存在
				//alert("用户名存在");
				$("#span01").html("<font color='red'>用户名已被注册</font>");
			}else{
				//alert("用户名可用");
				$("#span01").html("<font color='green'>用户名可以使用</font>");
			}
		} );
		//3. 输出响应的数据到页面上。
	}
	
</script>
</head>
<body>
<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>
</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">
<title>搜索一下</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
		

</script>
</head>
<body>
<center>
	<input type="text" name="word" id="word" style="width: 400px; height: 53px; font-size: 25px;">
	<input type="button"  value="搜索一下"  style="width: 100px; height: 56px;font-size: 20px;">
	
	<div id="div01" style=" position:relative; left:-50px; width: 500px;height: 200px; border: 1px solid red; display: none;"></div>
</center>
</body>
</html>

定义数据库

捕获键盘弹起

$(function(){
$("#word").keyup(function() {
alert(“键盘弹起了…”);
})
});

###JS请求
$(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);
});
}
})
});

//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("FindWordsServlet",{word:word} ,function(data , status){
				//alert(data);
				$("#div01").show();
				$("#div01").html(data);
			});
		}
		
	})
});

Servlet代码

package com.wangshi;

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

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

/**
 * 使用JQuery去实现百度搜索
 */
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执行查询
			Dao dao = new DaoImpl();
			List<word> list = dao.FindWords(word);
			
			for (word wordBean : list) {
				System.out.println("==="+wordBean.toString());
			}
			
			request.setAttribute("list", list);
			
			//3. 返回数据
			response.setContentType("text/html;charset=utf-8");
			//response.getWriter().write("数据是：");
//			响应这个jsp的页面，全部把它返回给请求者 ， 请求： 浏览器请求 ， 浏览器 看到jsp
			//$jquery ,来请
			request.getRequestDispatcher("list.jsp").forward(request, response);
		} catch (SQLException e) {
			e.printStackTrace();
		}	
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

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="word">
		<tr>
			<td>${word.word}</td>
		</tr>
	</c:forEach>
</table>

使用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">
<title>城市级联</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<!-- 这里是引用的xml的处理方法 -->
<!-- <script type="text/javascript" src="js/city.js"></script> -->

<!-- 这里是引用的json的处理方法 -->
<script type="text/javascript" src="js/city_json.js"></script>

</head>
<body>

	省份：<select id="province" name="province">
					<option value="">--请选择--</option>
					<option value="1">广东</option>
					<option value="2">湖南</option>
					<option value="3">湖北</option>
					<option value="4">四川</option>
			</select>
	城市：<select  id="city" name="city">
					<option value="">--请选择--</option>
			</select>
	
</body>
</html>

XStream的使用

package com.wangshi;

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

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

import com.thoughtworks.xstream.XStream;

/**
 * 省市级联
 */
public class CityServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		try {
			//1.获取参数
			int pid =Integer.parseInt(request.getParameter("pid")) ;
			System.out.println("pid="+pid);
			
			//2.找出所有的城市
			Dao dao = new DaoImpl();
			List<CityBean> list =  dao.findCity(pid);
			
			//3.返回数据。手动拼 ---> XStream  转化 bean对象成 xml
			XStream xStream = new XStream();
			//想把id做成属性
			//xStream.useAttributeFor(CityBean.class, "id");
			//设置xml中别名
			xStream.alias("city", CityBean.class);
			//转化一个对象成xml字符串
			String xml = xStream.toXML(list);
			
			//返回数据
			response.setContentType("text/xml;charset=utf-8");
			response.getWriter().write(xml);
			
			/*//把xml转成一个javabean对象
			xStream.fromXML(file);*/
				
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
}

// 返回数据。手动拼 —> XStream 转化 bean对象成 xml
XStream xStream = new XStream();

//想把id做成属性
xStream.useAttributeFor(CityBean.class, “id”);

//设置别名
xStream.alias(“city”, CityBean.class);

//转化一个对象成xml字符串
String xml = xStream.toXML(list);

JS代码

$(function() {
		//1。找到省份的元素
		$("#province").change(function() {
			//2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
			//$("#province").varl();
			var pid = $(this).val();
			
			/*<list>
				<city>
					<id>1<id>
					<pid>1</pid>
					<cname>深圳</cname>
				</city>
				<city >
					<id>2<id>
					<pid>1</pid>
					<cname>东莞</cname>
				</city>
			</list>*/
			
			$.post( "CityServlet",{pid:pid} ,function(data,status){
				//alert("回来数据了:"+data);
				
				//先清空以前的值：
				$("#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)
				});
			} );
			
		});
	});

服务器和客户端数据传输的方式

		<list>
  			<city>
  				<id>1<id>
  				<pid>1</pid>
  				<cname>深圳</cname>
  			</city>
  			<city >
  				<id>2<id>
  				<pid>1</pid>
  				<cname>东莞</cname>
  			</city>
  		</list>

json

阅读性更好、容量更小。
{“name”:“aaa” , “age”:19}

  把javaBean  转化成 json数据
  / 把list ---> json数据
  //JSONArray ---> 变成数组 ， 集合  []
  //JSONObject ---> 变成简单的数据  { name : zhangsan , age:18}
  	
  JSONArray jsonArray = JSONArray.fromObject(list);
  String json = jsonArray.toString();

使用json格式数据显示省市联动效果

serlvet代码：

package com.wangshi;

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

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

import com.thoughtworks.xstream.XStream;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

/**
 * 省市级联
 */
public class CityServlet02 extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		try {
			//1.获取参数
			int pid =Integer.parseInt(request.getParameter("pid")) ;
			System.out.println("pid="+pid);
			
			//2.找出所有的城市
			Dao dao = new DaoImpl();
			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 {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

js代码

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

欢乐·猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax & Jquery

Ajax是什么?“Asynchronous Javascript And XML”（异步JavaScript和XML），并不是新的技术，只是把原有的技术，整合到一起而已。 1.使用CSS和XHTML来表示。 2.使用DOM模型来交互和动态显示。 3.使用XMLHttpRequest来和服务器进行异步通信。 4.使用javascript来绑定和调用。...
复制链接

扫一扫