Kirill
/
aiohttp_web_server_test
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add input field

Browse Source
pull/2/head
kirill 2 years ago
parent 76b970dac6
commit c3ab24044f
1 changed files with 53 additions and 63 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 116
      demo/templates/index.html

116
demo/templates/index.html
Unescape View File

@ -12,86 +12,76 @@
min-height: 100vh; min-height: 100vh;
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%) background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)
} }
h1{
h1 {
text-align: center;
color: white; color: white;
text-shadow: 0 2px 5px rgba(150, 150, 150, 0.8);
} }
p{
#root { color:white;
display: flex;
flex-direction: column;
align-items: center;
} }
.container{
margin-left: 20vw;
.form {
width: 70%;
margin-bottom: 20px;
} }
#submit{
.form__button { margin-top: 20px;
text-align: center; border-radius: 10px;
margin-top: 10px; height: 50px;
background-color: white; width:50vw;
cursor: pointer; color:black;
} }
#inputText{
#myButton { border-radius: 10px;
box-sizing: border-box; height: 30px;
width: 100%; width: 49.5vw;
font-size: 18px;
outline: none;
border: none;
padding: 20px;
border-radius: 5px;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
transition: 0.3s;
-webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
} }
.container_result{
#myButton:hover { margin-top: 20px;
-webkit-transition: 0.3s; min-height: 50px;
-moz-transition: 0.3s;
transition: 0.3s;
-webkit-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5);
}
#myResult {
text-align: center; text-align: center;
color: white; width: 50vw;
text-shadow: 0 2px 5px rgba(150, 150, 150, 0.8); border: 3px solid white;
border-radius: 5px;
background-color: grey;
} }
</style> </style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head> </head>
<body> <body>
<div> <div class="container">
<h1>Знакомство с aiohttp</h1> <h1>Знакомство с aiohttp</h1>
<div id="root"> <div id="root">
<div class="form"> <div class="form">
<div class="form__button"><button id='myButton'>Отправить</button></div> <form id="myForm">
<p id="myResult"></p> <input type="text" id="inputText" placeholder="Введите текст">
<div class="form__button"><button id='submit'>Отправить</button></div>
</form>
<div class="container_result">
<p id="response"></p>
</div>
</div> </div>
</div> </div>
</div>
</body> </body>
<script> <script>
$(document).ready(function() { document.getElementById('myForm').addEventListener('submit', async function(event) {
$("#myButton").click(function() { event.preventDefault(); // Предотвращаем отправку формы по умолчанию
$.ajax({
type: "POST", const inputText = document.getElementById('inputText').value;
url: "/button-clicked",
dataType: "json", const response = await fetch('/submit', {
success: function(response) { method: 'POST',
$("#myResult").text(response.result); headers: {
} 'Content-Type': 'application/x-www-form-urlencoded'
},
body: new URLSearchParams({
'text': inputText
})
}); });
const responseText = await response.text();
document.getElementById('response').innerText = responseText;
}); });
}); </script>
</script>
</html> </html>

Write Preview
Loading…
Cancel
Save