Day50 ajax和Json数据格式

Ajax学习

http://www.runoob.com/ajax/ajax-tutorial.html

问题：

目前来，所有的请求的发送都是通过浏览器自己直接进行发送，响应是浏览器在接收到响应信息后自主的将响应数据覆盖当前页面显示。现在，要求在保留原有页面内容的情况下显示新的响应内容。

解决:

使用ajax技术

ajax原理:

请求由ajax引擎对象发送，响应数据，浏览器不会直接进行处理，而是流转给发请求的ajax引擎对象。这样我们可以通过操作ajax引擎对象变相的实现在页面中显示新的响应资源。
本质：
js的DOM操作中的数据由程序员自己写死声明，变成从服务器动态的获取。
使用：
js中的ajax:

1 创建ajax引擎对象
            var  ajax;
                if(window.XMLHttpRequest){
                    ajax=new XMLHttpRequest//火狐 谷歌
                }else if(window.ActiveXObject){
                    ajax=new ActiveXObject("Msxml2.XMLHTTP");//ie
                }
        2 声明ajax监听函数
            ajax.onreadystatechange=function(){
                //判断数据状态码
                if(ajax.readyState==4){//4 表示响应数据成功接收
                    //判断响应状态码
                    if(ajax.status==200){
                        //获取响应数据
                            //普通文本
                            //json格式数据
                                var data=ajax.responseText;
                            //xml数据
                                //var doc=ajax.responseXML;
                            var data=ajax.responseText;
                        //处理响应数据(js的DOM操作)
                            var showdiv=document.getElementById("showdiv");
                            showdiv.innerHTML=data;
                    }else if(ajax.status==404){
                        var showdiv=document.getElementById("showdiv");
                        showdiv.innerHTML="请求资源未找到";
                    }else if(ajax.status==500){
                        var showdiv=document.getElementById("showdiv");
                        showdiv.innerHTML="服务器繁忙";
                    }
                }   
            }
        3 创建并发送请求
            ajax.open(method,url,async)
            ajax.send("请求数据")
            解释:
                method：表示请求的方式，值为get/post
                url:表示请求地址，一般为要请求的servlet的别名。
                async:表示异步还是同步请求，true表示异步，false表示同步，默认为异步。
            注意：
                如果请求方式是get方式，则请求数据需要拼接在url的后面，以？隔开，键值对。并且send中要写null
                如果是post请求方式，则在send方法中书写请求数据即可。并且要声明数据的提交格式为键值对。
            示例：
                    //使用get方式
                        ajax.open("get","user?uname="+uname,true);
                        ajax.send(null);
                    //post方式
                        ajax.open("post","user", true);
                        //设置请求数据的格式
                        ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                        ajax.send("un="+uname);
        4 ajax的响应数据格式
            普通文本：
                后台在接收到ajax请求后，处理后直接响应普通字符串给ajax
            josn数据：
                后台在接收到ajax请求后，处理后响应json格式的字符串给ajax
                ajax处理代码中使用eval()方法将json数据转换为js对的对象，将对象中的数据通过js的dom操作显示到页面中。
                注意：
                    json格式：
                        var 对象名={
                            键名:值,
                            键名:值,
                            ........
                        }
            xml数据：
                后台在接收到ajax请求后，处理后响应xml格式的字符串给ajax。
                前台使用ajax.responseXML进行数据接收，返回的是xml文档对象(document)。
                使用document对象将xml中取出并显示到页面中即可
                注意：
                    后台的响应数据格式必须设置成xml格式：
                    resp.setContentType("text/xml;charset=utf-8");  
    注意：
        ajax是前端的技术，由浏览器进行解析执行。

    使用流程（原生）：
        1 创建ajax引擎对象
        2 覆写onreadystatechange函数
            判断数据状态码
                判断响应状态码
                    获取响应数据
                    处理响应信息
        3 创建并发送请求
    封装：
        相同的保留，不同的传参。最终封装成一个js文件。

