JavaWeb ajax异步自动填充（含图解执行流程）

数据库表

这里写图片描述

先看结果

按aa显示的结果：
这里写图片描述
按aaa显示的结果：

文件目录

文件资源：
https://download.csdn.net/download/u010452388/10458787
这里写图片描述

关键知识点

1.jQuery中的ajax
$.post(url,[params],fn,[type])
1.1发送post请求
··url:请求的路径
··params:请求的参数
··格式1:字符串 key1=value1&key2=value2
··格式2:json格式
··{“key1”:value1,”key2”:value2}
··fn:回调函数
··function(data){
····//data:响应回来的数据
}
type:返回内容的格式
一般不需要自己设置,如果需要设置一般设置为 “json”

1.2发送get请求
$.get(url,[params],fn,[type])
2.JSON
概述:
··JavaScript 对象表示法（JavaScript Object Notation）
··是存储和交换文本信息的语法。类似 XML
··比 XML 更小、更快，更易解析
格式:
··格式1:json对象
··{ “key”:”value” , “key”:”value” }
··value可以为任意类型的数据
格式2:json数组
··[“aa”,”bb”]
··[{ “key”:”value” , “key”:”value” },{ “key”:[“aa”,”bb”] , “key”:”value” }]

图解执行流程

可以先大概的看下执行流程，然后看下面代码，会有助于理解
这里写图片描述

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>
<style>
#searchResult {
    display: none;
    background-color: white;
    width: 196px;
    padding: 5px;
    position: absolute;
    z-index: 999;
}
ul li{
    list-style:none;
}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 导入jquery类库 -->
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<title>Insert title here</title>
<script type="text/javascript">
    //页面加载之后函数
    $(function() {
        //查询框检测按键弹起事件
        $("#sear").keyup(function() {
            //获取用户输入的值
            var keywords = this.value;
            //获取的值不为空，才请求后台数据
            if (keywords != "") {
                var url = "${pageContext.request.contextPath}/demo";
                var params = "parameters=" + keywords;
                function fn(data) {

                    $searchResult = $("#searchResult");
                    if (data.length > 0) {
                        //将返回结果到ul标签下的html下面数据清空
                        $searchResult.html("");
                        //循环遍历返回回来的数据
                        $.each(data, function(index, ele) {
                            //将遍历回来的数据追加到ul标签下
                            $searchResult.append("<li>" + ele + "</li>");
                        });
                        //遍历完成后，将数据显示出来
                        $searchResult.show();
                    } else {
                        //如果数据为空，也将ul标签隐藏
                        $searchResult.hide();
                    }
                }
                //jQuery中使用ajax的方式
                //ulr:请求的路径
                //params:请求携带的参数
                //fn:回调函数，既响应回来的数据，然后执行fn下面的代码，展示到浏览器
                //"json":返回内容的格式
                $.post(url, params, fn, "json");
            } else {
                 $("#searchResult").hide(); 
            }

        });
    });
</script>
</head>
<body>
        <!-- 搜索框 -->
        用户名:<input type="text" class="form-control" id="sear" placeholder="Search">
        <ul  id="searchResult" ></ul>
</body>
</html>

web层


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.itheima.service.UserService;

public class DemoServlet extends HttpServlet {

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

    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        try {
            //获取浏览器请求的参数
            String keywords = request.getParameter("parameters");
            //创建service层对象
            UserService service = new UserService();
            //将数据传到service层，并让其返回一个json数据
            String jsonList = service.findByWords(keywords);

            System.out.println(jsonList);
            //将json数据响应到浏览器
            response.getWriter().print(jsonList);
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

    }

}

Service层

package com.itheima.service;

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

import com.alibaba.fastjson.JSON;
import com.itheima.dao.UserDao;
import com.itheima.domain.User;

public class UserService {


    public String findByWords(String keywords) throws SQLException {
        UserDao dao = new UserDao();
        //调用到层数据，并返回list数据
        List list =dao.findByWords(keywords);
        //将list转换成json数据（通过阿里巴巴提供的fastjson的jar包）
        String jsonStr = JSON.toJSONString(list);
        //将json数据返回到web层
        return jsonStr;
    }

}

Dao层


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

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.ColumnListHandler;

import com.itheima.domain.User;
import com.itheima.utils.C3P0Utils;

public class UserDao {


    public List findByWords(String keywords) throws SQLException {
        QueryRunner qr = new QueryRunner(C3P0Utils.getDataSource());
        String sql="select username from user where username like ? ";
        //传入模糊查询的参数
        String params="%"+keywords+"%";
        List<Object> list = qr.query(sql, new ColumnListHandler() ,params );
        return list;
    }

}