티스토리 뷰

TIL

[TIL] ajax

HanGyuJung 2021. 9. 2. 18:01

 

Ajax : 페이지를 내려주는 것이 아닌 필요한 데이터만 내려주는 비동기적으로 통신하는 기법

 

위와 같이 자바스크립트에서는 [ ] 는 배열을 나타내고 { } 는 객체를 표현한다. ( 자바랑 헷갈리지말자! )

 

<html>
	<body>
		<ul>
			<li>1...</li>
			...
			<li>1000...</li>
			<!-- 이런 li가 1000개! -->
		</ul>
	</body>
</html>

위와 같이 <li> 에 이벤트 바인딩을 하려고 하는데 li가 동적으로 늘어나거나 수가 매우 많을 떄,

$("ul li").on("click", function(){}) 이런식으로 쓰게 되면 이벤트 바인드 개수가 li 요소 개수만큼 나온다. 

특히 동적으로 만들어진 애한테는 이벤트 바인딩이 안되기 때문에 밑에와같이 delegate를 써야함

$("ul").on("click", "li", function(){}) 과 같이 하나의 이벤트 바인딩으로 끝낼 수도 있다. 

 

다음은 실제 코드예시이다.

        $("#content tr").on("click", function() {
            let id = $(this).attr("id");

            $.ajax({
                url: "http://itsmeyjc.asuscomm.com:8765/msg/"+id,
                type: "get",
                success: function(res) {
                    $("#no").val(res.no);
                    $("#from").val(res.from);
                    $("#to").val(res.to);
                    $("#msg").val(res.msg);

                    $(this).each(function(idx, item) {
                        $no = item.no;
                    });
                }
            });
        });

HTTP 상태 코드

200  OK   요청성공

403  Forbidden  접근거부(권한이없음)

404  Not Found  페이지없음

500  Internal Serever Error   서버 오류 발생.

 

부트스트랩 템플릿 무료 제공 사이트

https://www.bootstrapzero.com/

https://startbootstrap.com/themes/

https://templatemag.com/bootstrap-templates/

https://themehunt.com/

https://bootstrapmade.com/

https://bootstrapmade.com/bootstrap-4-templates/

 

'TIL' 카테고리의 다른 글

[TIL] RDBMS  (0) 2021.09.06
[TIL] 코딩테스트에 많이 쓰이는 함수들(JAVA)  (0) 2021.09.02
프로그래머스 네트워크 Java  (0) 2021.08.29
[TIL] 프로그래머스 SQL 및 코딩문제 풀이  (0) 2021.08.28
[TIL] CSS 포지셔닝, JavaScript 문법, MySQL JOIN  (0) 2021.08.27