原生AJAX和JSON技术(此文仅仅是进行原生AJAX讨论,适应于初学者研究,不适应与有一定基础的。建议有基础的使用jQuery完成)

1     ajax介绍

1.1    什么是ajax

在普通的BS架构中,是浏览器发出请求,等待服务器响应数据,如果网络不稳定,以及服务器的响应时间过程,这时会导致客户端等待的时间很长。这样的项目用户的体现效果太差。

 传统的请求和响应,只要客户端主动发出请求,服务器才会有响应。并且在用户发出请求之后,这时用户只能等待服务器的响应,在等待的过程中,用户不能做任何的操作。 

首先在前端加入JS验证用户填写的数据。但是这些只能做简单的验证,而无法之后某些数据是否已经被注册等。

在过去只能页面的表单提交之后,向后台发出请求,这时后台程序才能查询数据库。

后来就出现了一个新的技术AJAX。它可以在用户页面不刷新(跳转)的情况主动的向服务器发送请求,并得到服务器的响应,这样用户根本体会不到当前已经从数据库中判断了某些数据是否存在。

AJAX它是在页面不主动提交任何数据的时候,根据某些JS的事件来主动的触发一些请求,直接在页面不刷新的情况下向服务器发送出请求,获取服务器短的数据。

ajax的另外一个经典的应用场景:各种的地图。

早期的ajax使用的是:javascript中的一个对象XmlHttpRequest。结合xml以及js的事件,可以在页面不刷新(跳转)的请情况给服务器(URL)发送请求,并接受响应的数据。

 

1.2    ajax的作用

作用:可以在页面不刷新的情况下,向服务器发送请求,达到页面和后台的异步交互。

1.3    ajax和服务器交互原理

 

1.4    ajax快速入门案例

<%@ 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>ajax入门</title>
<script type="text/javascript">
     // 将创建XMLHttpRequest对象的代码单独封装到一个函数中,在需要的时候直接调用
     function getXHR(){
     var xmlhttp=new XMLHttpRequest();
         return xmlhttp;
     }
      // ajax需要js的事件来触发(文本框失去焦点事件,触发ajax,请求服务器)
     function checkUsername(){
        // 得到的ajax的核心对象
        var xhr = getXHR();
        // 在处理服务器最后响应的数据的
        xhr.onreadystatechange=function(){
            if (xhr.readyState==4 && xhr.status==200){
                //alert(xhr.responseText);
                document.getElementById("myDiv").innerHTML=xhr.responseText;
            }
        }
        // 告诉核心对象,与服务器交互的URL地址,与服务器交互的请求方式get和post
        xhr.open("GET","${pageContext.request.contextPath}/ajax",true);
        // 和服务器交互有没有数据
        xhr.send();
    }
</script>
</head>
<body>
    用户名:<input type="text" name="username" οnblur="checkUsername();"/>
    <div id="myDiv"></div>
</body>
</html>

接受请求的servlet

/**

 * 接受通过ajax的请求,并响应数据

 */

publicclass AjaxServlet extends HttpServlet {
    privatestaticfinallongserialVersionUID = 1L;
    protectedvoid doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException {
        System.out.println("请求接受到了");
       response.setContentType("text/html;charset=utf-8");
       response.getWriter().write("哈喽,你好!!!");
    }
   protectedvoid doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}
1.4.1   获取XMLHttpRequest对象

ajax中使用到的技术:html、JavaScript、dom、xml、json、核心(XMLHttpRequest)对象

使用ajax技术向后台发送请求,必须先获取到XMLHttpRequest对象。XMLHttpRequest它是一个JavaScript对象。

获取这个对象,不同的浏览器,获取方式不一样:

1.4.2   设置回调函数

先发起一个请求(调用),在请求(调用)告诉服务器(被调用者)处理完之后需要继续调用在发起请求(调用)时传递一个函数。这个函数就被称为回到函数。

1.4.3   open操作

1.4.4   send操作

如果是post请求,可以在send中书写key=value&key=value这样的数据。

1.5    XMLHttpRequest API 详解

1.5.1   onreadystatechange属性

xmlhttprequest中的onreadystatechange属性是用来设置一个函数,被服务器调用:

