JavaWeb开发知识总结(Ajax,JSON)_javaweb和ajex-CSDN博客

本文链接：https://blog.csdn.net/L631106040120/article/details/72615193

JavaWeb开发知识总结(Ajax,JSON)

1. Ajax技术

AJAX技术：Asynchronous JavaScript and XML（异步的JavaScript和XML）。

AJAX不是新的编程语言，而是一种使用现有标准的新方法。

AJAX技术可以在不刷新整个网页的情况和数据库进行交互获取数据，进而可以实现网页的局部刷新地址栏的地址不发生变化。

1.1 同步与异步的区别：

这里写图片描述

AJAX使用的异步请求的模式，需要注意：Ajax向服务器发送请求后，服务器向Ajax返回数据；服务器端以转发或重定向或者直接向客户端写回数据，这些数据或转发或重定向的网页都会作为Ajax的返回值，而不会直接跳转到服务器转发或重定向到的页面。

1.2 XMLHttpRequest对象–Ajax技术的基础

Ajax技术是以javascript中的XMLHttpRequest对象为基础进行实现的。XMLHttpRequest对象可以在后台与服务器交换数据。

1.2.1 XMLHttpRequest对象常用API

常用API	类型	说明
readyState	属性	返回Ajax请求的当前状态
onreadystatechange	属性	指定当readyState属性改变时的事件处理函数
status	属性	获取当前请求的http响应的状态码，200,404等
responseText	属性	获取服务器响应数据的字符串形式
responseXML	属性	将响应信息格式化为Xml Document对象并返回
open(请求方式，请求地址，是否异步，用户名，密码)	方法	创建一个新的http请求，并指定此请求的方式、请求的URL以及验证信息
send(数据)	方法	发送请求到http服务器并接收响应，参数是想服务发送的数据，当无参数时，需传递null
setRequestHeader(头信息, 信息值)	方法	单独指定请求的某个http头，一般用于处理post方式提交数据的处理

readyState属性的状态码及其含义：

readyState状态码	含义
0 (未初始化)	对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化)	对象已建立，尚未调用send方法
2 (发送数据)	send方法已调用，但是当前的状态及http头未知
3 (数据传送中)	已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误
4 (完成)	数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据

1.2.2 XMLHttpRequest对象创建

由于浏览器间对Ajax技术的支持不兼容，则不同的浏览器创建XMLHttpRequest对象的方式有所不同，chrome和Firefox等浏览器中内置XMLHttpRequest对象，可以直接使用，而IE的浏览中需要通过ActiveXObject对象创建XMLHttpRequest对象，写出通用的创建XMLHttpRequest对象的方法如下（重要）：