练习代码：
com.bjsxt.pojo：
User.java：

package com.bjsxt.pojo;

public class User {
    private int uid;
    private String uname;
    private String upwd;
    private String uphone;
    private String rid;
    public int getUid() {
        return uid;
    }
    public void setUid(int uid) {
        this.uid = uid;
    }
    public String getUname() {
        return uname;
    }
    public void setUname(String uname) {
        this.uname = uname;
    }
    public String getUpwd() {
        return upwd;
    }
    public void setUpwd(String upwd) {
        this.upwd = upwd;
    }
    public String getUphone() {
        return uphone;
    }
    public void setUphone(String uphone) {
        this.uphone = uphone;
    }
    public String getRid() {
        return rid;
    }
    public void setRid(String rid) {
        this.rid = rid;
    }
    @Override
    public String toString() {
        return "User [uid=" + uid + ", uname=" + uname + ", upwd=" + upwd
                + ", uphone=" + uphone + ", rid=" + rid + "]";
    }
    @Override
    public int hashCode() {
        final int prime = 31;
        int result = 1;
        result = prime * result + ((rid == null) ? 0 : rid.hashCode());
        result = prime * result + uid;
        result = prime * result + ((uname == null) ? 0 : uname.hashCode());
        result = prime * result + ((uphone == null) ? 0 : uphone.hashCode());
        result = prime * result + ((upwd == null) ? 0 : upwd.hashCode());
        return result;
    }
    @Override
    public boolean equals(Object obj) {
        if (this == obj)
            return true;
        if (obj == null)
            return false;
        if (getClass() != obj.getClass())
            return false;
        User other = (User) obj;
        if (rid == null) {
            if (other.rid != null)
                return false;
        } else if (!rid.equals(other.rid))
            return false;
        if (uid != other.uid)
            return false;
        if (uname == null) {
            if (other.uname != null)
                return false;
        } else if (!uname.equals(other.uname))
            return false;
        if (uphone == null) {
            if (other.uphone != null)
                return false;
        } else if (!uphone.equals(other.uphone))
            return false;
        if (upwd == null) {
            if (other.upwd != null)
                return false;
        } else if (!upwd.equals(other.upwd))
            return false;
        return true;
    }
    public User() {
        super();
        // TODO Auto-generated constructor stub
    }
    public User(int uid, String uname, String upwd, String uphone, String rid) {
        super();
        this.uid = uid;
        this.uname = uname;
        this.upwd = upwd;
        this.uphone = uphone;
        this.rid = rid;
    }




}

com.bjsxt.servlet：
AjaxDataServlet.java：

package com.bjsxt.servlet;

import java.io.IOException;
import java.util.ArrayList;

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

import com.bjsxt.pojo.User;
import com.google.gson.Gson;


public class AjaxDataServlet extends HttpServlet {
 @Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
        throws ServletException, IOException {
    //设置请求编码格式
            //设置响应编码格式
            resp.setCharacterEncoding("utf-8");
            resp.setContentType("text/html;charset=utf-8");
            //获取请求信息
            //处理请求信息
                User u=new User(1,"柳岩","666","15566778899","2");
                ArrayList<User> list=new ArrayList<User>();
                list.add(new User(2, "关晓彤1","777", "15566778899","3"));
                list.add(new User(2, "关晓彤2","777", "15566778899","3"));
                list.add(new User(2, "关晓彤3","777", "15566778899","3"));
            //响应处理结果
                //直接响应
                    //响应普通文本数据
                        //resp.getWriter().write("ajax的数据格式学习");
                    //响应json格式的字符串数据(重点)
                        //resp.getWriter().write("{uid:'"+u.getUid()+"',uname:'"+u.getUname()+"',upwd:'"+u.getUpwd()+"'}");
                    String str=new Gson().toJson(list);
                    resp.getWriter().write(str);
                    //响应XML数据(了解)
                        //resp.getWriter().write("<peson><name>刘诗诗</name><age>28</age></peson>");
}
} 