服务器在调用的时候,会调用xmlhttprequest对象中的readyState属性发生变化:状态有0  1 2  3  4

1.5.2   readyState属性

readyState属性是xmlhttprequest对象的属性,它是表示当前ajax引擎和服务器交互过程中的变化情况,通过5个数字体现状态变化:

0 : 表示客户端建立了xmlhttprequest对象,但并没有和服务器进行交互

1 : 表示客户端已经调用xmlhttprequest对象中的open方法,打开了和服务器的连接

2 : 表示客户端已经调用xmlhttprequest对象中的send方法,发送出了请求数据

3 : 表示服务器已经处理完请求但还没有给客户端响应数据

4 : 表示服务器响应数据正常结束

1.5.3   status属性

status属性是xmlhttprequest对象中的用于表示服务器响应数据的状态码的描述。

200 表示服务器响应数据一切正常。500 服务器内部出错。和学习http协议中的响应的状态码一致。


1.5.4   open方法

通过xmlhttprequest对象中的open方法,可以打开和服务器之间的连接。

open方法上接受三个参数:xhr.open("GET","${pageContext.request.contextPath}/ajax",true);

         第一个参数:发送的请求是什么方式:get和post

         第二个参数:客户端需要请求服务器的具体的资源

         第三个参数:是否和页面是异步执行

1.5.5   send方法

xmlhttp.send(null);

xmlhttprequest对象中的send方法是给服务器端发送数据的方法。

如果open方法中的请求方式为get方式的话,这时send中可以书写成null

如果请求的post方式,可以在send中携带数据,相当于在页面提交表单的时把表单的method修改成post,所有的数据在提交的时候,都会在请求体中。

