- $.ajax()는 jQuery에서 제공하는 AJAX 요청
json으로 보낼 때 application/json하는거(클라 -> 서버)
1)json으로 바꿔서 보내도 되고
2)그냥 보내도 되는듯
- 실제연습해보기(실행안되면 live server써야한다)
- JSON으로 해보기
1)객체 하나만
2)배열로 가져오기
- dataType : text(파싱필요) / json(파싱안해도 된다)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.7.0.js"></script>
</head>
<body>
<button onclick="getData()">click</button>
<hr>
<div id="demo">여기에 데이터가 표시된다</div>
<script>
function getData() {
$.ajax({
url : "thrid.txt",
type : "get",
dataType : "text",
success : function(rep) { //this.responseText랑 같은 역할
let getData = JSON.parse(rep);
$("#demo").html("id:"+getData.id + "<br>pw:" +getData.pw +"<br>tel:" +getData.tel +"<br>name:"+getData.name);
}
});
}
</script>
<hr>
<br><br>
<button onclick="getJson()">click</button>
<hr>
<div id="demo2">여기에 데이터가 표시된다</div>
<script>
function getJson() {
$.ajax({
url : "thirdjsonarray.txt",
type : "get",
dataType : "text",
success : function(response) {
let getData = JSON.parse(response);
let together =
"<table border='1'>"+
"<tr>"+
"<th>아이디</th>"+
"<th>비번</th>"+
"<th>전번</th>"+
"<th>이름</th>"+
"</tr>";
for(let i = 0; i<getData.length; i++) {
together +=
"<tr>"+
"<td>"+getData[i].id+"</td>"+
"<td>"+getData[i].pw+"</td>"+
"<td>"+getData[i].tel+"</td>"+
"<td>"+getData[i].name+"</td>"+
"</tr>";
// "id:"+getData[i].id + "<br>pw:" +getData[i].pw +"<br>tel:" +getData[i].tel +"<br>name:"+getData[i].name+"<hr>";
}
together += "</table>";
$("#demo2").html(together);
}
})
}
</script>
</body>
</html>{"id" :"짱구1234","pw" :"1234","tel" :"010-1111-1111","name" :"짱구"}[
{"id" :"짱구1234","pw" :"1234","tel" :"010-1111-1111","name" :"짱구"},
{"id" :"흰둥이1234","pw" :"1234","tel" :"010-2222-2222","name" :"흰둥이"},
{"id" :"짱아1234","pw" :"1234","tel" :"010-3333-3333","name" :"짱이"}
]3)배열 append로 가져오기
-->append쓰면 누를떄마다 추가돼서 처음에 비워주는것 empty를 쓰자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.7.0.js"></script>
</head>
<body>
<button onclick="getData()">click</button>
<hr>
<div id="demo">여기에 데이터가 표시된다</div>
<script>
function getData() {
$.ajax({
url : "thrid.txt",
type : "get",
dataType : "text",
success : function(rep) { //this.responseText랑 같은 역할
let getData = JSON.parse(rep);
$("#demo").html("id:"+getData.id + "<br>pw:" +getData.pw +"<br>tel:" +getData.tel +"<br>name:"+getData.name);
}
});
}
</script>
<hr>
<br><br>
<button onclick="getJson()">click</button>
<hr>
<div id="demo2">여기에 데이터가 표시된다</div>
<script>
function getJson() {
$.ajax({
url : "thirdjsonarray.txt",
type : "get",
dataType : "text",
success : function(response) {
$("tbody").empty(); //append쓰면 계속 추가되니까 비워주는 것
let getData = JSON.parse(response);
$("tbody").append(
"<tr>"+
"<th>아이디</th>"+
"<th>비번</th>"+
"<th>전번</th>"+
"<th>이름</th>"+
"</tr>"
)
for(let i = 0; i<getData.length; i++) {
$("tbody").append(
"<tr>"+
"<td>"+getData[i].id+"</td>"+
"<td>"+getData[i].pw+"</td>"+
"<td>"+getData[i].tel+"</td>"+
"<td>"+getData[i].name+"</td>"+
"</tr>"
)}
// let together =
// "<table border='1'>"+
// "<tr>"+
// "<th>아이디</th>"+
// "<th>비번</th>"+
// "<th>전번</th>"+
// "<th>이름</th>"+
// "</tr>";
// for(let i = 0; i<getData.length; i++) {
// together +=
// "<tr>"+
// "<td>"+getData[i].id+"</td>"+
// "<td>"+getData[i].pw+"</td>"+
// "<td>"+getData[i].tel+"</td>"+
// "<td>"+getData[i].name+"</td>"+
// "</tr>";
// // "id:"+getData[i].id + "<br>pw:" +getData[i].pw +"<br>tel:" +getData[i].tel +"<br>name:"+getData[i].name+"<hr>";
// }
// together += "</table>";
// $("#demo2").html(together);
}
});
}
</script>
</body>
<table border="1">
<tbody>
</tbody>
</table>
</html>