DataServlet.java：

package com.bjsxt.servlet;

import java.io.IOException;

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

public class DataServlet extends HttpServlet {
 @Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
        throws ServletException, IOException {
     //设置请求编码格式
     //设置响应编码格式
     //获取请求信息
     //处理请求信息
     //响应请求信息
         //直接响应

     resp.getWriter().write("This is my first ajax!");
         //请求转发
         //重定向
}
}

UserServlet.java：

package com.bjsxt.servlet;

import java.io.IOException;

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

public class UserServlet extends HttpServlet {
 @Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
        throws ServletException, IOException {
     //设置请求编码格式
     req.setCharacterEncoding("utf-8");
     //设置响应编码格式
     resp.setCharacterEncoding("utf-8");
     resp.setContentType("text/html;charset=utf-8");
     //获取请求信息
     String uname=req.getParameter("uname");
     System.out.println(uname);
     //直接响应
     if("张三".equals(uname)){
         resp.getWriter().write("true");
     }else{
         resp.getWriter().write("false");
     }
}
}

ajax.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>ajax学习</title>
<style type="text/css"> 
 #showdiv{
  border: solid 1px;
  width:200px;
  height:200px;
  background-color: orange;
 }
</style>
<script type="text/javascript">
        //第一个ajax程序
                function  ajaxFirst(){
              //创建ajax引擎对象
              var ajax=new XMLHttpRequest();
              //声明响应时间
              ajax.onreadystatechange=function(){
                    //获取响应数据
                    var data=ajax.responseText;
                     //获取元素对象
                    var showdiv=document.getElementById("showdiv");
                    //操作元素内容
                    showdiv.innerHTML=data;         
              }
              //使用ajax引擎对象发送
                ajax.open("get", "data");
                ajax.send(null);       
        }
       //监听函数优化
          function ajaxSecond(){
            //创建ajax引擎对象
              var ajax;
             if(window.XMLHttpRequest){
                 ajax=new XMLHttpRequest();  //火狐  谷歌
             }else if(window.ActiveXObject){
                 ajax=new ActiveXObejct("Msxml2.XMLHTTP"); //ie
             } 
            //声明监听函数
            ajax.onreadystatechange=function(){
                //判断状态值
                if(ajax.readyState==4){  //数据成功返回
                    if(ajax.status==200){//网站成功打开
                        //获取响应数据
                        var data=ajax.responseText;
                        //处理响应数据   jsDOM操作
                        var showdiv=document.getElementById("showdiv");
                        showdiv.innerHTML=data;
                    }else if(ajax.status==404){
                           var showdiv2=document.getElementById("showdiv");
                            showdiv.innerHTML="请求资源未找到";
                    }else if(ajax.status==500){
                           var showdiv2=document.getElementById("showdiv");
                            showdiv.innerHTML="服务器繁忙";
                    }
                } 
            }
            //发送ajax引擎对象
            ajax.open("get", "data");
            ajax.send(null);
            alert("我被执行了");
       }
       //ajax请求讲解
         function getData3(){
           //获取用户数据
           var uname=document.getElementById("uname").value;
           //创建ajax引擎对象
           var ajax;
           if(window.XMLHttpRequest){
               ajax=new XMLHttpRequest();
           }else if(window.ActiveXObject){
               ajax=new ActiveXObject("Msxml2.XMLHTTP");
           }
           //声明ajax函数
           ajax.onreadystatechange=function(){
               //判断状态值
               if(ajax.readyState==4){
                   if(ajax.status==200){
                       //获取响应数据
                      var data= ajax.responseText;
                       //处理响应数据
                     var span= document.getElementById("unameSpan");
                       if(eval(data)){
                           span.innerHTML="*该用户已经注册";
                           span.style.color="red";
                       }else{
                           span.innerHTML="*用户名OK";
                           span.style.color="green";
                       }
                   }else if(ajax.status==400){
                       alert("请求资源未找到");
                   }else if(ajax.status=500){
                       alert("服务器繁忙");
                   }else{
                       alert("未知错误");
                   }
               }
           }
           //创建并发送ajax对象
           ajax.open("get","user?uname="+uname,true);
           ajax.send(null);
       }
         function getData4(){
                //创建ajax引擎对象
                    var ajax;
                    if(window.XMLHttpRequest){
                        ajax=new XMLHttpRequest();
                    }else if(window.ActiveXObject){
                        ajax=new ActiveXObject("Msxml2.XMLHTTP");
                    }
                //复写onreadystatechange函数
                ajax.onreadystatechange=function(){
                    //判断数据状态码
                    if(ajax.readyState==4){
                        //判断响应状态码
                        if(ajax.status==200){
                            //获取响应信息
                                //普通文本
                                    //var data=ajax.responseText;
                                //json格式的数据
                                    var data=ajax.responseText;
                                //xml数据
                                    //var doc=ajax.responseXML;
                                    //alert(doc.getElementsByTagName("name")[0].firstChild.data);   
                            //处理响应信息
                                eval("var obj="+data);
                                alert(obj[0].uname);
                        }
                    }   
                }   
                //创建并发送请求
                ajax.open("get","ajaxData", true);
                ajax.send(null);
            }   
        //js的对象学习
         function testObj(){
            //声明js对象--传统方式
            var obj=new Object() //声明一个空对象
            //数据填充
            obj.uname="张三";
            obj.test=function(){alert("我是函数test")};
            //声明js对象--json格式
            var obj2={
                    uname:"张三",
                    test:function(){
                        alert("我是json")
                    }
            }
            alert(obj2.uname);
            obj2.test();
        }
