代码仓库+文档：https://gitee.com/DerekAndroid/ServletAjaxJquery.git
(案例一：校验用户名)效果：
(案例二：下拉提示)效果：
思路：
案例一：校验用户名
需求：在页面无刷新的情况下查询数据库中是否存在该用户名，存在：该用户名被占用，不存在：该用户名可以使用
步骤：
1.创建数据库和表结构
2.创建动态的web项目
3.创建包结构并导入项目需要的资源
4.用户录入完信息后，发送ajax请求
5.servlet的操作
//获取录入的用户名
//调用service和dao完成查询操作
6.service的操作
//调用dao完成查询操作
7.dao的操作
//返回值使int类型
8.servlet后续操作
//把返回的int类型写回到jsp中
9.在jsp中判断返回值的状态
如果为1
提示用户名已经被占用
若果为0
提示用户名可以使用
案例二：下拉提示
需求：在键盘弹起的时候去数据库中查询4条数据，展示出来
步骤：
1.jsp的操作：
//给输入框派发键盘弹起事件
//发送ajax请求
2.servlet操作
//获取录入的值
//调用service和dao完成查询操作
3.dao操作
//调用dao完成查询数据库的操作(4条：select * from kw where kwname like ? limit 0,4)
4.servlet后续操作
//把获取的list转化为json
//写回jsp
5.jsp解析jsonsql表
CREATE DATABASE day19;
USE day19;
CREATE TABLE USER(
id INT PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(20)
);
CREATE TABLE kw(
id INT PRIMARY KEY AUTO_INCREMENT,
kwname VARCHAR(20)
);
INSERT INTO USER VALUES(NULL,'tom');
INSERT INTO USER VALUES(NULL,'jreey');
INSERT INTO USER VALUES(NULL,'zhangsan');
INSERT INTO USER VALUES(NULL,'lisi');
INSERT INTO USER VALUES(NULL,'wangwu');
INSERT INTO USER VALUES(NULL,'zhaoliu');
INSERT INTO kw VALUES(NULL,'1');
INSERT INTO kw VALUES(NULL,'12');
INSERT INTO kw VALUES(NULL,'123');
INSERT INTO kw VALUES(NULL,'1234');
INSERT INTO kw VALUES(NULL,'12345');
INSERT INTO kw VALUES(NULL,'123456');
校验用户名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}/js/jquery-1.11.3.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
$("[name=username]").blur(function(){
console.log("blur");
//发送ajax
$.post("${pageContext.request.contextPath}/user","username="+$("[name=username]").val(),function(obj){
/*alert(typeof obj);
alert(obj);*/
if(obj==1){
$("#usename_msg").html("<font color=red>用户名已存在</font>");
$("#sub").attr("disabled","disabled");
}else{
$("#usename_msg").html("<font color=green>用户名可以使用</font>");
$("#sub").removeAttr("disabled");
}
});
})
})
</script>
</head>
<body>
<form method="post" action="#">
<table>
<tr>
<td>用户名:</td>
<td><input type="text" name="username"></td>
<td><span id="usename_msg"></span></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="text" name="password"></td>
<td></td>
</tr>
<tr>
<td colspan='3'><input type="submit" id="sub"></td>
</tr>
</table>
</form>
</body>
</html>校验用户名servlet
package com.itheima.servlet;
import java.io.IOException;
import java.sql.SQLException;
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 UserServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
//解决乱码
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//获取用户录入的信息
String username = request.getParameter("username");
//调用service
UserService us = new UserService();
int flag=us.getFlag(username);
//把flag返回给jsp
response.getWriter().print(flag);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}下拉提示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 }/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#tid").keyup(function(){
//发送ajax
$.post("${pageContext.request.contextPath}/kw","kwname="+$("#tid").val(),function(obj){
$("#did").html("");
//alert(obj);
//遍历obj
if(obj!=""){
$(obj).each(function(){
//this
//alert(this);
$("#did").append("<div onmouseover='over(this)' onmouseout='out(this)'>"+this+"</div>");
$("#did").show();
})
}else{
//alert("1111");
$("#did").hide();
}
},"json");
})
})
</script>
<title>Insert title here</title>
</head>
<body>
<center>
<div>
<h1>黑马搜索</h1>
<div>
<input name="kw" id="tid"><input type="button" value="黑马一下">
</div>
<div id="did" style="border: 1px solid red;width: 171px;position:relative;left:-34px;display:none"></div>
</div>
</center>
</body>
<script type="text/javascript">
function over(obj){
$(obj).css("background-color","gray");
}
function out(obj){
$(obj).css("background-color","white");
}
</script>
</html>下拉提示servlet
package com.itheima.servlet;
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.google.gson.Gson;
import com.itheima.service.KwService;
public class KwServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
//解决乱码
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//获取用户录入的值
String kwname = request.getParameter("kwname");
System.out.println("kwname="+kwname);
//调用service完成查询
KwService ks = new KwService();
List<Object> list=ks.findList(kwname);
//把list转换为json
Gson g = new Gson();
String json = g.toJson(list);
System.out.println(json);
//写回jsp
response.getWriter().print(json);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}ajax+jquery思维导图
299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
