数据库表
先看结果
按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;
}
}