[jQuery] AjAX 서버로 데이터 보내고 받는(가져오는) 방법
아작스를 활용하여 서버로 데이터를 보내고 받는 방법의 예제 입니다.
데이터를 가져올때 반드시 GET을 사용해야 되는것은 아닙니다. POST로 관계는 없습니다.
$(document).ready(function() {
// AjAX로 보내는 방법 - 컨텐츠타입: json
jQuery.ajax(
{
type : "GET",
url : url,
dataType: "JSON",
// 성공
success : function(data) {
return data;
},
// 성공, 실패 무관하게 들어오는 곳
complete: function(data) {
console.log(data);
},
// 오류
error : function(xhr, status, error) {
console.log(xhr);
console.log(status);
console.log(error);
}
});
// AjAX로 서버로 보내는 방법 - POST
let aTest = {a:'test1', b:'testb'};
let form = new FormData();
form.append("mode", 'test2' );
form.append("img_name", 'test_img' );
form.append("aTest", JSON.stringify(aTest) );
if ( typeof $("#pFile")[0].files[0] == 'undefined' ) {
}
else if ( $("#pFile")[0].files[0].length ) {
form.append("pFile", $("#pFile")[0].files[0] );
}
jQuery.ajax(
{
url : "./test2.php",
type : "POST",
processData : false,
contentType : false,
data : form,
success : function(response) {
console.log(response);
// data = JSON.parse(response);
// console.log(data);
},
error: function (jqXHR) {
console.log(jqXHR.responseText);
}
});
</script>
보내고 받을때 POST, GET 본인이 편한것을 사용하면 됩니다.
GET의 경우 브라우저의 주소창을 통해서 확인하기 쉽기 때문에 보통은 이 방법을 많이 사용합니다.
중요한것은 GET, POST의 특성을 알고 사용하는 것입니다. 그리고 컨텐츠 타입에 대한 부분.
위에 모두 보낸다고 표현을 했는데요. 맞는 말일수도 있고. 가져오는데 목적이 있다면 그게 맞게 조건을 줘서 사용하면 그만 입니다.
dataType 부분에 JSON으로 주게 되면 받은 데이터가 파서가 되어 있는지 확인해볼 필요가 있습니다. 오브젝트로 넘어 온다는 것입니다.
그렇지 않으면 받은 것을 파서 시키면 됩니다.
* 참고하기
위에선 success 된다음 특정 실행 시키고 싶은 특정 함수를 넣어주거나 직접 비즈니스 로직을 넣어주면 됩니다.
하지만 별도로 체크할 필요가 있을 경우엔 아래를 참고 하세요
- [jQuery] 서버에서 json 데이터 가져왔는지 확인법 > javascript