</script>
</head>
<body>
 <h3>ajax学习</h3>
 <hr />
 <h4>第一个ajax程序</h4>
 <input type="button" value="第一个ajax程序" onclick="ajaxFirst()"/>
 <input type="button" value="监听函数优化" onclick="ajaxSecond()"/>
 <div id="showdiv"></div>
  <h3>用户名校验</h3>
         昵称：<input type="text" name="uname"  id="uname" value="" onblur="getData3()"/><span id="unameSpan"></span><br />
            <input type="button" value="测试数据" onclick="getData4()" />
        <input type="button" value="测试js的对象" onclick="testObj()" /> 
</body>
</html>

封装过的ajax:
ajaxFz.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'ajaxFz.jsp' starting page</title>
    <meta charset="utf-8"/>
    <style type="text/css">
    #showdiv{
            border:solid 1px;
            width: 200px;
            height:200px;
            background-color: orange;
        }
    </style>
    <script type="text/javascript">
  //声明ajax
    /*
        method：值为get或者post
        url：值为请求地址
        data:请求的数据，格式为键值对，不同的键值对使用&符号隔开。如果不需要请求数据，则传递null
            示例： "a=1&b=3"
        deal200:表示接受一个函数对象，用来处理ajax数据
                注意：声明的函数对象，必须带有一个形参，用来接收ajax引擎对象，例如
                function(ajax){
                    var data=ajax.responeText;  
                }
        deal404：表示接收一个函数对象，用来处理404错误
        deal500：表示接收一个函数对象，用来处理500错误
        async：设置异步还是同步，值为true或者false
    */

        //创建函数获取ajax对象
        function getAjax(){
            //创建ajax引擎对象
            var ajax;
            if(window.XMLHttpRequest){
                ajax=new XMLHttpRequest();
            }else if(window.ActiveXObject){
                ajax=new ActiveXObject("Msxml2.XMLHTTP");
            }
            return ajax;
        }
        function myAjax(method,url,data,deal200,deal404,deal500,async){
            //创建ajax引擎对象
            var ajax=getAjax();
            //复写onreadystatechange
            ajax.onreadystatechange=function (){
                //判断状态值
                if(ajax.readyState==4){
                    //判断状态码
                    if(ajax.status==200){
                        if(deal200){
                            deal200(ajax);
                        }
                        //获取回应数据
                        //处理回应数据
                    }else if(ajax.status==404){
                        if(deal404){
                            deal404();
                        }
                    }else if(ajax.status==500){
                        if(deal500){
                            deal500();
                        }
                    }
                }
            }
            //发送ajax引擎对象
             if("get"==method.toLowerCase()){
                 ajax.open("get", url+(data!=null?"?"+data:""), async);
                 ajax.send(null);
             }else if("post"==method.toLowerCase()){
                 ajax.open("post",url,async);
                //设置请求数据的格式
                    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                    ajax.send(data);
                 }
        }
        //测试封装：
        function getData(){
            myAjax("get","data",null, function(ajax){
                var data=ajax.responseText;
                document.getElementById("showdiv").innerHTML=data;
            });
        }
    </script>
  </head>

  <body>
   <h3>ajax的封装学习</h3>
   <hr />
   <input type="button" value="测试封装" onclick="getData()" />
   <div id="showdiv"></div>
  </body>
