제이쿼리로 구현한 자바 스크립트의 AJAX에 대해 알아보자 ...??
사실 오늘 배운 걸 어떻게 표현해야 할 지 모르겠다.
학습목표
|
1. AJAX을 작성할 수 있다. 2. 불러오는 단계를 주의하자 jqex5.js (밑에 5 개를 부름) jqex5.html jqex5_json1.json jqex5_json2.jsp jqex5_xml1.xml. (제이쿼리) jqex5_xml2.jsp |
<코드 1 : jqex5Ajax.js>
메인 출력창
* JS폴더를 따로 만들어 jqex5.js를 끌어오는 과정이 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery로 ajax</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../JS/jqex5.js"></script>
</head>
<body>
<h2>* Jquery로 ajax * </h2>
<div>
<ul>
<li id = "test1">HTML 읽기</li>
<li id = "test2">JSON 읽기1</li>
<li id = "test3">JSON 읽기2</li>
<li id = "test4">XML 읽기1</li>
<li id = "test5">XML 읽기2</li>
</ul>
</div>
결과 : <div id = "disp"></div>
</body>
</html>
<코드 2 : jqex5.js>
메인 출력창을 위한 데이터 센터??,,,,,,
* $("#disp").empty(); 는 클릭할때마다 출력한 화면을 초기화시킨다.
$(document).ready(function(){
//alert("jqex5.js 연결 성공");
//1. html 등의 text 파일 읽기
$("#test1").click(function(){
$("#disp").empty();
$("#disp").load("jqex5.html");
});
$("#test2").click(function(){
$("#disp").empty();
$.getJSON("jqex5_json1.json", function(data){
//alert(data);
$.each(data, function(kindex, value){
//alert(kindex + " " + value);
var str = "<ol>";
str += "<li>" + value["title"] + "</li>";
str += "<li>" + value["desc"] + "</li>";
str += "<li>" + value["author"] + "</li>";
str += "</ol>";
$("#disp").append(str);
});
});
});
$("#test3").click(function(){
$("#disp").empty();
$.getJSON("jqex5_json2.jsp", function(data){
//alert(data);
$.each(data, function(kindex, value){
//alert(kindex + " " + value);
var str = "<ol>";
str += "<li>" + value["code"] + "</li>";
str += "<li>" + value["sang"] + "</li>";
str += "<li>" + value["su"] + "</li>";
str += "<li>" + value["dan"] + "</li>";
str += "</ol>";
$("#disp").append(str);
});
});
});
$("#test4").click(function(){
$("#disp").empty();
$.get("jqex5_xml1.xml", function(data){
//alert($(data).find("aa").size()); //=3
$(data).find("aa").each(function(){
var fdata = $(this); // 현재 읽힌 aa
var str = "<div>";
str += fdata.attr("part")+ " " +fdata.attr("term") ;
//attr 매소드, 속성값 읽기
str += fdata.find("desc").text();
// Element 찾기, 요소값 읽기
str += "</div>";
$("#disp").append(str);
});
});
});
$("#test5").click(function(){
$("#disp").empty();
$.post("jqex5_xml2.jsp", function(data){
// post로 해보자
$(data).find("sangpum").each(function(){
var sangpum = $(this);
var str = "<div>";
str += sangpum.find("code").text() + " ";
str += sangpum.find("sang").text() + " ";
str += sangpum.find("su").text() + " ";
str += sangpum.find("dan").text() + " ";
// Element 찾기, 요소값 읽기
str += "</div>";
$("#disp").append(str);
});
});
});
});
<코드 3 : jqex5.html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
html 문서
</body>
</html>
<코드 4 : jqex5_json1.json>
[
{"title":"자바 이해", "desc":"자바 기초 다지기 설명","author":"홍길동" },
{"title":"파이썬 이해", "desc":"파이썬 설명","author":"사오정" }
]
<코드 5 : jqex5_json2.jsp>
<%@ page language="java" contentType="text/plain; charset=UTF-8"
pageEncoding="UTF-8"
import="java.sql.*"
%>
[
<%
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
String result = "";
try{
Class.forName("org.mariadb.jdbc.Driver");
conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "123");
pstmt = conn.prepareStatement("select * from sangdata");
rs = pstmt.executeQuery();
while(rs.next()){
result += "{";
result += "\"code\":" + "\""+ rs.getString("code") + "\",";
result += "\"sang\":" + "\""+ rs.getString("sang") + "\",";
result += "\"su\":" + "\""+ rs.getString("su") + "\",";
result += "\"dan\":" + "\""+ rs.getString("dan") + "\"";
result += "},";
}
if(result.length() > 0){
result = result.substring(0, result.length() - 1);
} //마지막 comma(,) 제거
out.print(result);
}catch (Exception e){
System.out.println("err : " + e);
}finally{
try{
if(rs != null) rs.close();
if(pstmt != null) pstmt.close();
if(conn != null) conn.close();
}catch (Exception e){
}
}
%>
]
<코드 6 : jqex5_xml1.xml (제이쿼리)>
<?xml version="1.0" encoding="UTF-8"?>
<abc>
<aa term="kbs" part="1">
<desc>공영방송</desc>
</aa>
<aa term="mbc" part="2">
<desc>문화방송</desc>
</aa>
<aa term="sbs" part="3">
<desc>서울방송</desc>
</aa>
</abc> 
<코드 7 : jqex5_xml2.jsp>
<?xml version="1.0" encoding="UTF-8"?>
<%@ page language="java" contentType="text/xml; charset=UTF-8"
pageEncoding="UTF-8"
import="java.sql.*"
%>
<sangpums>
<%
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
try{
Class.forName("org.mariadb.jdbc.Driver");
conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "123");
pstmt = conn.prepareStatement("select * from sangdata");
rs = pstmt.executeQuery();
while(rs.next()){
%>
<sangpum>
<code><%=rs.getString("code")%></code>
<sang><%=rs.getString("sang")%></sang>
<su><%=rs.getString("su")%></su>
<dan><%=rs.getString("dan")%></dan>
</sangpum>
<%
}
}catch (Exception e){
System.out.println("err : " + e);
}finally{
try{
if(rs !=null) rs.close();
if(pstmt !=null) pstmt.close();
if(conn !=null) conn.close();
}catch(Exception e){
}
}
%>
</sangpums>
결과화면
(코드가 길어서 각 코드 밑에 업로드했습니다.)
'[2020]KIC 캠퍼스 복습 > JAVA SCRIPT(5,6,7)' 카테고리의 다른 글
| [수업 D-27 ] JS)AJAX, SERVLET (0) | 2020.08.19 |
|---|---|
| [수업 D-26 ] JS) AJAX, JSON //JQUERY (0) | 2020.08.18 |
| [수업 D-25 ] JS)DOM, AJAX (0) | 2020.08.18 |
| [코드리뷰] JS) 웹으로 계산기 만들기 (0) | 2020.08.13 |
| [수업 D-24 ] JS) 정규표현식, 객체생성, DOM (0) | 2020.08.13 |
