728x90
반응형
배열 (2차원 배열 형태) => JSON 타입
var arr =
[
{name:"학생1",addr:"부산"},
{name:"학생2",addr:"울산"},
{name:"학생3",addr:"서울"},
{name:"학생4",addr:"제주"},
{name:"학생5",addr:"강원"}
];
for(var i=0;i<arr.length;i++){
$('table').append("<tr><td>"+arr[0].name+"</td><td>"+arr[i].addr+"</td></tr>");
}
$('table').append("<tr><td>"+arr[0].name+"</td><td>"+arr[0].addr+"</td></tr>");<table border="1">
<tr>
<td>이름</td>
<td>주소</td>
</tr>
</table>
< 실행값 >
arr, addr 값을 각 각 꺼내서 반복문을 통해 풀어 준 모습
< 배열 문법 >
each()
$(요소).each(function(){});
$.each(요소,function(){});
배열의 값을 테이블에 추가
$(arr).each(function(idx,item){
console.log(item); //배열의 객체값
$('table').append();
$('table').append("<tr><td>"+item.name+"</td><td>"+item.addr+"</td></tr>");
});
AJAX란?
비동기 자바스크립트와 XML (Asynchronous JavaScript And XML) 을 말합니다.
| 동기화 < > 비동기화 | |
| 동기 | 서버의 데이터와 클라이언트의 데이터를 동일하게 만드는 작업 (화면 전환 O) |
| 비동기 | 서버의 데이터와 클라이언트의 데이터를 동일하게 만드는 작업 (화면 전환 X) |
뉴스 실행시키기
https://news.jtbc.co.kr/Etc/RssService.aspx
JTBC 뉴스
news.jtbc.co.kr
RSS 주소 복붙
<script src="jquery-3.6.1.js"></script>
<script type="text/javascript">
$(function(){
// $('input').click(function(){
// //비동기방식 처리
// //$.ajax("test.jsp"); //test.jsp 실행시키고 와라
// $.ajax({
// url:"test.jsp",
// data: {name:"홍길동",tel:"010-1234-1234"} ,
// success:function(data){
// //alert('ajax 성공!');
// //alert(data);
// $('body').append(data);
// },
// error:function(){
// alert('ajax 실패');
// },
// complete:function(){
// alert('ajax 끗');
// }
// });
// });
$('#btnNews').click(function(){
alert("뉴스 정보 가져오기");
$.ajax({
url:"https://fs.jtbc.co.kr//RSS/morningand.xml",
success:function(data){
alert("성공");
console.log(data);
//뉴스 누르면 이동하게 하기
$(data).find('item').each(function(){
$('body').append("<a href='"+$(this).find('link').text()+"'>"+$(this).find('title').text()+"<hr>");
})
}
});
});
}); //jquery
</script> <h1>test5.jsp</h1>
<input type="button" value="정보불러오기" >
<input type="button" id="btnNews" value="뉴스 정보 불러오기" >
JSON 란?
=> 자바스크립트로 객체를 표현하는 방법
XML,CSV,JSON (개방형 표준 데이터 포맷)
- 단순 텍스트 형태 이름:값 (직관적)
- 불필요한 태그 없음 => 데이터의 크기가 적음
- 특정 언어에 독리벚ㄱ이다. 규칙을 지켜야함(엄격함)
- JSON 파서는 브라우저에 포함
| { } | JSON 객체 |
| [ ] | JSON 배열 |
| "이름": 값 : 데이터 | |
| 정수값 (2/8/16진수 x , 안씀!) | |
| 실수값 | |
| boolean | |
| null | |
| 문자열 ("") | |
| 배열, 객체 | |
test6.jsp
<script src="jquery-3.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/*
$.ajax({
url:"test.json",
dataType: "json",
success:function(data){
alert("성공");
console.log(data);
$('body').append(data.name);
$('body').append(data.addr);
$('body').append(data.tel);
}
}); */
$.getJSON("test.json",function(data){
console.log(data);
$(data).each(function(idx,item){
$('table').append("<tr> <td>"+item.name+"</td> <td>"+item.addr+"</td> <td>"+item.tel+"</td> </tr>");
});
});
});
</script>
</head>
<body>
<h1>test6.jsp</h1>
<table border="1">
<tr>
<td>이름</td>
<td>주소</td>
<td>전화번호</td>
</tr>
</table>
test.json
[
{ "name":"홍길동","addr":"부산","tel":"010-1234-1234" },
{ "name":"홍길동1","addr":"부산","tel":"010-1234-1234" },
{ "name":"홍길동2","addr":"부산","tel":"010-1234-1234" },
{ "name":"홍길동3","addr":"부산","tel":"010-1234-1234" },
{ "name":"홍길동4","addr":"부산","tel":"010-1234-1234" },
{ "name":"홍길동5","addr":"부산","tel":"010-1234-1234" }
]
< 실행 >
728x90
반응형
'FrontEnd > JavaScript' 카테고리의 다른 글
| 1108 jQuery - jQuery의 기초 (0) | 2022.11.08 |
|---|---|
| 0916 JavaScript - jQuery, Ajax - DB연결 (2) | 2022.09.16 |
| 0908 JavaScript - JQuery (0) | 2022.09.08 |
| 0901 JavaScript - 내장 객체 (2) (2) | 2022.09.01 |
| 0825 JavaScript - 내장 객체, Location (0) | 2022.08.25 |