</html>

封装成的js文件：
ajaxJs.js

  //声明ajax
    /*
        method：值为get或者post
        url：值为请求地址
        data:请求的数据，格式为键值对，不同的键值对使用&符号隔开。如果不需要请求数据，则传递null
            示例： "a=1&b=3"
        deal200:表示接受一个函数对象，用来处理ajax数据
                注意：声明的函数对象，必须带有一个形参，用来接收ajax引擎对象，例如
                function(ajax){
                    var data=ajax.responeText;  
                }
        deal404：表示接收一个函数对象，用来处理404错误
        deal500：表示接收一个函数对象，用来处理500错误
        async：设置异步还是同步，值为true或者false
    */

        //创建函数获取ajax对象
        function getAjax(){
            //创建ajax引擎对象
            var ajax;
            if(window.XMLHttpRequest){
                ajax=new XMLHttpRequest();
            }else if(window.ActiveXObject){
                ajax=new ActiveXObject("Msxml2.XMLHTTP");
            }
            return ajax;
        }
        function myAjax(method,url,data,deal200,deal404,deal500,async){
            //创建ajax引擎对象
            var ajax=getAjax();
            //复写onreadystatechange
            ajax.onreadystatechange=function (){
                //判断状态值
                if(ajax.readyState==4){
                    //判断状态码
                    if(ajax.status==200){
                        if(deal200){
                            deal200(ajax);
                        }
                        //获取回应数据
                        //处理回应数据
                    }else if(ajax.status==404){
                        if(deal404){
                            deal404();
                        }
                    }else if(ajax.status==500){
                        if(deal500){
                            deal500();
                        }
                    }
                }
            }
            //发送ajax引擎对象
             if("get"==method.toLowerCase()){
                 ajax.open("get", url+(data!=null?"?"+data:""), async);
                 ajax.send(null);
             }else if("post"==method.toLowerCase()){
                 ajax.open("post",url,async);
                //设置请求数据的格式
                    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                    ajax.send(data);
                 }
        }

其中发送和接收Json对象通过gson-2.3.1.jar

jquery中的ajax：

使用方式：
        1 $.get(url,data,fn)
        2 $.post(url,data,fn)
        3 $.ajax({
            type:"get",
            url:"data",
            success:function(data){
                alert(data);    
            }
            })
    注意：
        $.get和$.post方式中的data为json格式的请求数据
        以上三种方式，请求成功后的回调函数中的形参表示响应的数据。
    案例：
        三级联动

