Javascript:AJAX - 편집 역사

2022년 10월 28일 (금) 01:12에 Sam님의 편집

2022-10-28T01:12:15Z

@@ 8번째 줄: / 8번째 줄: @@
 비동기 통신을 위하여 서버를 실행시킨 후...
-== JQuary에서 ==
+==JQuary에서==
 ===호출법===
@@ 35번째 줄: / 35번째 줄: @@
 </script>
 </syntaxhighlight>

Sam: /* 호출법 */

2022-05-19T02:34:12Z

호출법

← 이전 판		2022년 5월 19일 (목) 02:34 판
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>		</syntaxhighlight>

222.100.201.17: /* 개요 */

2021-07-26T13:05:14Z

개요

← 이전 판		2021년 7월 26일 (월) 13:05 판
3번째 줄:		3번째 줄:
	==개요==		==개요==
	AJAX. Asynchronous Javascript And Xml. 웹은 기본적으로 동기적으로(순차적으로) 작동하는데, 비동기적이라는 의미는, 동시에 여러 작업들이 동시에 일어나게 한다는 의미이다. 새로고침이 일어나지 않으면서도 문서화면을 갱신해주는 방법.		AJAX. Asynchronous Javascript And Xml. 웹은 기본적으로 동기적으로(순차적으로) 작동하는데, 비동기적이라는 의미는, 동시에 여러 작업들이 동시에 일어나게 한다는 의미이다. 새로고침이 일어나지 않으면서도 문서화면을 갱신해주는 방법.

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

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

	=== 호출법 ===		===호출법===
	html 안에서 jQuary를 호출해야 사용할 수 있다.<syntaxhighlight lang="javascript">		html 안에서 jQuary를 호출해야 사용할 수 있다.<syntaxhighlight lang="javascript">
	$.ajax({		$.ajax({
19번째 줄:		21번째 줄:
	</syntaxhighlight>		</syntaxhighlight>

	=== 예시 ===		===예시===
	좋아요 카운트를 올릴 때.<syntaxhighlight lang="javascript">		좋아요 카운트를 올릴 때.<syntaxhighlight lang="javascript">
	$.ajax({		$.ajax({

Sam: /* 개요 */

2021-06-11T12:37:33Z

개요

@@ 1번째 줄: / 1번째 줄: @@
 {{Javascript}}
-== 개요 ==
+==개요==
-Asynchronous Javascript And Xml. 웹은 기본적으로 동기적으로(순차적으로) 작동하는데, 비동기적이라는 의미는, 동시에 여러 작업들이 동시에 일어나게 한다는 의미이다. 새로고침이 일어나지 않으면서도 문서화면을 갱신해주는 방법.
+AJAX. Asynchronous Javascript And Xml. 웹은 기본적으로 동기적으로(순차적으로) 작동하는데, 비동기적이라는 의미는, 동시에 여러 작업들이 동시에 일어나게 한다는 의미이다. 새로고침이 일어나지 않으면서도 문서화면을 갱신해주는 방법.
-<br />

Sam: 새 문서: {{Javascript}} == 개요 == Asynchronous Javascript And Xml. 웹은 기본적으로 동기적으로(순차적으로) 작동하는데, 비동기적이라는 의미는, 동시에 여...

2021-06-11T11:30:38Z

새 문서: {{Javascript}} == 개요 == Asynchronous Javascript And Xml. 웹은 기본적으로 동기적으로(순차적으로) 작동하는데, 비동기적이라는 의미는, 동시에 여...

새 문서

{{Javascript}}

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