[Ajax]비동기 처리(with jQuery)

새로운 이벤트를 위해 유저의 정보를 받아와 저장하는 작업을 해야했다.

벡엔드 과장님의 제안으로 jQuery와 Ajax를 사용해 비동기 처리를 하기로 했다.

 

백엔드 분께 전달 받을 정보

text.php
--post
param(characterName,walletAddress)

결과 값으로 성공 시 1, 이름 중복 시 2 를 보내주기로 함

 

text.php로 요청을 보내고

요청은 post로 보내고

그때  'characterName',  'walletAddress' 을 담아서 보내라는 거구나.

 

const alertTxt = document.getElementsByClassName("alert_txt")[0];
const eventPopupMes = {
  warn :{
    incomplete : "Please enter all information!",
    already : "This name has already been registered.",
	error : "Wrong access attempt."
  }
  ,
  success : {
    txt : "Success Registration!"
  },
  
const postInformation = () =>{
  const characterName = document.querySelector('input[name=charactername]');
  const walletAddress = document.querySelector('input[name=walletaddress]');

  if(characterName.value == null || characterName.value == "" 
    || walletAddress.value == null || walletAddress.value == "" ){
    alertTxt.innerText = eventPopupMes.warn.incomplete;	
	return;
  }else{
    let data = {
      'characterName' : characterName.value,
      'walletAddress' : walletAddress.value,
    }

    $.ajax({
      url: "./test.php",
      method: "POST",
      data: data,
      dataType : "json",
      success : function(response){
        if(response === 1){
          // success
          alertTxt.innerText = eventPopupMes.success.txt;	
        }else if(response === 2){
          // name url 중복 체크
          alertTxt.innerText = eventPopupMes.warn.already;
        }
      },
      error : function(error){
        console.log(error);
        alertTxt.innerText = eventPopupMes.warn.error;
      }
    })
  }
}

• url : Ajax로 요청을 보낼 url
• mehtod: GET 또는 POST
• async: 동기, 비동기 (boolean)
• data: 요청 시 보낼 데이터들
• dataType : 받아올 데이터들의 자료형
• success: Ajax 요청 성공 시 실행될 이벤트
• error: Ajax 요성 실패 시 실행될 이벤트

 

 

POST 요청을 보낼 데이터

 let data = {
  'characterName' : characterName.value,
  'walletAddress' : walletAddress.value,
}

 

 

[에러 처리]

첫 코드에서는 error 처리를 하지 않아서 피드백을 받고 error에 대한 함수도 작성했다.

 $.ajax({
      url: "./test.php",
      method: "POST",
      data: data,
      dataType : "json",
      success : function(){}
      ,
      error : function(error){
        console.log(error);
      }
    })

 

 

[결과]

 

첫 ajax통신에 신난 메신저

 

 

과장님이 전달주신 "비동기, 동기"에 대한 포스트 - AJAX란? JQuery를 이용한 AJAX사용법