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.'입니다.';
?>