master

分支 (1)

管理

管理

master

des-and-3-des
/
index.html

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <style>
        #box{
            width: 400px;
            height: 500px;
            border: 1px solid black;
            margin: 50px auto;
        }
        #plaintext,#ciphertext,#plaintext3,#ciphertext3{
            width: 250px;
            height: 40px;
            margin: 10px 28px;
        }
        #encryption,#decrypt,#encryption3,#decrypt3{
            width: 60px;
            height: 45px;
        }
        #DES,#DES3{
            margin-left: 28px;
        }
    </style>
</head>

<body>
    <div id="box">
        <form id="myForm" name="des">
            <h1 id="DES">DES</h1>
            <input type="text" id="plaintext">
            <input type="button" id="encryption" value="加密">
            <br>
            <input type="text" id="ciphertext">
            <input type="button" id="decrypt" value="解密">
        </form>
        <form id="myForm3" name="des3">
            <h1 id="DES3">DES3</h1>
            <input type="text" id="plaintext3">
            <input type="button" id="encryption3" value="加密">
            <br>
            <input type="text" id="ciphertext3">
            <input type="button" id="decrypt3" value="解密">
        </form>
    </div>

    <script>
        let Path = 'http://localhost:8080/'
        let Plaintext = document.getElementById('plaintext')
        let Ciphertext = document.getElementById('ciphertext')
        $("#encryption").click(function () {
            $.ajax({
                type: "GET",   //提交的方法
                url: Path + 'e/' + Plaintext.value, //提交的地址
                data: $('#myForm').serialize(),// 序列化表单值
                async: false,
                error: function (request) {  //失败的话
                    alert("Connection error");
                },
                success: function (data) {  //成功
                    console.log(data);  //就将返回的数据显示出来
                    window.location.href = "javascript:;"
                    Ciphertext.value = data
                    Plaintext.value = ""
                }
            });
        });
        $("#decrypt").click(function () {
            $.ajax({
                type: "GET",   //提交的方法
                url: Path + 'de/' + Ciphertext.value, //提交的地址
                data: $('#myForm').serialize(),// 序列化表单值
                async: false,
                error: function (request) {  //失败的话
                    alert("Connection error");
                },
                success: function (data) {  //成功
                    console.log(data);  //就将返回的数据显示出来
                    window.location.href = "javascript:;"
                    Plaintext.value = data
                    Ciphertext.value = ""
                }
            });
        });
    </script>
</body>

</html>