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 |
최근댓글