[JS] (jquery) 기초 사용법 Ajax(json)
jquery 기초 문법 (자주 쓰이는 함수)
$("안에 태그, 클래스명, 아이디명 중 하나").이벤트메서드(funciton(){
$(" ").위의 이벤트가 발생할 시, 동작할 메서드;
});
예시 코드
// h1 태그를 클릭할 시, h1태그의 css color를 red 색으로
$("h1").click(function(){
$("h1").css("color", "red");
});
// 다른 방법 on 뒤의 ""부분에 다른 이벤트 메서드 작성 가능
$("h1").on("click", function(){
$("h1").css("color", "red");
$("p").css("color", "brown");
});
// .one 메소드는 한번만 실행되고, 더는 실행되지 않는다
$("h1").one("click", function(){
...
});
참고
// html문서의 로딩이 다 끝나면..
$(document).ready(function( ...
// 이미지 및 기타 외부 리소스를 포함하여 모든 콘텐츠가 로드 완료 후...
$(window).load(function( ...
// 예시)
$(window).load(function(){
$("h1").click(function(){
$("h1").css("color", "red");
});
});
html 제어와 관련된 메소드
.after() / .before()
$(”.className”).after(”<div> 내용 추가 </div>”);
해당 요소 뒤에 내용을 추가 한다. (html()와 같은 기능)
before() 은 반대로 앞에 추가한다.
.html()
$(”.className”).html(”<div> 구문 바꾸기</div>”);
삽입하는 내용에 html 태그가 있다면 적용되며 text가 변경된다. (.text() 기능과 유사함)
.prepend() / .append()
$(”.className”).append(”<li>새로 추가된 아이템</li>”);
아래와 같이 html 요소에 .prepend() 메소드를 이용하면 첫번째 li 앞에 새로운 요소를 추가
.append() 는 반대로 마지막 요소 뒤에 추가한다.
<ol id="list">
<li>첫 번째 아이템</li>
<li>두 번째 아이템</li>
</ol>
.wrap() / .unwrap()
$(”<div> somthing </div>”).wrap(”.className”);
선택한 요소의 부모요소를 생성
$(”.className”).unwrap();
선택한 요소의 부모 요소를 삭제
.remove()
$(”.className”).remove();
태그를 포함한 요소 전체를 제거
.empty()
$(”.className”).empty();
해당 요소의 내용만 지운다.
.detach()
let name = $(”.className”).detach();
ctrl + x 기능, 잘라낸 부분을 다른 변수에 저장
key 제어와 관련된 메소드
.keydown() / .keyup()
$(”.className”).keydown(function(){})
키보드 키를 누른 상태가 될 때 발생되는 이벤트
$(”.className”).keyup(function(){})
키보드 키를 누르고 뗀 후에 발생
.keyPress()
$(”.className”).keypress(function(){})
keydown() 과 유사하지만 tab, enter 등 특수키에는 발생하지 않음
mouse 제어와 관련된 메소드
.click()
마우스로 클릭했을 때
.mousemove()
지정된 요소 범위 내에서 움직이면 발생
.mousedown() / .mouseup()
마우스 버튼을 누를 때, 뗄 때 발생
.mouseout()
마우스가 지정된 요소 범위 내에서 벗어날 때
.hover()
지정된 요소에 마우스를 올리거나 올렸던 마우스가 벗어날 때
css 제어와 관련된 메소드
.addClass() / .removeClass()
**$(”div”).addClass(”클래스명”);**
지정된 요소에 class 명을 추가한다
반대로 removeClass() 는 class명을 삭제한다.
.css()
**$(”.classname”).css(”color”, “blue”);**
선택된 요소에 css를 추가한다.
JS에서 데이터를 받아오는 방법
- fetch
- axios (js 라이브러리)
- ajax (js 라이브러리)
AJAX ( 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능)
| 메소드 | 설명 |
|---|---|
| $.ajax() | 비동기식 Ajax를 이용하여 HTTP 요청을 전송함. |
| $.get() | 전달받은 주소로 GET 방식의 HTTP 요청을 전송함. |
| $.post() | 전달받은 주소로 POST 방식의 HTTP 요청을 전송함. |
| $.getScript() | 웹 페이지에 스크립트를 추가함. |
| $.getJSON() | 전달받은 주소로 GET 방식의 HTTP 요청을 전송하여, 응답으로 JSON 파일을 전송받음. |
| .load() | 서버에서 데이터를 읽은 후, 읽어 들인 HTML 코드를 선택한 요소에 배치함. |
AJAX 문법
$.ajax({
type : 'post', // 타입 (get, post, put 등등)
url : '/test', // 요청할 서버url
async : true, // 비동기화 여부 (default : true)
headers : { // Http header
"Content-Type" : "application/json",
"X-HTTP-Method-Override" : "POST"
},
dataType : 'json', // 데이터 타입 (html, xml, json, text 등등)
data : JSON.stringify({ // 보낼 데이터 (Object , String, Array)
"no" : no,
"name" : name,
"nick" : nick
}),
success : function(result) { // 결과 성공 콜백함수
console.log(result);
},
error : function(request, status, error) { // 결과 에러 콜백함수
console.log(error)
}
})
AJAX 예시
// 요청한 데이터 : {"member_list":[
// {"id":"aa1","pw":"bb","addr":"cc","tel":"dd"},
// {"id":"aa2","pw":"bb","addr":"cc","tel":"dd"},
// {"id":"aa3","pw":"bb","addr":"cc","tel":"dd"}
// ]}
<script>
$(document).ready(function(){
$("#listButton").click(getMemberList); //id="listButton"인 태그에 click하면 function getMemberList() 실행
});
function getMemberList(){
$.ajax({
url:"list.jsp", //list.jsp에 AJAX요청
success:function(data){
let obj=JSON.parse(data); //data를 받아와서 JSON형태로 변환
let array=["<ol>"];
obj["member_list"].forEach(
member => array.push("<li>"+member.id+"</li>")
//JSON에 있는 member.id의 value를 li태그에 넣어서 array에 넣어줌
);
array.push("</ol>");
$("#result").html(array.join(""));
//array의 요소들을 다 합쳐서 하나로 만든후 id="result"인 태그에 html로 출력
}
});
}
</script>
<body>
<a href="#" id="listButton">회원리스트</a><br/>
<div id="result">이곳에 회원 목록을 출력하세요</div>
</body>
댓글남기기