原理: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