jquery의 ajax를 사용해서 오늘의 색을 추천하는 페이지를 만들어보겠습니다.
먼저 html에서 jquery를 사용하기로 선언하고, 닉네임과 확인버튼이 있는 간단한 화면을 만들어줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>오늘의 색</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h2>오늘의 색 찾기!</h2>
<input id="nickname" type="text" placeholder="닉네임"/>
<button type="submit" id="button">
확인
</button>
<br>
<br>
<br>
<h4 id="result"></h4>
</body>
</html>
그다음, ajax로 get 또는 post 전송을 하는 코드를 작성합니다.
아래에는 get으로 전송하는 방법입니다. post로 하기 원한다면 method를 post로 변경하면 됩니다.
스틱코드를 사용하면 빠르게 하실 수 있습니다.
스틱코드
stickode.com
<script>
$('#button').click(
function () {
$.ajax({
url: "./find_color.php",
method: "get",
data: {
nickname: $('#nickname').val()
}
}).done(function (data) {
$("#result").html(data);// = data;
})
}
)
</script>
닉네임에 따라 랜덤하게 색을 골라주는 find_color.php를 만듭니다.
<?php
$nickname = $_GET['nickname'];
$color_array = ['파랑', '노랑', '검정', '주황', '빨강', '초록', '하양', '보라', '연두'];
$random_num = rand(0, 100) + strlen($nickname);
$today_color = $color_array[$random_num / sizeof($color_array)];
$output = "{$nickname}님의 오늘 행운의 색은 {$today_color}색 입니다";
echo $output;
다음과 같은 페이지가 완성됐습니다!
'JavaScript' 카테고리의 다른 글
| [JavaScript] js 로 html 에 element 생성 (0) | 2021.12.16 |
|---|---|
| [JavaScript] hash 암호화 (0) | 2021.12.10 |
| [JavaScript] JavaScript 자식 요소 전부 삭제하기 (0) | 2021.11.26 |
| [JavaScript] 탭 메뉴 만들기 (0) | 2021.11.20 |
| [JavaScript]마우스 오버시 이미지 확대하기 (0) | 2021.11.19 |
