點擊刪除按鈕彈出對話框提示是否刪除

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章