// 创建XMLHttpRequest对象的方法
function createXmlHttp(){
   var xmlHttp;
   try{ // Firefox, Opera 8.0+, Safari, IE7+, Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e){
       try{// IE6,IE5 IE浏览器
             xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
          }
        catch (e){
          try{
             xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          catch (e){}
          }
    }
    return xmlHttp;
 }

1.2.3 Ajax的使用步骤

创建XMLHttpRequest对象；
设置XMLHttpRequest对象状态改变触发的函数,响应的回调函数；
设置向服务器发送请求的参数；
向服务器发送请求。

使用GET方式向服务器请求数据：

// 此方法是用于向服务器发送get请求，方法可以通过元素的事件触发
function ajax_get() {
    // 1.创建XMLHttpRequest对象
    var xhr = createXmlHttp(); // 创建XMLHttpRequest对象通用方法
    // 2.设置XMLHttpRequest对象状态改变触发的函数,回调函数
    xhr.onreadystatechange=function(){ // 当服务器响应时会调用此函数
        if(xhr.readystate == 4){ // 4代表请求发送成功
            if(xhr.status == 200){ // 200代表响应的状态码
                // 获得服务器响应数据文本形式
                var data = xhr.responseText;
                // 输出数据
                alert(data);
            }
        }
    }
    // 3.设置发送请求的参数,并通过url传递参数
    xhr.open("GET","/JavaWeb_site/DemoServlet?username=somnus&password=somnus",true);
    // 4.发送请求
    xhr.send(null); // send的参数一般用于POST方式的传递参数,但无参数时,需传入null
}

使用POST方式向服务器请求数据：

function ajax_post() {
    // 1.创建XMLHttpRequest对象
    var xhr = createXmlHttp(); // 创建XMLHttpRequest对象通用方法
    // 2.设置XMLHttpRequest对象状态改变触发的函数,回调函数
    xhr.onreadystatechange=function(){ // 当服务器响应时会调用此函数
        if(xhr.readystate == 4){ // 4代表请求发送成功
            if(xhr.status == 200){ // 200代表响应的状态码
                // 获得服务器响应数据文本形式
                var data = xhr.responseText;
                // 输出数据
                alert(data);
            }
        }
    }
    // 3.设置发送请求的参数,并通过url传递参数
    xhr.open("POST","/JavaWeb_site/DemoServlet",true);
    // post方式需要设置请求头才能传递参数,此方法必须在open方法调用后才能调用
    // 设置请求头实际上将数据封装成表单形式的键值对数据,form表单本身默认会将表单数据封装成键值对形式
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    // 4.发送请求
    xhr.send("username=somnus&password=somnus"); // send的参数一般用于POST方式的传递参数,但无参数时,需传入null
}

2. jQuery实现Ajax技术

jQuery实现的Ajax是对传统的Ajax的封装，jQuery对原始的Ajax的实现步骤进行了封装，将XMLHttpRequest对象的创建、设置状态监听器、设置请求路径及发送请求进行了封装，并提供函数的方法使用Ajax，jQuery提供了6中使用Ajax的函数，下面总结4个较为常用的函数及1个序列化form表单数据的方法：

函数	类型	说明
JQ对象.load(请求路径, [参数], [响应成功的回调函数])	Ajax请求	载入远程HTML文件代码并插入至JQ对象中，默认使用的post请求的方式
$.get(请求路径, [参数], [响应成功的回调函数], [返回数据格式])	Ajax请求	通过get方式发送请求，只能在响应成功的情况才会调用回调函数
$.post(请求路径, [参数], [响应成功的回调函数], [返回数据格式])	Ajax请求	通过post方式发送请求，只能在响应成功的情况才会调用回调函数
$.ajax([请求路径, ][ Ajax请求的设置])	Ajax请求	类似Ajax传统的实现方式，所有的参数需要自己设定，功能更灵活，可以在回调函数中定义不同响应状态下的处理函数
serialize()	Ajax数据处理方法	序列表单数据内容为字符串，一般用于将发送POST请求的表单数据序列化为键值对的字符串后作为POST请求的参数

案例代码：

<!--index.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 }/ajax/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#btn").click(function(){
            // get方式的Ajax请求
            $.get("${ pageContext.request.contextPath}/ServletDemo2",{"username":"somnus","password":"somnus"},function(data){
                $("#div").html(data);
            });
        });
    });

    $(function() {
        // load方式的Ajax请求
        $("#btn2").click(function() {
            $("#div2").load("${ pageContext.request.contextPath}/ServletDemo2",{"username":"somnus","password":"somnus"});
        });
    });

    $(function() {
        $("#btn3").click(function(){
            // post方式的Ajax请求
            $.post("${ pageContext.request.contextPath}/ServletDemo2",{"username":"somnus","password":"somnus"},function(data){
                $("#div3").html(data);
            });
        });
    });
    $(function() {
        $("#btn4").click(function(){
            // ajax方式的Ajax请求
            $.ajax({type:"GET",url:"${ pageContext.request.contextPath}/ServletDemo2?username=somnus&password=somnus",context: document.body,success:function(data){
                $("#div4").html(data);
            }});
        });
    });
</script>
</head>
<body>
<h1>JQuery中Ajax的操作</h1>
<div id="div" style="width: 200px;height:200px">
</div>
<input type="button" value="test1" id="btn"/>
<div id="div2" style="width: 200px;height:200px">
</div>
<input type="button" value="test2" id="btn2"/>
<div id="div3" style="width: 200px;height:200px">
</div>
<input type="button" value="test3" id="btn3"/>
<div id="div4" style="width: 200px;height:200px">
</div>
<input type="button" value="test4" id="btn4"/>
</body>
</html>

