Compare commits
No commits in common. 'aaf608d2d2ceac2d7c1a9f1e14e601cfcd32a923' and '2c6dceee3e5d149e8bc5a8cd08e6465d4df035d5' have entirely different histories.
aaf608d2d2
...
2c6dceee3e
@ -1,87 +1,100 @@ |
|||||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||||
<html lang="en"> |
<html lang="en"> |
||||||
<head> |
<head> |
||||||
<meta charset="UTF-8" /> |
<meta charset="UTF-8"/> |
||||||
<title>Знакомство с aiohttp</title> |
<title>Знакомство с aiohttp</title> |
||||||
<style> |
<style> |
||||||
html { |
html { |
||||||
font-family: Verdana, "sans-serif"; |
font-family: Verdana, "sans-serif"; |
||||||
} |
} |
||||||
|
|
||||||
body { |
body { |
||||||
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{ |
|
||||||
color: white; |
|
||||||
|
|
||||||
} |
h1 { |
||||||
p{ |
text-align: center; |
||||||
color:white; |
color: white; |
||||||
} |
text-shadow: 0 2px 5px rgba(150, 150, 150, 0.8); |
||||||
.container{ |
} |
||||||
margin-left: 20vw; |
|
||||||
} |
|
||||||
#submit{ |
|
||||||
margin-top: 20px; |
|
||||||
border-radius: 10px; |
|
||||||
height: 50px; |
|
||||||
width:50vw; |
|
||||||
color:black; |
|
||||||
} |
|
||||||
#inputText{ |
|
||||||
border-radius: 10px; |
|
||||||
height: 30px; |
|
||||||
width: 49.5vw; |
|
||||||
} |
|
||||||
.container_result{ |
|
||||||
margin-top: 20px; |
|
||||||
min-height: 50px; |
|
||||||
text-align: center; |
|
||||||
width: 50vw; |
|
||||||
border: 3px solid white; |
|
||||||
border-radius: 5px; |
|
||||||
background-color: grey; |
|
||||||
} |
|
||||||
|
|
||||||
|
#root { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.form { |
||||||
|
width: 70%; |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.form__button { |
||||||
|
text-align: center; |
||||||
|
margin-top: 10px; |
||||||
|
background-color: white; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
#myButton { |
||||||
|
box-sizing: border-box; |
||||||
|
width: 100%; |
||||||
|
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); |
||||||
|
} |
||||||
|
|
||||||
|
#myButton:hover { |
||||||
|
-webkit-transition: 0.3s; |
||||||
|
-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; |
||||||
|
color: white; |
||||||
|
text-shadow: 0 2px 5px rgba(150, 150, 150, 0.8); |
||||||
|
} |
||||||
</style> |
</style> |
||||||
</head> |
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
||||||
<body> |
</head> |
||||||
<div class="container"> |
<body> |
||||||
<h1>Знакомство с aiohttp</h1> |
<div> |
||||||
<div id="root"> |
<h1>Знакомство с aiohttp</h1> |
||||||
|
<div id="root"> |
||||||
<div class="form"> |
<div class="form"> |
||||||
<form id="myForm"> |
<div class="form__button"> |
||||||
<input type="text" id="inputText" placeholder="Введите текст"> |
<button id='myButton'>Отправить</button> |
||||||
<div class="form__button"><button id='submit'>Отправить</button></div> |
</div> |
||||||
|
<p id="myResult"></p> |
||||||
</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> |
||||||
|
|||||||
Loading…
Reference in new issue