原理:confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。如果用户点击确定按钮,则 confirm() 返回 true。如果点击取消按钮,则 confirm() 返回 false。在用户点击确定按钮或取消按钮把对话框关闭之前,它将阻止用户对浏览器的所有输入。在调用 confirm() 时,将暂停对 JavaScript 代码的执行,在用户作出响应之前,不会执行下一条语句。
方法一:使用Js 的confirm方法
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="./Jscript/jquery.min.js"></script>
</head>
<body>
<input id="input" type="button" value="删除" />
<script type="text/javascript">
$().ready(function(){
$("#input").click(function(){ //点击按钮访问后台servlet
var r=confirm("确定删除吗?")
if (r==true)
{
var xhr = createXmlHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200 || xhr.status == 304){
alert("aaaa");
}
}
}
xhr.open("GET","servlet/JOptionServlet?time=" + new Date().getTime());
xhr.send(null);
}else{
}
});
});
function createXmlHttpRequest(){
var xmlHttp;
try{ //Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
try{ //Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
return xmlHttp;
}
</script>
</body>
</html>
注:熟练之后可以使用layer
<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=gbk">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="./Jscript/jquery.min.js"></script>
<script type="text/javascript" src="./layer/layer.js"></script>
</head>
<body>
<button id="test1">小小提示层</button>
<script type="text/javascript">
$('#test1').on('click', function(){
layer.confirm('确定删除吗?', {
btn: ['确定','取消'] //按钮
}, function(){ //点击确定访问后台
var xhr = createXmlHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200 || xhr.status == 304){
layer.msg('已删除', {icon: 1});
}
}
}
xhr.open("GET","servlet/JOptionServlet?time=" + new Date().getTime());
xhr.send(null);
}, function(){ //点击取消则中断操作
layer.msg('已取消', {
time: 2000, //2s后自动关闭
});
});
});
function createXmlHttpRequest(){
var xmlHttp;
try{ //Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
try{ //Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
return xmlHttp;
}
</script>
</body>
</html>
方法二:Swing