xmlhttp.open("POST","ajax_test.html",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Henry&lname=Ford");

 

1.5.6   setRequestHeader方法

xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

只有是post请求的时候,才需要setRequestHeader设置,如果是get请求可以不用。

1.5.7   responseText属性

responseText属性也是xmlhttprequest的属性,它是用于描述封装服务器给客户端响应的文本数据。在onreadystatechange函数体中可以通过responseText获取通过ajax请求响应到的数据。

 

1.5.8   responseXML属性

responseXML还是xmlhttprequest的属性。它是封装服务器响应给客户端的xml文件类型的数据。

在onreadystatechange函数中可以使用JS和dom技术来解析这个xml,完成进一步的操作。

 

1.6    总结ajax

XMLHttpRequest对象是ajax的核心。

         五个属性:

                   onreadystatechange: 监控XMLHttpRequest对象和服务器之间每个交互细节过程。每个过程的变化都会出发一个绑定在onreadystatechange上的匿名函数执行。

                   readyState: 表示XMLHttpRequest对象和服务器之间每个变化的状态

                            0: 还没有连接服务器

                            1: 连接服务器

                            2: 发送请求给服务器

                            3: 服务器接收请求并处理中

                            4: 服务器请求处理完成,并响应回来了。

                   status: 服务器响应的状态码

                   responseText: 服务器响应的文本数据

                   responseXML:服务器响应的xml数据

         3个方法:

                   open(3个参数) :XMLHttpRequest对象打开和服务器的连接

                   send: 发送请求,如果是post方式的请求,可以在send携带参数

                   setRequestHeader: 如果是post请求,需要设置请求头的Context-type类型。

 

1.7    验证用户名是否重复

分析:

1、  需要页面,提交数据。但是是用户并没有真正的点击提交按钮的情况下,到后台查询这个用户名是否存在。

2、  需要后台的数据库支持。

<%@ 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>ajax入门</title>

<script type="text/javascript">

    // 将创建XMLHttpRequest对象的代码单独封装到一个函数中,在需要的时候直接调用

    function getXHR(){
        var xmlhttp=new XMLHttpRequest();
        return xmlhttp;
    }
    // ajax需要js的事件来触发(文本框失去焦点事件,触发ajax,请求服务器)
    function checkUsername(){
        // 在发送ajax请求之前,需要获取到用户输入的用户名的数据
        var username = document.getElementById("username").value;
        // 这里应该先简单的判断数据合法性,如果用户根本就没有输入任何的数据,就不同发送ajax请求
        if(username == ""){
            alert("请输入数据");
            return ;
        }
        // 只有用户输入了数据,才向服务器发送请求
        // 得到的ajax的核心对象
        var xhr = getXHR();
        // 在处理服务器最后响应的数据的
        xhr.onreadystatechange = function(){
            // 在函数中需要判断状态是否为4(服务器响应回来了)
            // status 中放的是服务器响应的状态码,只有状态码是200,才表示响应是正常的
            if (xhr.readyState==4 && xhr.status==200){
                var data = xhr.responseText;
                if( data == 0 ){
                    document.getElementById("myDiv").innerHTML = "<fontcolor='green' size='3'>用户名可用</font>";
                }else{
                    document.getElementById("myDiv").innerHTML = "<fontcolor='red' size='3'>用户已注册</font>";
                }
            }
        }
        // 告诉核心对象,与服务器交互的URL地址,与服务器交互的请求方式get和post       xhr.open("GET","${pageContext.request.contextPath}/ajax?username="+username,true);
        // 和服务器交互有没有数据
        xhr.send();
    }
</script>
</head>
<body>
    用户名:<input id="username" type="text" name="username" οnblur="checkUsername();"/>
    <span id="myDiv"></span>
</body>
</html>

 

/**

 * 接受通过ajax的请求,并响应数据

 */

publicclass AjaxServlet extends HttpServlet {
    privatestaticfinallongserialVersionUID = 1L;    
    protectedvoid doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
        // 设置编码
        request.setCharacterEncoding("utf-8");
        String username = request.getParameter("username");
        // 调用service
        UserService service = new UserService();
        booleanb = service.checkUsername(username);
        response.setContentType("text/html;charset=utf-8");
        if( b ){ //返回的true,就认为有,
            response.getWriter().write("1");
        }else{
            response.getWriter().write("0");
       }
    protectedvoid doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}
public class UserService {

	public boolean checkUsername(String username) {
		UserDao dao = new UserDao();
		try {
			User user = dao.checkUsername(username);
			if(user == null){
				return false;
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return true;
	}
}
public class UserDao {
	public User checkUsername(String username) throws SQLException {
		QueryRunner qr = new QueryRunner(JDBCUtils.getDataSource());
		String sql = "select * from users where username = ?";
		return qr.query(sql, new BeanHandler<User>(User.class), username);
	}
}

2     JSON技术

2.1    json介绍与入门

2.1.1   什么是json

json是一种数据格式:它可以在网络中传输数据。

文本:它本质是一个字符串,在Java代码中可以将其看成String。在JS中,可以将这个文本解析为JS对象。当作JS的对象来使用。

2.1.2   json介绍



2.1.3   json的语法格式

JSON的数据格式:在JSON的数据中,所有的数据key都必须是字符串。value值可以对象等内容。JSON代码的表示形式有两种:1、{  } 封装 ; 2、使用[  ]封装(js中数组)

1、使用{} 封装 

{ 
"book": [ 
{ "id":"01", "language": "Java", "edition": "third", "author": "Herbert Schildt" }, 
{ "id":"07", "language": "C++", "edition": "second" "author": "E.Balagurusamy" }
] 
}
2、使用[] 封装

 

JSON书写时key和value的约束:

       JSON中的所有的key必须是字符串。

         JSON中的所有的value值:

数字(整数或浮点数)

字符串(在双引号中)

逻辑值(true 或 false)

数组(在方括号中)

对象(在花括号中)

可以是方法

null

2.2    JSON数据的使用 

<script type="text/javascript">
	// JS中的全局对象(函数):这些函数不属于任何一个对象的,可以直接通过函数名调用
	//var s = "alert(123)";
	//document.write(s);
	//eval(s);
	
	var json = {
			'book': [
	        		{'id':'01','language': 'Java','edition': 'third','author': 'Herbert Schildt'},
					{'id':'07','language': 'C++','edition': 'second','author': 'E.Balagurusamy'}
	        		]
			  };
	
	/*
		获取json格式中的数据	
		通过json的key值获取value值
		如果json格式的数据根简单,可以直接json对象.key的方式获取,
		如果json数据格式比较复杂,建议使用for in 循环遍历。
	*/
	//alert(json.book[0].id);
	//alert(json.book[0].language);
	//alert(json.book[0].edition);
	var arr = [11,22,33,0,9,6,7];
	/*
		js中的for in 类似于Java中的foreach循环,
		但是js中的for in遍历数组的时候,定义的变量是数组中某个元素的下标,
		而不是从数组中取出的那个值。
		
		但是如果使用JS的for in 遍历的是对象(json、或者其他的js对象),
		这时的变量就是对象中的属性的名称,可以理解成是json的key值
		
		在遍历json的时候,如果json放在数组或者json中套json,这时所有使用.key的地方
		建议全部改写为[key],这样可以防止key中有特殊的符号
	*/
	for( var i = 0 ; i < json.book.length ; i++){
		for( var element in json.book[i] ){
			alert(element +":"+ json.book[i][element] )
		}
	}
	
</script>

2.3    json转js对象

 

2.4    页面省市县(三级联动)

2.4.1   分析省市县联动

在一些网站上,地址信息是需要先选择省,根据省的信息加载省下面的所有的市的信息,然后根据市的信息加载县的信息。(这个过程为三级联动)。

只要更改省或者市的时候下一级的下拉框就需要跟着改变。

这里的实现:

         通过数据库的加载相关的数据:

 

CREATE TABLE province(
    codeid INT NULL,  
    parentid INT NULL,
    cityName VARCHAR(50) NULL 
);

codeid : 相当于主键。是每个省、市、县的唯一标识。

省的parentid为0,

如果某个市的parentid等于某个省的codeid,就说明这个市是这个省下面的一个市。

如果某个县的parentid,等于某个市的codeid,说明当前这个县就是这个市下面的一个县。

因此查询的时候,只要根据parentid,来进行条件查询即可。

 

例如:现在知道的是具体的某个省,需要查询它下面的所有的市:

         select* from province where parentid = 当前这个省的codeid

 

2.5    省市县联动实现

2.5.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>练习省市县的联动效果</title>
<script type="text/javascript">
	// 省的信息,应该是在页面加载完成之后就需要加载并添加到省的select下面
	window.onload = function(){
		//页面加载完成之后,调用方法,加载省的信息
		addProvince();
	}
	function addProvince(){
		// 创建XMLHttprequest对象
		var xhr = new XMLHttpRequest();
		// 设置状态改变监控的那个属性
		xhr.onreadystatechange = function(){
			if( xhr.readyState == 4 && xhr.status == 200 ){
				// 获取服务器响应的省的数据,并添加
				var pro = eval("("+xhr.responseText+")");
				// 遍历json格式的省的信息数据,遍历出来一个省的信息,就在页面上省的select下面添加一个option
				var provinceSelect = document.getElementById("province");
				for( var i in pro){
					//创建一个option,添加到select下面
					var option = document.createElement("option");
					option.innerHTML = pro[i].cityName;
					option.setAttribute("value",pro[i].id);
					// 将这个option添加到select下面
					provinceSelect.appendChild(option);
				}
			}
		}
		// 打开连接
		xhr.open("post","${pageContext.request.contextPath}/getProvince",true);
		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		// 发送
		xhr.send("parentid=0");
	}
	
	// 书写加载市的js代码
	function getCity(){
		// 获取到页面上选中的省的value值(id)
		// 获取到页面上省的额select
		var province = document.getElementById("province");
		// 获取省的select下的所有的option
		var proOptions = province.options;
		// 获取到数组中选中的省
		var pro = proOptions[province.selectedIndex];
		// 获取到选中的省的id
		var id = pro.value;
		
		// 创建XMLHttprequest对象
		var xhr = new XMLHttpRequest();
		// 设置状态改变监控的那个属性
		xhr.onreadystatechange = function(){
			if( xhr.readyState == 4 && xhr.status == 200 ){
				// 需要将市的信息添加到市的select下面
				var citySelect = document.getElementById("city");
				// 每次改动市的时候,都需要将市下面原来的数据清空
				citySelect.length = 1;
				// 将后台查询到的市的json数据转成json对象
				var cityJson = eval("("+xhr.responseText+")");
				// 遍历json对象(后台拼接的是一个[{},{},{},.....])
				for( var i in cityJson ){
					// 创建option标签
					var option = document.createElement("option");	
					// 给option中添加文本数据
					option.innerHTML = cityJson[i].cityName;
					// 设置value属性
					option.setAttribute("value",cityJson[i].id);
					// 将市的option添加到市的select下面
					citySelect.appendChild(option);
				}
			}
		}
		// 打开连接
		xhr.open("post","${pageContext.request.contextPath}/getCity",true);
		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		// 发送
		xhr.send("parentid="+id);
	}
	
	
	// 加载县或者区的信息
	function getcounty(){
		// 获取当前的市的select
		var citySelect = document.getElementById("city");
		// 获取市的select下面的所有的option
		var options = citySelect.options;
		// 获取选中的option
		var op = options[citySelect.selectedIndex];
		// 获取选中的市的id
		var id = op.value;

		// 创建XMLHttprequest对象
		var xhr = new XMLHttpRequest();
		// 设置状态改变监控的那个属性
		xhr.onreadystatechange = function(){
			if( xhr.readyState == 4 && xhr.status == 200 ){
				// 获取到服务器响应的数据
				var json = eval("("+xhr.responseText+")");
				// 获取县的select
				var countySelect = document.getElementById("county");
				// 每次都需要情况县到 select中的数据
				countySelect.length = 1;
				// 遍历数组
				for( var i in json ){
					// 创建option
					var option = document.createElement("option");
					// 设置数据
					option.innerHTML = json[i].cityName;
					option.setAttribute("value" , json[i].codeid);
					// 将这个option添加到县的select下面
					countySelect.appendChild(option);
				}
			}
		}
		// 打开连接
		xhr.open("post","${pageContext.request.contextPath}/getCounty",true);
		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		// 发送
		xhr.send("parentid="+id);
	}

</script>
</head>
<body>
	<center>
		<!-- 省的下拉框 -->
		<select id="province" οnchange="getCity();">
			<option value="none">--请选择省--</option>
		</select>
		<!-- 市的下拉框 -->
		<select id="city" οnchange="getcounty();">
			<option>--请选择市--</option>
		</select>
		<!-- 县的下拉框 -->
		<select id="county">
			<option>--请选择县--</option>
		</select>
	</center>
</body>
</html>
2.5.2   获取省的servlet
/**
 * 加载省的servlet程序
 */
public class GetProvinceSservlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public GetProvinceSservlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 获取提交的父id
		String parentid = request.getParameter("parentid");
		
		// 调用service
		ProvinceService service = new ProvinceService();
		List<Province> pros = service.getProvince(parentid);
		// 查询到了当前所有的省的信息。给客户端响应省的数据,以json的形式响应
		/*
		 * [
		 * 	{"id":11,"cityName":"北京"},{"id":22,"cityName":"天津"},{},{},{}
		 * ]
		 */
		StringBuilder sb = new StringBuilder();
		// 这里遍历集合,取出每个省的信息,然后拼接到sb容器中
		sb.append("[");
		for (Province pro : pros) {
			sb.append("{");
			sb.append("\"id\":"+pro.getCodeid());
			sb.append(",\"cityName\":\""+pro.getCityName()+"\"");
			sb.append("},");
		}
		sb.append("]");
		sb.delete(sb.length()-2 , sb.length()-1);
		
		// 响应这个生成的json数据
		response.setContentType("application/json;charset=utf-8");
		response.getWriter().write(sb.toString());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}
2.5.3   获取省的service
public class ProvinceService {

	public List<Province> getProvince(String parentid) {
		ProvinceDao dao = new ProvinceDao();
		try {
			return dao.getProvince(parentid);
		} catch (SQLException e) {
			e.printStackTrace();
		}	
		return null;
	}
}
2.5.4   获取省的dao
public class ProvinceDao {

	public List<Province> getProvince(String parentid) throws SQLException {
		QueryRunner qr = new QueryRunner(JDBCUtils.getDataSource());
		String sql = "SELECT * FROM province WHERE parentid = ?";
		return qr.query(sql, new BeanListHandler<Province>(Province.class), parentid);
	}

}
2.5.5   省的JavaBean
/*
 * 表示省的那个对象
 */
public class Province {
	private int codeid;
	private int parentid;
	private String cityName ;
	public int getCodeid() {
		return codeid;
	}
	public void setCodeid(int codeid) {
		this.codeid = codeid;
	}
	public int getParentid() {
		return parentid;
	}
	public void setParentid(int parentid) {
		this.parentid = parentid;
	}
	public String getCityName() {
		return cityName;
	}
	public void setCityName(String cityName) {
		this.cityName = cityName;
	}
}
2.5.6   获取市的servlet
/**
 * Servlet implementation class GetCityServlet
 */
public class GetCityServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public GetCityServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 获取id
		String parentid = request.getParameter("parentid");
		
		CityService service = new CityService();
		List<City> cities = service.getCity(parentid);
		
		StringBuilder sb = new StringBuilder();
		// 这里遍历集合,取出每个省的信息,然后拼接到sb容器中
		sb.append("[");
		for (City c : cities) {
			sb.append("{");
			sb.append("\"id\":"+c.getCodeid());
			sb.append(",\"cityName\":\""+c.getCityName()+"\"");
			sb.append("},");
		}
		sb.append("]");
		sb.delete(sb.length()-2 , sb.length()-1);
		
		// 响应这个生成的json数据
		response.setContentType("application/json;charset=utf-8");
		response.getWriter().write(sb.toString());
	
	}

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

}
2.5.7   获取市的service
public class CityService {