练习代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'jQueryAjax.jsp' starting page</title>
    <meta charset="utf-8"/>
    <!--引入jQuery文件  -->
    <script type="text/javascript" src="js/ajaxJs.js"></script>
    <!--声明js代码域  -->
    <script type="text/javascript">
        //页面加载添加相关脚本操作。
            $(function(){
                //用户名校验
                $("#uname1").blur(function(){
                    //获取用户名信息
                    var val=$("#uname1").val();
                    //进行ajax校验
                        $.post("user",{un:val},function(data){
                            if(eval(data)){
                                $("#uname1").next().html("用户名已被注册");
                            }else{
                                $("#uname1").next().html("用户名OK");
                            }
                        });
                })
                //用户名校验2
                $("#uname2").blur(function(){
                    //获取用户名信息
                    var val=$("#uname2").val();
                    //ajax校验
                    $.ajax({
                        type:"get",
                        url:"user",
                        data:"un="+val,
                        success:function(data){
                            if(eval(data)){
                                $("#uname2").next().html("用户名已被注册");
                            }else{
                                $("#uname2").next().html("用户名OK");
                            }
                        }
                    })

                })
            })
    </script>
  </head>
  <body>
        <h3>jquery-实现用户名校验</h3>
        <hr />
        用户名校验1--$.get方式: <input type="text" name="uname1" id="uname1" value="" /><span></span>
        <br /><br />
        用户名校验2--$.ajax方式: <input type="text" name="uname2" id="uname2" value="" /><span></span>
  </body>
</html>

用jQuery Ajax实现省市县三级联动：

com.bjsxt.dao：
AreaDao.java：

package com.bjsxt.dao;

import java.util.ArrayList;

import com.bjsxt.pojo.Area;

public interface AreaDao {
    /**
     * 根据pid查询地区信息
     * @param pid
     * @return
     */
    ArrayList<Area> getAreaInfo(String pid);

}

com.bjsxt.daoImpl：
AreaDaoImpl.java：

package com.bjsxt.daoImpl;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;






import com.bjsxt.dao.AreaDao;
import com.bjsxt.pojo.Area;


public class AreaDaoImpl implements AreaDao{

