데이터 통신 - 1

Sangyeong Je·2022년 9월 30일
0

프로그래밍

목록 보기
4/11

GET 과 POST 의 동기 통신

프론트단.
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<h2>POST</h2>
	<form method="post" action="post_result.php">
		<label>이름: <input type="text" name="name"></label>
		<label>회사: <input type="text" name="company"></label>
		<input type="submit" value="전송">
	</form>

	<h2>GET</h2>
	<form method="get" action="post_result.php">
		<label>이름: <input type="text" name="name"></label>
		<label>회사: <input type="text" name="company"></label>
		<input type="submit" value="전송">
	</form>
</body>
</html>
백단.
<?php

$name = $_POST["name"];
$company = $_POST["company"];

$name_get = $_GET["name"];
$company_get = $_GET["company"];

?>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<h2>POST</h2>
	<p>이름: <?php echo $name; ?></p>
	<p>회사: <?php echo $company; ?></p>

	<br>
	<br>
	<br>

	
	<h2>GET</h2>
	<p>이름: <?php echo $name_get; ?></p>
	<p>회사: <?php echo $company_get; ?></p>
</body>
</html>

비동기 통신 (ajax 사용)

프론트단.
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script  src="//code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
	<form method="post">
		<label>이름: <input type="text" name="name" class="name"></label>
		<label>회사: <input type="text" name="company" class="company"></label>
	</form>
	<a href="#" class="submit">전송</a>

	<p class="result"></p>

	<script type="text/javascript">
		$('.submit').on({click:function(){
			$.ajax({
				type: 'post',
				url: 'ajax_result.php',
				async: true,
				data: {'name': $('.name').val(), 'company': $('.company').val()},
				success: function(result){
					$('.result').text(result);
				},
				error: function(){
					alert('통신 오류');
				}
			})
			return false;
		}});
	</script>
</body>
</html>
백단.
<?php 
	$name = $_POST['name'];
	$company = $_POST['company'];
	
	echo '이름은'.$name.'이고 회사는'.$company.'입니다.';
 ?>

0개의 댓글