[Ajax] Ajax로 받아온 데이터를 다른 함수에서 사용하기 (callback 함수 활용편)

Ajax는 비동기적인 웹 어플리케이션을 만들기 위한 기술입니다. 그래서 웹 페이지 전체를 다시 로딩시키지 않고, 일부분만을 갱신할 수 있는 획기적인 아이이죠! 동기와 비동기/콜백함수 더 알아보기👇 https://hiolivia.tistory.com/42 Ajax를 쓰다보면 이런 궁금중이 생길 수 있습니다. //백앤드 소스가 없으므로 다음의 json 데이터를 받아온다고 가정해보겠습니다 //{name:'olly', age:20, Job: 'developer'} function getData(){ let result; $.ajax({ type: 'POST', dataType: 'json', url: json_url + 'data.php', async:true, cache:false, data: { id: id..
Ajax 2022. 4. 28. 15:31
[Ajax] Ajax 통신 시 로딩 표시하기 (비동기식&동기식)

Ajax로 데이터를 받아와 화면에 뿌리는 데는 시간이 걸립니다. 그래서 로딩 화면을 보여줘야 사용자도 로딩중임을 알 수 있는데요, Ajax 통신 시 로딩 화면을 띄우는 법을 알아보겠습니다! 1. async:true 비동기식 - 한번에 모든 Ajax 요청에 따라 처리할 때 //AJAX 통신 시작 $( document ).ajaxStart(function() { $('#load').addClass("view"); }); //AJAX 통신 종료 $( document ).ajaxStop(function() { $('#load').removeClass("view"); }); - 각각 Ajax 요청에 따라 처리할 때 $.ajax({ url: URL, dataType: 'json', type: 'POST', data..
Ajax 2021. 11. 26. 16:21
[Ajax] Ajax 데이터를 전역으로 사용하기 (async)

Ajax 데이터를 전역으로 사용해야 할 일이 있었는데요, function 1 안에서 Ajax로 가져온 데이터를 function 2 안에서도 업데이트하고 사용해야 했었죠. 그래서 배열을 만들어 전역으로 선언한 다음, 그 배열에 데이터를 넣고 function 2 에서도 사용하려고 했는데요, 초기값은 잘 담기지만 데이터가 달라질 때마다 업데이트가 안됐습니다. 그래서 찾아낸 방법이 바로 async입니다! $.ajax({ type: 'POST', dataType: 'json', url: json_url + 'json/chart/chart.php', async:false, //요부분! false로 바꿔주기 cache:false, data: { }, success: function (data){ } }); async..
Ajax 2021. 11. 25. 17:07
1