    @Override
    public ArrayList<Area> getAreaInfo(String pid) {
        //声明jdbc变量
        Connection conn=null;
        PreparedStatement ps=null;
        ResultSet rs=null;
        ArrayList<Area> list=null;
        try {
            //加载驱动
            Class.forName("com.mysql.jdbc.Driver");
            //创建连接对象
            conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/mybatis3","root", "1234");
            //创建sql命令
            String sql="select * from area where parentid=?";
            //创建sql命令对象
            ps=conn.prepareStatement(sql);
            //给占位符赋值
            ps.setString(1, pid);
            //执行
            rs=ps.executeQuery();
            list=new ArrayList<Area>();
            //遍历
            while(rs.next()){
                Area area=new Area();
                area.setAreaid(rs.getInt("areaid"));
                area.setAreaname(rs.getString("areaname"));
                area.setParentid(rs.getInt("parentid"));
                area.setArealevel(rs.getInt("arealevel"));
                area.setStatus(rs.getInt("status"));
                list.add(area);
            }
            //关闭
            //返回
        } catch (Exception e) {
            // TODO: handle exception
        }finally{
            try {
                rs.close();
            } catch (SQLException e1) {
                // TODO Auto-generated catch block
                e1.printStackTrace();
            }
            try {
                ps.close();
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            try {
                conn.close();
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }

        return list;
    }

}

com.bjsxt.pojo：
Area.java：

package com.bjsxt.pojo;

public class Area {
    private int areaid;
    private String areaname;
    private int parentid;
    private int arealevel;
    private int status;
    public int getAreaid() {
        return areaid;
    }
    public void setAreaid(int areaid) {
        this.areaid = areaid;
    }
    public String getAreaname() {
        return areaname;
    }
    public void setAreaname(String areaname) {
        this.areaname = areaname;
    }
    public int getParentid() {
        return parentid;
    }
    public void setParentid(int parentid) {
        this.parentid = parentid;
    }
    public int getArealevel() {
        return arealevel;
    }
    public void setArealevel(int arealevel) {
        this.arealevel = arealevel;
    }
    public int getStatus() {
        return status;
    }
    public void setStatus(int status) {
        this.status = status;
    }
    @Override
    public String toString() {
        return "Area [areaid=" + areaid + ", areaname=" + areaname
                + ", parentid=" + parentid + ", arealevel=" + arealevel
                + ", status=" + status + "]";
    }
    @Override
    public int hashCode() {
        final int prime = 31;
        int result = 1;
        result = prime * result + areaid;
        result = prime * result + arealevel;
        result = prime * result
                + ((areaname == null) ? 0 : areaname.hashCode());
        result = prime * result + parentid;
        result = prime * result + status;
        return result;
    }
    @Override
    public boolean equals(Object obj) {
        if (this == obj)
            return true;
        if (obj == null)
            return false;
        if (getClass() != obj.getClass())
            return false;
        Area other = (Area) obj;
        if (areaid != other.areaid)
            return false;
        if (arealevel != other.arealevel)
            return false;
        if (areaname == null) {
            if (other.areaname != null)
                return false;
        } else if (!areaname.equals(other.areaname))
            return false;
        if (parentid != other.parentid)
            return false;
        if (status != other.status)
            return false;
        return true;
    }
    public Area() {
        super();
        // TODO Auto-generated constructor stub
    }
    public Area(int areaid, String areaname, int parentid, int arealevel,
            int status) {
        super();
        this.areaid = areaid;
        this.areaname = areaname;
        this.parentid = parentid;
        this.arealevel = arealevel;
        this.status = status;
    }





}

com.bjsxt.service：
AreaService.java：

package com.bjsxt.service;

import java.util.ArrayList;

import com.bjsxt.pojo.Area;

public interface AreaService {
    /**
     * 根据pid获取地区信息
     * @param pid
     * @return
     */
    ArrayList<Area> getAreaInfoService(String pid);
}

com.bjsxt.serviceImpl：
AreaServiceImpl.java：

package com.bjsxt.serviceImpl;

import java.util.ArrayList;

import com.bjsxt.dao.AreaDao;
import com.bjsxt.daoImpl.AreaDaoImpl;
import com.bjsxt.pojo.Area;
import com.bjsxt.service.AreaService;

public class AreaServiceImpl implements AreaService{
    //创建dao层对象
    private AreaDao ad=new AreaDaoImpl();
    @Override
    public ArrayList<Area> getAreaInfoService(String pid) {

        return ad.getAreaInfo(pid);
    }

}

com.bjsxt.servlet：
AreaServlet.java：

package com.bjsxt.servlet;

import java.io.IOException;
import java.util.ArrayList;

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

import com.bjsxt.pojo.Area;
import com.bjsxt.service.AreaService;
import com.bjsxt.serviceImpl.AreaServiceImpl;
import com.google.gson.Gson;

public class AreaServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        //设置请求编码格式
        req.setCharacterEncoding("utf-8");
        //设置响应编码格式
        resp.setContentType("text/html;charset=utf-8");
        //获取请求信息
        String pid=req.getParameter("pid");
        //处理请求信息
            //获取业务层对象
            AreaService as=new AreaServiceImpl();
            //获取地区数据
            ArrayList<Area> list=as.getAreaInfoService(pid);
        //响应处理结果
            resp.getWriter().write(new Gson().toJson(list));
    }
}

