1. 当用户在10秒之内发送了3次请求时，
禁用用户名的输入框，
3秒钟之后才可以打开这个输入框继续使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>请注册</h1>
<form action="regist" method="post">
用户名: <input id="uname" type="text" name="uname" onblur="check()"/><span id="span1"></span> <br /><br />
密码: <input type="password" name="upwd" /> <br /><br />
<input type="submit"/>
</form>
<script type="text/javascript" src="/Servlet02/js/jquery-1.7.2.js"></script>
<script type="text/javascript">
var count = 0; // 请求的次数, 如果到3就要禁用输入框
function check(){
var uname = document.getElementById("uname").value;
// 1. 创建异步传输对象
var xmlhttp = new XMLHttpRequest();
// 2. 设置好响应回来的时候要触发的函数
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
// 4. 接收服务器的响应
var res = xmlhttp.responseText;
var json = eval('(' + res + ')');
// 根据结果显示对应的内容
var span = document.getElementById("span1");
span.innerHTML = json.content;
if(json.exists){
span.style.color = "red";
}else{
span.style.color = "green";
}
}
}
// 3. 发送Ajax请求
xmlhttp.open("GET","/Servlet02/check?uname=" + uname,true);
xmlhttp.send();
// 计数
count ++;
// 10秒后这个计数就过期了
setTimeout("countTimeout()", 10*1000);
// 达到3次就禁用
if(count >= 3){
$("#uname").prop("disabled", true);
// 解锁时间设置为3
time = 4;
$("#span1").text("3秒后解锁!").css("color", "black");
// 开始解锁
unlock();
}
}
// count过期
// 10秒之后, 如果count是大于0的, 就减一, 如果是0, 就不变
function countTimeout(){
count = count > 0 ? count - 1 : 0;
}
var time = 4;
// 解锁的方法
function unlock(){
time --;
$("#span1").text(time + "秒后解锁!").css("color", "black");
if(time > 0){
// 递归调用
setTimeout('unlock()', 1000);
}else{
// 先把次数清0
count = 0;
// 解锁
$("#uname").prop("disabled", false);
$("#span1").text("");
}
}
</script>
</body>
</html>
2. 搜索框自动补全
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>Insert title here</title>
</head>
<body>
<input type="text" style="width: 200px" name="search" />
<input type="button" value="搜索"/><br />
<select multiple="multiple" style="width: 200px; display: none">
</select>
<script type="text/javascript" src="/Ajax/js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
// 当内容改变时
$("select").change(function(){
$("input[name='search']").val($(this).val());
});
$("input[name='search']").keyup(function(){
if($(this).val().length == 0)
return;
$.post("/Ajax/search", {
keyname : $(this).val(),
}, function(data) {
//["康师傅冰红茶","康师傅冰绿茶"]
// 判断集合是否有长度
$("select").html("");
if(data.length > 0){
$("select").css("display", "inline");
// 填充里面的内容
for(var i = 0 ; i < data.length; i ++){
var opt = new Option(data[i], data[i]);
$("select")[0].add(opt);
}
}else{
$("select").css("display", "none");
}
}, "json");
});
})
</script>
</body>
</html>searchservlet
package com.bwf.servlet;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.bwf.jdbc.ConnectionFactory;
import com.google.gson.Gson;
@WebServlet("/search")
public class SearchAjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
// 拿出客户端上传的参数
String keyname = request.getParameter("keyname");
System.out.println(keyname);
// 带着参数查询数据库
List<String> pnameList = new ArrayList<>();
Connection conn = ConnectionFactory.getConnection();
try {
PreparedStatement ps = conn.prepareStatement("SELECT * FROM product WHERE prodName LIKE ?");
ps.setString(1, "%" + keyname + "%");
ResultSet rs = ps.executeQuery();
while(rs.next()){
pnameList.add(rs.getString("prodName"));
}
} catch (SQLException e) {
e.printStackTrace();
} finally {
if(conn != null){
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
// 包装成json
String json = new Gson().toJson(pnameList);
System.out.println(json);
// 返回客户端
response.getWriter().write(json);
}
}
3. 地址三级联动
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>Insert title here</title>
</head>
<body>
收货地址:
<select id="select1">
<option value="-1">---请选择国家---</option>
</select>
<select id="select2">
<option value="-1">---请选择省份/洲---</option>
</select>
<select id="select3">
<option value="-1">---请选择地区---</option>
</select>
<script type="text/javascript" src="/Ajax/js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
// 发送一个请求, 查询所有的国家, 填充到select1
$.post("/Ajax/area", {
// 1表示先查询所有国家
pid : 1,
}, function(data) {
// [{"areaId":2,"areaName":"中国"},{"areaId":3,"areaName":"美国"}]
for(var i = 0; i < data.length; i ++){
var opt = new Option(data[i].areaName, data[i].areaId);
$("#select1")[0].add(opt);
}
}, "json");
// 给select1添加内容改变事件, 修改s2的内容
$("#select1").change(function(){
// 发送一个请求, 查询所有的国家, 填充到select1
$.post("/Ajax/area", {
// 1表示先查询所有国家
pid : $(this).val(),
}, function(data) {
// [{"areaId":2,"areaName":"中国"},{"areaId":3,"areaName":"美国"}]
// 返回了结果, 先清空
$("#select2").html("<option value='-1'>---请选择省份/洲---</option>");
$("#select3").html("<option value='-1'>---请选择地区---</option>");
for(var i = 0; i < data.length; i ++){
var opt = new Option(data[i].areaName, data[i].areaId);
$("#select2")[0].add(opt);
}
}, "json");
});
// 给select2添加内容改变事件, 修改s3的内容
$("#select2").change(function(){
// 发送一个请求, 查询所有的国家, 填充到select1
$.post("/Ajax/area", {
// 1表示先查询所有国家
pid : $(this).val(),
}, function(data) {
// [{"areaId":2,"areaName":"中国"},{"areaId":3,"areaName":"美国"}]
// 返回了结果, 先清空
$("#select3").html("<option value='-1'>---请选择地区---</option>");
for(var i = 0; i < data.length; i ++){
var opt = new Option(data[i].areaName, data[i].areaId);
$("#select3")[0].add(opt);
}
}, "json");
});
})
</script>
</body>
</html>
areaservlet
package com.bwf.servlet;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.bwf.jdbc.ConnectionFactory;
import com.google.gson.Gson;
@WebServlet("/area")
public class AreaAjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
// 拿到客户端上传的pid
int pid = Integer.parseInt(request.getParameter("pid"));
System.out.println(pid);
// 带着pid查询数据库
Connection conn = ConnectionFactory.getConnection();
List<Map<String, Object>> dataList = new ArrayList<>();
try {
PreparedStatement ps = conn.prepareStatement("SELECT * FROM area WHERE pid = ?");
ps.setInt(1, pid);
ResultSet rs = ps.executeQuery();
while(rs.next()){
// 封装对象
Map<String, Object> map = new HashMap<>();
map.put("areaId", rs.getInt("areaId"));
map.put("areaName", rs.getString("areaName"));
dataList.add(map);
}
} catch (SQLException e) {
e.printStackTrace();
}
// 转成json
String json = new Gson().toJson(dataList);
System.out.println(json);
// 返回客户端
response.getWriter().write(json);
}
}
1519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