	public List<City> getCity(String parentid) {
		CityDao dao = new CityDao();
		try {
			return dao.getCity(parentid);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}

}
2.5.8   获取市的dao
public class CityDao {

	public List<City> getCity(String parentid) throws SQLException {
		QueryRunner qr = new QueryRunner(JDBCUtils.getDataSource());
		String sql = "SELECT * FROM province WHERE parentid = ?";
		return qr.query(sql, new BeanListHandler<City>(City.class), parentid);
	}

}
2.5.9   市的JavaBean
public class City {
	private int codeid;
	private int parentid;
	private String cityName;
	public int getCodeid() {
		return codeid;
	}
	public void setCodeid(int codeid) {
		this.codeid = codeid;
	}
	public int getParentid() {
		return parentid;
	}
	public void setParentid(int parentid) {
		this.parentid = parentid;
	}
	public String getCityName() {
		return cityName;
	}
	public void setCityName(String cityName) {
		this.cityName = cityName;
	}
	
}
2.5.10         获取县的servlet
/**
 * 加载县的servlet
 */
public class GetCountyServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public GetCountyServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 获取县的父id
		String parentid = request.getParameter("parentid");
		
		// 创建service对象
		CountyService service = new CountyService();
		// 调用后台湖区到当前某个市下的所有的县数据
		List<County> county = service.getCounty(parentid);
		
