jQuery/AJAX

jQuery: GET/POST

carrot62 2020. 7. 31. 11:14
  • GET: 요청한 데이터를 받아올 때 사용한다
  • POST: 특정 팡일로 가공된 데이터를 전송한다

$.get()

$.get(URL,callback);
$("button").click(function(){
  $.get("demo_test.asp", function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

$.post()

$.post(URL,data,callback);

비동기적으로 사용자의 입력값을 전송하는 방법이다. Form을 이용해서 데이터를 전송하면 화면이 바뀌면서(새로고침 되면서) 동기적으로 데이터가 전송되지만, $.post() 방식을 이용하면 AJAX으로 작업이 비동기적으로 이뤄진다.

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name: "Donald Duck",
    city: "Duckburg"
  },
  function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

사용자로부터 받은 입력 값을 사용(user interaction)하고 싶다면:

$("#postbutton").click(function(){
	var username= $("#username").val();
	var age= $("#age").val();
	var city= $("#city").val();
	$.post("jsqlhw2.php", {
		username: username,
        age: age,
        city: city,
	}, function(data, status){
	$("#message").html(data);	//사용자 입력값을 php에서 처리해서 html 내용으로 받아온다
	});
});
<div class="postdiv"> <label for="username">Username: </label><input type="text" id="username"></div>
<div class="postdiv"> <label for="username">Age: </label><input type="text" id="age"></div>
<div class="postdiv"> <label for="username">City: </label><input type="text" id="city"></div>
<br>
<button id="postbutton">Click to send HTTP POST request</button>
<div id="message"></div>

이때의 php 파일은:

<?php 
    $name=$_POST["username"];
    $age=$_POST["age"];
    $city=$_POST["city"];
    $num = $_POST["index"]
?>

<!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>
    <p>입력하신 정보는 다음과 같습니다: </p>
    <p>이름: <?=$name?> <br>
        나이: <?=$age?> <br>
        도시: <?=$city?> <br>
    </p> 
</body>
</html>

POST 방식을 사용하면 form이 아니더라도 사용자가 input한 값이 전송된다. Submit 기능이 .post() 자체에 있기 때문이다.

Form을 이용해서 동기적으로 만들려고 했다면:

<form> 
<input ... >
<input ... >
<input type="submit"> 
</form>

사용자로부터 데이터를 받아오도록 POST 내용을 변경하는 방법:

  1. input 태그를 추가한다
  2. click할 때 input 태그 값을 가져온다
  3. post의 데이터를 변경한다