Javascript:AJAX: 두 판 사이의 차이

2022년 5월 19일 (목) 11:34 판

Javascript:개요
Javascript:변수, 상수
1. Javascript:자료구조
Javascript:연산자
분기문
1. Javascript:조건문
2. Javascript:반복문
Javascript:선택자
1. Javascript:요소 내용 변경
2. Javascript:HTML로부터 데이터 받기
Javascript:이벤트
1. Javascript:클릭 이벤트
Javascript:AJAX
1. AJAX 활용
  1. Javascript:댓글달기
  2. Javascript:무한 스크롤링
Javascript:활용
1. Javascript:표 정렬

개요

AJAX. Asynchronous Javascript And Xml. 웹은 기본적으로 동기적으로(순차적으로) 작동하는데, 비동기적이라는 의미는, 동시에 여러 작업들이 동시에 일어나게 한다는 의미이다. 새로고침이 일어나지 않으면서도 문서화면을 갱신해주는 방법.

HTMl에서 직접 사용하거나, 자바스크립트 파일로 빼서 사용할 수도 있다.

비동기 통신을 위하여 서버를 실행시킨 후...

JQuary에서

호출법

함수 안에 다음과 같은 내용들을 넣는다.

<script>
function test_click(id) {
    console.log(id);
    $.ajax({
        type:'POST',  // GET이냐 POST냐.
        url: "{% url 'scientific_humor:posting_like' posting.id %}",     // data를 전송할 url.
        data:{'posting_id': id,                                         // 보낼 데이터.
                'csrfmiddlewaretoken': '{{ csrf_token }}',              // 장고의 경우, csrf_token도 보내야 해서 함께 담아야 제대로 작동한다.

        },                                      // posting_id 라는 이름으로 id 값 전송
        dataType: "json",
        success: function (response){                      // ajax 통신이 정상적으로 완료되었을 때
            console.log("응답성공");
            if
        },
        error: function (response){                         // 통신에 실패했을 때.
            console.log('실패');
        }
        complete:function() {} // 성공했든, 실패했든 작업이 끝날 때 불러올 함수.(없어도 된다.)
    });
}
</script>

@@ 7번째 줄: / 7번째 줄: @@
 비동기 통신을 위하여 서버를 실행시킨 후...
+== JQuary에서 ==
 ===호출법===
-html 안에서 jQuary를 호출해야 사용할 수 있다.<syntaxhighlight lang="javascript">
+함수 안에 다음과 같은 내용들을 넣는다.<syntaxhighlight lang="javascript+php">
-$.ajax({
+<script>
-    type:'POST',  // GET이냐 POST냐.
+function test_click(id) {
-    url:'경로/파일.json',  // 어떤 url로 요청할 것이냐.
+    console.log(id);
-    data:변수.getAttribute('data-name');  // 어떤 데이터값을 보낼 것이냐.
+    $.ajax({
-    dataType:'json',  // 받을 데이터의 형태를 입력한다. html, xml, json 등
+        type:'POST',  // GET이냐 POST냐.
-    success:function()  // 성공할 경우 불러올 함수.
+        url: "{% url 'scientific_humor:posting_like' posting.id %}",     // data를 전송할 url.
-    error:function()  // 실패할 경우 불러올 함수.
+        data:{'posting_id': id,                                         // 보낼 데이터.
-    complete:function()  // 성공했든, 실패했든 작업이 끝날 때 불러올 함수.(없어도 된다.)
+                'csrfmiddlewaretoken': '{{ csrf_token }}',              // 장고의 경우, csrf_token도 보내야 해서 함께 담아야 제대로 작동한다.
-})
-</syntaxhighlight>
-===예시===
+        },                                      // posting_id 라는 이름으로 id 값 전송
-좋아요 카운트를 올릴 때.<syntaxhighlight lang="javascript">
+        dataType: "json",
-$.ajax({
+        success: function (response){                      // ajax 통신이 정상적으로 완료되었을 때
-    type:'POST',
+            console.log("응답성공");
-    url:'경로/파일.json',
+            if
-    data:변수.getAttribute('data-name');  // 해당 변수에서의 속성을 가져온다.
+         },
-    dataType:'json',
+        error: function (response){                         // 통신에 실패했을 때.
-    success:(response)=>{  //한줄 함수 정의식.
+            console.log('실패');
-        let count = document.querySelector('#count');
+         }
-         count.innerHTML = response.count;  // html안에 응답받은 count값을 넣는다.(count값은 url에서 지정한 곳에서 응답받는다.)
+        complete:function() {} // 성공했든, 실패했든 작업이 끝날 때 불러올 함수.(없어도 된다.)
-    },
+     });
-    error:()=>{
+}
-        alert('로그인하세요~');
+</script>
-         window.location.replace('https://주소');  // 에러가 나면 로그인화면으로 옮기기도 한다.
-     }
-})
 </syntaxhighlight>

Javascript:AJAX: 두 판 사이의 차이

2022년 5월 19일 (목) 11:34 판

개요

JQuary에서

호출법

둘러보기 메뉴

검색