jQuery 연구 노트 - Ajax 작업(2) - 데이터 전송_jquery

데이터 요청

GET 및 POST를 사용하여 백엔드에서 데이터를 요청할 수 있습니다. 여기서는 연령 정보를 반환하는 데 사용되는 테스트 페이지 age.php가 있다고 가정합니다.

if(isset($_REQUEST['name']) && $_REQUEST['name'] == 'stephen') {
  echo '23';
}

현재 페이지 내용은 다음과 같습니다.

<div>
 <a href="age.php">stephen</a>
 <span>age : </span>
 <span id="sex"></span>
</div>

a 태그를 클릭한 후 페이지를 새로 고치지 않고도 연령 정보를 얻을 수 있기를 바랍니다. GET 메소드를 사용하여 첫 번째 데이터 요청:

GET 방식

 $('a').click(function(e) {
  e.preventDefault();//
  var url = $(this).attr('href'),
   name = $(this).text(),
   requestData = {'name': name};

  $.get(url, requestData, function(data) {
   $('#sex').html(data);
  });
 });

a 태그를 클릭하면 현재 페이지는 다음과 같습니다.

데이터 요청이 성공했습니다. POST 메서드를 사용하여 다시 테스트해 보겠습니다.

POST 방식

 $('a').click(function(e) {
  e.preventDefault();//
  var url = $(this).attr('href'),
   name = $(this).text(),
   requestData = {'name': name};

  $.post(url, requestData, function(data) {
   $('#sex').html(data);
  });
 });

get 메소드가 post 메소드로 변경된 점만 빼면 코드는 거의 동일합니다.
여기서 실제로 load 메소드를 사용하여 코드를 단순화할 수 있습니다.

 $('a').click(function(e) {
  e.preventDefault();
  var url = $(this).attr('href'),
   name = $(this).text(),
   requestData = {'name': name};

  $('#sex').load(url, requestData);
 });

데이터 보내기

Ajax 기술을 사용하여 백엔드에서 데이터를 얻는 것 외에도 일반적인 시나리오는 양식을 비동기식으로 제출하는 것입니다.

<form action="validate.php">
 username:<input id="username" name="username" type="text" />
 password:<input id="password" name="password" type="text" />
 <input value="submit" type="submit" />
</form>

사용자 이름이 stephenlee이고 비밀번호가 123456이면 확인에 성공하고, 그렇지 않으면 테스트 페이지 verify.php는 다음과 같습니다.

if($_REQUEST['username'] == 'stephenlee' && $_REQUEST['password'] == '123456') {
  echo 'pass';
} else {
  echo 'fail';
}

get 메소드를 사용하여 확인을 위해 백엔드로 데이터를 보냅니다.

 $('form').submit(function(e) {
  e.preventDefault();//
  var url = $(this).attr('action'), 
   username = $('input[name="username"]').val(),
   password = $('input[name="password"]').val(),
   requestData = {'username': username, 'password': password};

  $.get(url, requestData, function(result) {
   alert(result);
  });
 });

잘못된 사용자 이름 lucas를 입력한 후의 결과는 다음과 같습니다.

올바른 사용자 이름 stephenlee를 입력하면 결과는 다음과 같습니다.

포스트 방식으로 데이터를 보내는 방식은 동일하므로 여기서는 자세히 설명하지 않겠습니다.