selectFz.jsp：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'select.jsp' starting page</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        body{
            text-align: center;
            background-color:gray;
        }
        select{
            margin-top:100px;
            width:280px;
            height: 35px;
        }
    </style>
    <!--引入jQuery文件  -->
    <script type="text/javascript" src="js/j.js"></script>
    <!--声明js代码域 -->
    <script type="text/javascript">
        //页面加载成功后显示省信息
        $(function(){
            //声明公共代码
                function getData(pid,sid,flag){
                    //使用ajax获取市信息
                    //获取市信息的pid
                    var pid=(pid!="0"?$("#"+pid).val():"0");
                    //发送请求获取信息
                    $.get("area",{pid:pid},function(data){
                        //使用eval转换
                        eval("var areas="+data);
                        //获取市下拉框对象 
                        var obj=$("#"+sid);
                        ///清空原有数据
                        obj.empty();
                        //遍历将数据填充到市下拉框中
                        for(var i=0;i<areas.length;i++){
                            obj.append("<option value="+areas[i].areaid+">"+areas[i].areaname+"</option>");
                        }
                        //触发监听函数
                        if(flag){
                            obj.trigger("change");
                        }

                })
                }
            //声明函数获取省信息
            function getPre(){
                getData("0", "pre", true);
            }
            //请求省信息
                getPre();
            //给下拉框添加事件--市
                $("#pre").change(function(){
                    getData("pre", "city", true);
                })
            //给下拉框添加事件--县区
                $("#city").change(function(){
                    getData("city","town", false);
                })

        })
    </script>
  </head>

  <body>
        <h1 align="center">jQuery实现三级联动</h1>
        <hr />
            省：<select name="" id="pre"></select>
            市：<select name="" id="city"></select>
            县/区：<select name="" id="town"></select>

  </body>
</html>

需要的资料：
gson-2.3.1.jar
mysql-connector-java-5.1.30.jar
ajaxUtil.js
area.sql 省市县资料。
见百度云。

链接：https://pan.baidu.com/s/1541skkvrxFiMA5O-E9n49w 密码：nktu

小知识点：

0、数据交换：
pageContext：单个页面的数据交换
request一次 请求的数据交换
session一次会话的数据交换
application用户之间的数据交换。

服务器和ajax 通过response.getWrite().write()交互
1、iframe异步和ajax异步的区别
2、前台数据提交给后台的四种方式：
a、window.location.href="url";  同步刷新页面
b、from表单的get方式            同步刷新页面
c、超链接标签的src="url";       同步刷新页面
d、ajax通过js函数进行提交。     异步刷新数据，不刷新页面
3、json数据格式
4、js实现ajax异步和jQuery实现ajax异步。
5、eval()可以将字符串转成js代码执行.
6、get方式传数据没有请求实体，请求实体写null,数据以？在url后面拼接
post方式需要多设置请求头。
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
然后把数据写到请求实体里。以键值对的形式存在。
7、get方式适合小量数据，Post适合大量数据。
8、ajax是在url不变的情况下偷偷的给服务器进行数据之间的交互。
9、readyState状态值：readyState是XMLHttpRequest对象的一个属性，用来标识当前XMLHttpRequest对象处于什么状态。
readyState总共有5个状态值，分别为0~4，每个值代表了不同的含义
0：初始化，XMLHttpRequest对象还没有完成初始化
1：载入，XMLHttpRequest对象开始发送请求
2：载入完成，XMLHttpRequest对象的请求发送完成
3：解析，XMLHttpRequest对象开始读取服务器的响应
4：完成，XMLHttpRequest对象读取服务器响应结束
status状态码：
200——交易成功
404——没有发现文件、查询或URl
500——服务器产生内部错误
区别：
Ajax：readyState（状态值）和status（状态码）的区别
readyState，是指运行AJAX所经历过的几种状态，无论访问是否成功都将响应的步骤，可以理解成为AJAX运行步骤，使用“ajax.readyState”获得
status，是指无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，使用“ajax.status”获得
总体理解：可以简单的理解为state代表一个整体的状态。而status是这个大的state下面具体的小的状态。
10、XMLHttpRequest 对象用于在后台与服务器交换数据。
XMLHttpRequest 对象是开发者的梦想，因为您能够：

    在不重新加载页面的情况下更新网页
    在页面已加载后从服务器请求数据
    在页面已加载后从服务器接收数据
    在后台向服务器发送数据
11、ajax接收对象的实现：eval("var obj="+data);alert(obj.uname);
接收集合对象的实现：eval("var obj="+data);alert(obj[0].uname);