// ServletDemo2.java
public class ServletDemo2 extends HttpServlet {
    private static final long serialVersionUID = 1L;
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 接收get方式请求，并将数据返回
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        response.getWriter().println(username+"--"+password);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 接收post方式请求，并将数据返回
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        response.getWriter().println(username+"--"+password);
    }
}

3. Ajax中响应数据的类型

Ajax发送请求后接受到的响应的数据的格式可以是：文本数据、HMTL格式数据、XML格式数据、JSON格式数据；当在Servlet中向Ajax响应数据时，如果不设置数据的响应格式，默认的是文本数据；Servlet向Ajax响应XML数据时需设置response.setContentType("text/xml;charset=UTF-8");,返回HTML格式数据时需要设置response.setContentType("text/html;charset=UTF-8");,返回JSON数据时可以不设置数据格式，但为防止json数据中的中文出现乱码，可以设置和HTML一样的数据格式。

3.1 Ajax接收文本类型的响应数据

案例：用户注册时根据用户输入的用户名实时校验输入的用户名是否可用

<!--register.jsp-->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>用户注册</title>
<!-- 引入css文件 -->
<link rel="stylesheet"href="${pageContext.request.contextPath }/regist_search/css/bootstrap-theme.min.css" />
<link rel="stylesheet"href="${pageContext.request.contextPath }/regist_search/css/bootstrap.min.css" />
<!-- 引入js文件 -->
<script type="text/javascript"src="${pageContext.request.contextPath }/regist_search/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript"src="${pageContext.request.contextPath }/regist_search/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function() {
        // 用户名输入框的失去焦点及按键弹起事件
        $("#username").bind("keyup blur",function() {
            if ($(this).val() != "") {
                $.post("${pageContext.request.contextPath}/UserRegisterServlet",
                {"username" : $(this).val()},
                function(data) {
                    if (data == 1) {
                        $("#tip").html("<font color='green'>用户名可用</font>");
                        $("#regbtn").prop("disabled",false);
                    }
                    if (data == 0) {
                        $("#tip").html("<font color='red'>该用户名已被占用</font>");
                        $("#regbtn").prop("disabled",true);
                    }
                });
            } else {
                // 当用户名输入框为空时，清空提示信息，并将注册按钮禁用
                $("#tip").html("");
                $("#regbtn").prop("disabled", true);
            }
        });
    });
</script>
</head>
<body>
    <div class="container">
        <!-- 注册 -->
        <div
            class="row"
            style="background: url(img/regist_bg.jpg);height: 500px;">
            <div
                class="col-md-offset-2 col-md-8"
                style="border: 5px solid #245580;margin-top: 30px;background-color: whitesmoke;">
                <div
                    class="row"
                    style="padding-top: 15px;padding-left: 30px;">
                    <div class="row">
                        <div
                            class="col-md-offset-1 col-sm-offset-1 col-sm-5 col-md-5 col-xs-10"
                            style="padding-left: 0px;">
                            <h4>
                                <font color="#337AB7"><strong>用户注册</strong></font><small>
                                    USER REGISTER</small>
                            </h4>
                        </div>
                    </div>
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label
                                for="username"
                                class="col-sm-2 control-label">用户名</label>
                            <div class="col-md-5 col-sm-10">
                                <input
                                    type="text"
                                    class="form-control"
                                    name="username"
                                    id="username"
                                    placeholder="请输入用户名"> <span id="tip"></span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label
                                for="province"
                                class="col-sm-2 control-label">籍贯</label>
                            <div
                                class="col-sm-10 form-control-static"
                                style="padding-left: 0px;">
                                省份:<select
                                    name="province"
                                    id="province">
                                    <option
                                        value=""
                                        selected="selected">--请选择--</option>
                                </select> &nbsp;&nbsp;城市:<select
                                    name="city"
                                    id="city">
                                    <option
                                        value=""
                                        selected="selected">--请选择--</option>
                                </select>
                            </div>
                        </div>
                        ...
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button
                                    type="submit"
                                    id="regbtn"
                                    class="btn btn-success">注册</button>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <button
                                    type="reset"
                                    class="btn btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

