위로
아래
제이쿼리 Ajax 기본형
<script src="../js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url:"dataset.xml",
dataset:"xml",
success:function(data){
내용
}
})
})
</script>관례 : 변수명 앞에 $를 붙여 제이쿼리 변수와 구분한다.
속성
- url : 파일 위치
- get : 전송 시 입력파라미터가 url에 같이 넘어가는 type
- post : 전송 시 입력파라미터가 url로 넘어가지 않는 type
- data : 요청 시 파라미터로 넘어갈 문자열 또는 객체를 작성
- success : 요청이 성공했을 때 실행
- error : 요청이 실패했을때 실행
- complete : 요청의 성공과 실패의 상관없이 실행
예시
더보기
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.7.0.min.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url:"MOCK_DATA.json",
dataType:"json",
success:function(data){
if(data.length>0){
const tb=$("<table/>");
for(let i in data){ // 인덱스 하나씩 꺼내오기
const $id = data[i].id;
const $first_name = data[i].first_name;
const $last_name = data[i].last_name;
const $email = data[i].email;
const $gender = data[i].gender;
const row = $("<tr/>").append(
$("<td/>").text($id),
$("<td/>").text($first_name),
$("<td/>").text($last_name),
$("<td/>").text($email),
$("<td/>").text($gender),
);
tb.append(row);
}
$(".wrap").append(tb);
}
}
})
})
</script>
</head>
<body>
<div class="wrap"></div>
</body>
</html>
async : 비동기 라는 뜻. 기본값이 true다. false로 바꾸면 동기형 방식으로 바뀌어서 순차적으로 정보를 주고 받느라 느려진다.contentType
data
timeout
success