		// 使用阿里巴巴的fastjson
		String json = JSON.toJSONString(county);
		// 响应
		response.setContentType("application/json;charset=utf-8");
		response.getWriter().write(json);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}
2.5.11         获取县的service
public class CountyService {

	public List<County> getCounty(String parentid) {
		CountyDao dao = new CountyDao();
		try {
			return dao.getCounty(parentid);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}

}
2.5.12         获取县的dao
public class CountyDao {

	public List<County> getCounty(String parentid) throws SQLException {
		QueryRunner qr = new QueryRunner(JDBCUtils.getDataSource());
		String sql = "SELECT * FROM province WHERE parentid = ?";
		return qr.query(sql, new BeanListHandler<County>(County.class), parentid);
	}

}
2.5.13         县的JavaBean
public class County {
	private int codeid;
	private int parentid;
	private String cityName;
	public int getCodeid() {
		return codeid;
	}
	public void setCodeid(int codeid) {
		this.codeid = codeid;
	}
	public int getParentid() {
		return parentid;
	}
	public void setParentid(int parentid) {
		this.parentid = parentid;
	}
	public String getCityName() {
		return cityName;
	}
	public void setCityName(String cityName) {
		this.cityName = cityName;
	}
	
}

2.5.14         程序问题

上面的获取省市县的后台servlet、service、dao没有必要分开来写,可以整合的到一起。

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

QB哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值