/**
 * 用户注册的Servlet    UserRegisterServlet.java
 */
public class UserRegisterServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 设置request缓冲区的编码格式,防止post方式接收中文乱码
        request.setCharacterEncoding("UTF-8");
        String username = request.getParameter("username");
        try{
            // 调用业务层方法查询指定用户名的用户是否存在
            UserService userService = new UserService();
            User checkUser = userService.checkUsername(username);
            // 当查询指定用户名的用户为null,表示该用户不存在
            if(checkUser == null) {
                // 返回1代表没有查询到,用户名可用
                response.getWriter().println(1);
            } else {
                // 返回0,代表数据库中存在该用户名
                response.getWriter().println(0);
            }
        } catch(Exception e) {
            e.printStackTrace();
        }
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        this.doGet(request, response);
    }
}

3.2 Ajax接收HTML类型的响应数据

Servlet向Ajax返回HTML格式的数据，本质就是返回的带有html标签的数据。

案例：注册页面的省市联动中在页面加载时通过POST请求获取省份的信息，并将获得省份的信息添加到省份的下拉框中；实现的思想是：页面加载时通过post请求省份信息，Servlet将查询到身份的信息集合存储到request域中，通过转发到中间页面将集合中的省份信息进行遍历输出为<option> 标签的值，由于中间页面是Servlet向Ajax请求而响应的数据，则中间页面是作为Ajax请求的返回值，在回调函数中将接收的数据直接追加到省份的下拉选项框中即可。

<!--register.jsp    和接收文本数据案例的文件内容相同，就是使用javascript添加省份信息的代码不相同-->
...
<script type="text/javascript">
    $(function() {
        // 页面加载时请求省份的信息
        $.post("${pageContext.request.contextPath}/ProvinceServlet",function(data){
            $("#province").append(data); // 通过中间页面加载省份信息
        });
    });
</script>
...

/**
 * 加载省份信息的Servlet   ProvinceServlet.java
 */
public class ProvinceServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // jsp页面初始化时发送POST方式请求,返回省份的信息
        // 调用业务层获取省份的
        ProvinceService provinceService = new ProvinceService();
        try {
            List<Province> list = provinceService.findProvince();
            // 通过转发到中间页面的方式进行数据的更新
            request.setAttribute("list", list);
            request.getRequestDispatcher("/province.jsp").forward(request, response);   
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

<!--province.jsp-->
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:forEach var="p" items="${ list }">
    <option value="${ p.pname }">${ p.pname }</option>
</c:forEach>

3.3 Ajax接收XML类型的响应数据

Servlet向Ajax返回XML格式的数据，需要设置浏览器读取数据的方式response.setContentType("text/xml;charset=UTF-8");,同时还需要将从数据库中查询的数据转换为XML格式，通过工具类第三方的XStreamjar将数据转换为XML格式。

XStream工具类需要两个jar包：xpp3_min-1.1.4c.jar和xstream-1.4.4.jar。

案例：注册页面的省市联动中在页面加载时通过POST请求获取省份的信息，并将获得省份的信息添加到省份的下拉框中；实现思想是：Servlet中将查询的省份的信息转换为XML格式的数据，在Ajax回调函数中进行XML数据的解析，并将数据追加到省份下拉框中；当省份信息发生变化时，通过get方式获取当前省份对应城市的信息。

<!--register.jsp    和接收文本数据案例的文件内容相同，就是使用javascript添加省份信息的代码不相同-->
...
<script type="text/javascript">
    $(function() {
        // 页面加载时请求省份的信息
        $.post("${pageContext.request.contextPath}/ProvinceServlet",function(data){
            // var p = $(data).children("province");  此方式不能正确的加载数据,暂未弄明白
            // 通过xml数据加载省份信息
            // data代表的返回的数据,查找data中子元素为province的子元素,并遍历
            $(data).find("province").each(function(i,n){  // 使用children方式没有结果
                // 查找province的子元素名为pid并获取标签中文本数据
                var pid = $(this).children("pid").text();
                // 查找province的子元素名为pname并获取标签中文本数据
                var pname = $(this).children("pname").text();
                // 将查询到的数据追加到province的下拉框中
                $("#province").append("<option value='"+pid+"'>"+pname+"</option>");
            });
        },"xml"); // 设置接收数据的格式为xml

        // 当省份下拉框值变化时,改变城市的信息
        $("#province").change(function() {
            // 通过get方式请求当前省份id对应的城市信息
            $.get("${pageContext.request.contextPath}/ProvinceServlet?pid="+$(this).val(),function(data){
            //$("#city").html("<option selected='selected'>--请选择--</option>"); 此方式也可实现
            $("#city")[0].options.length=1;
            $(data).find("city").each(function(){
                var cid = $(this).children("cid").text();
                var cname = $(this).children("cname").text();
                $("#city").append("<option value="+cid+">"+cname+"</option>");
            });
            },"xml");
        });
    });
</script>
...
<!---返回的数据格式是：-->
<list>
  <province>
    <pid>1</pid>
    <pname>河北省</pname>
  </province>
  ...
</list>

/**
 * 加载省份信息的Servlet    ProvinceServlet.java
 */
public class ProvinceServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 根据省份信息的变化获取城市信息
        try {
            // 获取参数中省份的id
            String pid = request.getParameter("pid");
            // 通过省份id获取对应城市的信息
            ProvinceService provinceService = new ProvinceService();
            // 查询城市的信息,封装到list集合中
            List<City> city =provinceService.findCity(pid);
            // 创建XStream对象
            XStream xStream = new XStream();
            // 设置标签
            xStream.alias("city", City.class);
            // 将list数据转换为xml格式
            String cityStr = xStream.toXML(city);
            // 设置数据输出格式
            response.setContentType("text/xml;charset=UTF-8");
            // 输出数据到客户端
            response.getWriter().println(cityStr);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // jsp页面初始化时发送POST方式请求,返回省份的信息
        // 调用业务层获取省份的信息
        ProvinceService provinceService = new ProvinceService();
        try {
            // 将省份的信息封装到List集合中
            List<Province> list = provinceService.findProvince();
            // 将结果数据封装层xml格式
            XStream xStream = new XStream();
            // 修改生成的xml中的标签名，默认是类的全路径
            xStream.alias("province", Province.class);
            // 将list集合数据转换为xml格式
            String xmlStr = xStream.toXML(list);

            // 修改标签名:
            xStream.alias("city", City.class);
            // 将类中属性作为 标签的属性
            // xStream.useAttributeFor(Province.class, "pid");
            // xStream.useAttributeFor(Province.class,"pname");

            // 设置数据输出的格式
            response.setContentType("text/xml;charset=UTF8");
            // 将查询到的数据输出到客户端
            response.getWriter().println(xmlStr);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

3.4 Ajax接收JSON类型的响应数据

JSON数据：

JSON：JavaScript Object Notation，是一种轻量级的数据交换格式，是ECMAScript的子集，javascript可以直接解析json数据。json数据以键值对方式存在。

JSON常见的3种数据格式：

json数据格式	格式说明
`{"key1":value1,"key2":value2...}`	键值对数据，相当于是Map集合数据，其中数据相当于是key，可以通过`.value`获取其中的数据
`[{"key1":value01,"key2":value11...},{"key1":value02,"key2":value12...}...]`	键值对对象的数组形式，相当于是List(数组)集合中存储的Map集合数据
`{"name":{"key1":value1,"key2":value2...}}`	带有名称标示的键值对象数据或者数组

JSON数据的使用：

JSON数据，在Servlet中通过json的工具类将数据转换为json格式的数据，常用的工具类是JSONLib。该工具类常用的类：

JSONLib中常用类	作用说明
JSONArray	将数组或list集合数据转换为JSON格式数据
JSONObject	将Java对象或Map集合数据转换为JSON格式数据

注意事项：在程序中将数据转换为json格式后数据类型时JSON类型，在向客户端输出前需设置response.setContentType("text/xml;charset=UTF-8")防止中文数据乱码，同时在调用response的输出方法时需将json格式的数据转换为String形式。

JSONLib使用需要使用的jar包：

commons-beanutils-1.8.3.jar
commons-collections-3.2.1.jar
commons-lang-2.5.jar
commons-logging-1.1.1.jar
ezmorph-1.0.6.jar
json-lib-2.4-jdk15.jar

案例：注册页面的省市联动中在页面加载时通过POST请求获取省份的信息，并将获得省份的信息添加到省份的下拉框中；实现思想是：Servlet中将查询的省份的信息转换为JSON格式的数据，在Ajax回调函数中循环JSON数据，并将数据追加到省份下拉框中；当省份信息发生变化时，通过get方式获取当前省份对应城市的信息。

<!--register.jsp    和接收文本数据案例的文件内容相同，就是使用javascript添加省份信息的代码不相同-->
<script type="text/javascript">
//使用json作为传输数据的格式
$(function(){
    // 页面加载时初始化省份信息
    // 使用POST方式请求数据
    $.post("${pageContext.request.contextPath}/ProvinceJsonServlet",function(data){
        // 遍历返回的数据集合,将数据追加到身份下拉列表中
        $(data).each(function(i,n){
            // json数据直接使用当前的对象直接.即可
            $("#province").append("<option value='"+n.pid+"'>"+n.pname+"</option>");
        });
    },"json");// 接收的数据格式json

    // 省份信息变化时变动城市信息
    $("#province").bind("change",function(){
        // 通过省份下拉列表的变化,向服务器请求对应省份城市的信息
        $.get("${pageContext.request.contextPath}/ProvinceJsonServlet",{"pid":$(this).val()},function(data){
            // 当省份变化时,初始化城市的信息
            $("#city").html("<option>-请选择-</option>");
            // 遍历城市的信息,将数据追加到城市的下拉列表中
            $(data).each(function(i,n){
                $("#city").append("<option value='"+n.cid+"'>"+n.cname+"</option>");
            });
        },"json"); // 接收的数据格式json
    });
});
</script>
<!--返回的数据格式如下-->
[{"pid":1,"pname":"河北省"},...]

/**
 * 使用json传输数据的Servlet   ProvinceJsonServlet.java
 */
public class ProvinceJsonServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 根据省份ID查询对应的城市信息
        String pid = request.getParameter("pid");
        ProvinceService provinceService = new ProvinceService();
        try {
            // 查询城市的信息集合
            List<City> city = provinceService.findCity(pid);
            // 将list集合的数据转换为json格式
            JSONArray jsonArray = JSONArray.fromObject(city);
            // 设置浏览器打开数据的方式,防止中文数据的乱码
            response.setContentType("text/html;chaeset=UTF-8");
            // 设置response的缓冲区的编码的格式
            response.setCharacterEncoding("UTF-8");
            response.getWriter().println(jsonArray.toString());

        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        ProvinceService provinceService = new ProvinceService();
        try {
            // 从数据库中获取省份的信息
            List<Province> province = provinceService.findProvince();

            // 将LIst集合转成JSON:去除其中某些字段
            // JsonConfig config = new JsonConfig(); 创建json转换的配置对象
            // config.setExcludes(new String[]{"pid"}); 将不需要出现在json中的字段放在数组中
            //  使用json将List集合数据转换为json格式并去除指定的配置对象中的字段
            // JSONArray jsonArray = JSONArray.fromObject(list,config); 

            // 将查询到的信息转换为json格式
            JSONArray jsonArr = JSONArray.fromObject(province);

            // 设置输出数据的类型,防止中文乱码
            response.setContentType("text/html;charset=UTF-8");
            // 输出json数据时必须将JSONArray类型转为String类型
            response.getWriter().println(jsonArr.toString());
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

3.5 综合案例：模拟百度搜索输入框的提示信息

在搜索框中输入字符时，根据数据的查询的结果给出下拉框给出匹配的关键。实现的思想：给输入框绑定keyup 事件，在事件处理函数中通过Ajax的POST方式向服务器发送请求，在数据库查询与输入的数据相关的关键字，并以json数据形式返回，在Ajax请求的回调函数中将数据显示在输入框下面隐藏的div中，并将div置为可见。

<!--search.jsp-->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>百度搜索</title>
<!-- 引入css文件 -->
<link rel="stylesheet" href="${ pageContext.request.contextPath }/regist_search/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="${ pageContext.request.contextPath }/regist_search/css/bootstrap.css" />
<!-- 引入js文件 -->
<script type="text/javascript" src="${ pageContext.request.contextPath }/regist_search/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${ pageContext.request.contextPath }/regist_search/js/bootstrap.min.js"></script>
<script type="text/javascript">
    // 异步加载数据
    $(function() {
        // 当所有的输入框中按键弹起时触发函数
        $("#word").keyup(function() {
            // 获取该输入框的值
            var word = $(this).val();
            // 当输入框不为空时向服务器发送请求
            if (word != "") {
                // 通过Ajax的POST请求方式向服务发送请求
                $.post("${pageContext.request.contextPath}/SearchServlet", 
                    {"word" : word}, // 当前输入框的值,就是后台要检索以此字符开始的关键字
                    function(data) {
                        // 获取数据并将数据加载到div中
                        $("#data").slideDown("slow");
                        // 每次追加数据前将表格中的数据清空
                        $("#tips").html("");
                        // 将保存在json中的数据进行遍历输出
                        $(data).each(function(i, n) {
                            $("#tips").append("<tr><td>" + n.word + "</td></tr>");
                        });

                        // $("#data").html(data);
                        // 将数据鼠标悬浮换色
                        $("#tips td").hover(function() {
                            //  鼠标悬停在当前tr行上时将背景颜色改变
                            $(this).css("background", "#EEE");
                        }, function() {
                            // 鼠标移除时当前tr行的背景色恢复白色
                            $(this).css("background", "white");
                        });
                        // 下列框选择中选项点击时,将表格中值设为输入框的值
                        $("#tips td").click(function() {
                            // 获取当前点击的td的值
                            var val = $(this).text();
                            // 将点击的tr中的文本数据设为输入框的值
                            $("#word").val(val);
                            // 点击后将下拉框隐藏
                            $("#data").hide();
                        });
                }, "json"); // 设置接收的数据格式json
            } else {
                // 当输入框为空时,清除提示信息
                $("#data").hide();
            }
        });
    });
</script>
</head>
<body>
    <div class="container-fluid">
        <div class="row text-center" style="margin-top: 160px;">
            <div class="col-lg-offset-3 col-lg-6">
                <h3>百度一下</h3>
                <br />
                <div class="input-group">
                    <input type="text" class="form-control" id="word" placeholder="百度一下" aria-describedby="basic-addon2" /> 
                        <span class="input-group-addon btn" id="basic-addon2" style="background:#0078D7;font-color:white;">
                            <font color="white">百度一下</font>
                        </span>
                </div>
                <div id="data" style="width: 100%;height: 200px;display: none;padding-left:10px;">
                    <table id="tips" style="width: 100%;text-align: left;">

                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

/**
 * 搜索的Servlet   SearchServlet.java
 */
public class SearchServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        try {
            // 获取要搜索关键字的参数
            String word = request.getParameter("word");
            // 调用业务层进行查询
            SearchService searchService = new SearchService();
            // 获取查询结果
            List<Word> list = searchService.queryWord(word);
            // 将数据转换为json格式
            JSONArray jsonArray = JSONArray.fromObject(list);

            // 设置response缓冲区的编码
            response.setCharacterEncoding("UTF-8");
            // 设置浏览器打开时的数据类型及编码格式
            response.setContentType("text/html;charset=UTF-8");
            // 将数据输出到客户端
            response.getWriter().println(jsonArray.toString());

        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        this.doGet(request, response);
    }
}