오늘이라도
[Web] 24. toggleClass, JSON을 jQuery로 읽기, ajax 통신 본문
반응형
https://github.com/upcake/Class_Examples
교육 중에 작성한 예제들은 깃허브에 올려두고 있습니다.
gif 파일은 클릭해서 보는 것이 정확합니다.
- JSON, ajaxtoggleClass, JSON을 jQuery로 읽기, ajax 통신 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 07</title>
<style type="text/css">
.hidden {
display: none;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
//$("#display").addClass("hidden");
$("#display").toggleClass("hidden");
});
});
</script>
</head>
<body>
<button id="btn">클릭하세요!</button>
<br/><br/>
<div id="display" style="background-color: yellow; width: 200px; height: 100px;">
안녕하세요
</div>
</body>
</html>▲jq07_toggleClass.html
[
{"Num" : 1, "Name" : "홍길동", "Addr" : "서울시 강남구 개포동"},
{"Num" : 2, "Name" : "홍길동", "Addr" : "서울시 강남구 삼성동"},
{"Num" : 3, "Name" : "홍길동", "Addr" : "서울시 강남구 역삼동"},
{"Num" : 4, "Name" : "홍길동", "Addr" : "서울시 강남구 청담동"},
{"Num" : 5, "Name" : "홍길동", "Addr" : "서울시 강남구 대치동"}
]▲member.json
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 08</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$.getJSON("member.json", function(data){
var html = "<table border = '1'>";
html += "<tr><th>Num</th><th>Name</th><th>Addr</th></tr>";
$.each(data, function(key, value){
html += "<tr align = 'center'>";
html += "<td>" + value.Num + "</td>";
html += "<td>" + value.Name + "</td>";
html += "<td>" + value.Addr + "</td>";
html += "</tr>"
}); //each()
html += "</table>";
$("#display").empty();
$("#display").append(html);
}); //getJSON()
}); //click()
}); //ready()
</script>
</head>
<body>
<button id="btn">JSON Data Load (getJSON)</button>
<br /><br />
<div id="display">JSON Data Loading...</div>
</body>
</html>▲jq08_getJSON.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 09</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$.ajax({
dataType: "json",
url: "member.json",
success: function(data){ resultHtml(data); },
error: function(){ alert("로딩 실패!"); }
}); //ajax()
}); //click()
}); //ready()
function resultHtml(data){
var html = "<table border = '1'>";
html += "<tr><th>Num</th><th>Name</th><th>Addr</th></tr>";
$.each(data, function(key, value){
html += "<tr align = 'center'>";
html += "<td>" + value.Num + "</td>";
html += "<td>" + value.Name + "</td>";
html += "<td>" + value.Addr + "</td>";
html += "</tr>"
}); //each()
html += "</table>";
$("#display").empty();
$("#display").append(html);
}
</script>
</head>
<body>
<button id="btn">JSON Data Load (ajax)</button>
<br /><br />
<div id="display">JSON Data Loading...</div>
</body>
</html>▲jq09_ajax.html
driver = oracle.jdbc.driver.OracleDriver
url = jdbc:oracle:thin:@127.0.0.1:1521:XE
username = hanul
password = 0000▲db.properties
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<properties resource="com/hanul/mybatis/db.properties" />
<typeAliases>
<typeAlias type="com.hanul.study.MemberDTO" alias="MemberDTO"/>
</typeAliases>
<environments default="development">
<environment id="development">
<transactionManager type="JDBC" />
<dataSource type="POOLED">
<property name="driver" value="${driver}" />
<property name="url" value="${url}" />
<property name="username" value="${username}" />
<property name="password" value="${password}" />
</dataSource>
</environment>
</environments>
<mappers>
<mapper resource="com/hanul/mybatis/memberMapper.xml" />
</mappers>
</configuration>▲SqlMapConfig.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.hanul.mybatis.memberMapper.xml">
<select id="memberSearchAllJson" resultType = "MemberDTO">
SELECT * FROM member
</select>
</mapper>▲memberMapper.xml
package com.hanul.study;
import java.io.Serializable;
public class MemberDTO implements Serializable {
private String irum;
private String id;
private String pw;
private int age;
private String addr;
private String tel;
public MemberDTO() {}
public MemberDTO(String irum, String id, String pw, int age, String addr, String tel) {
super();
this.irum = irum;
this.id = id;
this.pw = pw;
this.age = age;
this.addr = addr;
this.tel = tel;
}
public String getIrum() {
return irum;
}
public void setIrum(String irum) {
this.irum = irum;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getPw() {
return pw;
}
public void setPw(String pw) {
this.pw = pw;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getAddr() {
return addr;
}
public void setAddr(String addr) {
this.addr = addr;
}
public String getTel() {
return tel;
}
public void setTel(String tel) {
this.tel = tel;
}
}▲MemberDTO.java
package com.hanul.study;
import java.io.InputStream;
import java.util.List;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
public class MemberDAO {
private static SqlSessionFactory sqlMapper;
static {
String resource = "com/hanul/mybatis/SqlMapConfig.xml";
try {
InputStream inputStream = Resources.getResourceAsStream(resource);
sqlMapper = new SqlSessionFactoryBuilder().build(inputStream);
} catch (Exception e) {
e.printStackTrace();
System.out.println("SqlSessionFactory Exception!!!");
}
} //static
//전체 회원 목록 조회 후 JSON 생성 ①
public String memberSearchAllJson1() {
SqlSession session = sqlMapper.openSession();
List<MemberDTO> list = null;
list = session.selectList("memberSearchAllJson");
session.close();
JSONArray array = new JSONArray();
JSONObject object = null;
for (MemberDTO dto : list) {
object = new JSONObject();
object.put("member", dto);
array.add(object);
}
String json = array.toString();
return json;
} //memberSearchAllJson()
//전체 회원 목록 조회 후 JSON 생성 ②
public String memberSearchAllJson2() {
SqlSession session = sqlMapper.openSession();
List<MemberDTO> list = null;
list = session.selectList("memberSearchAllJson");
session.close();
JSONArray array = JSONArray.fromObject(list);
String json = array.toString();
return json;
} //memberSearchAllJson()
} //class▲MemberDAO.java
<%@page import="com.hanul.study.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
MemberDAO dao = new MemberDAO();
String json = dao.memberSearchAllJson1();
%>
<%=json %>
▲memberList1.jsp
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 10</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function() {
$.ajax({
dataType : "json",
url : "memberList1.jsp",
//ajax 통신용의 jsp파일의 html부분은 무조건 삭제한다. (충돌 방지)
success : function(data){ resultHtml(data); },
error : function() { alert("로딩 실패!"); }
}); //ajax()
}); //click()
}); //ready()
function resultHtml(data){
var html = "<table border = '1'>";
html += "<tr>";
html += "<th>이름</th>";
html += "<th>아이디</th>";
html += "<th>비밀번호</th>";
html += "<th>나이</th>";
html += "<th>주소</th>";
html += "<th>전화번호</th>";
html += "</tr>";
$.each(data, function(key, value){
html += "<tr align='center'>";
html += "<td>" + value.member.irum + "</td>";
html += "<td>" + value.member.id + "</td>";
html += "<td>" + value.member.pw + "</td>";
html += "<td>" + value.member.age + "</td>";
html += "<td>" + value.member.addr + "</td>";
html += "<td>" + value.member.tel + "</td>";
html += "</tr>";
});
html += "</table>";
$("#display").empty();
$("#display").append(html);
}
</script>
</head>
<body>
<button id="btn">회원 목록 가져오기</button>
<br /><br />
<div id="display">
여기에 회원 목록이 출력됩니다.
</div>
</body>
</html>▲jq10_ajax2.html
<%@page import="com.hanul.study.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
MemberDAO dao = new MemberDAO();
String json = dao.memberSearchAllJson2();
%>
<%=json %>
▲memberList2.jsp
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 11</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function() {
$.ajax({
dataType : "json",
url : "memberList2.jsp",
//ajax 통신용의 jsp파일의 html부분은 무조건 삭제한다. (충돌 방지)
success : function(data){ resultHtml(data); },
error : function() { alert("로딩 실패!"); }
}); //ajax()
}); //click()
}); //ready()
function resultHtml(data){
var html = "<table border = '1'>";
html += "<tr>";
html += "<th>이름</th>";
html += "<th>아이디</th>";
html += "<th>비밀번호</th>";
html += "<th>나이</th>";
html += "<th>주소</th>";
html += "<th>전화번호</th>";
html += "</tr>";
$.each(data, function(key, value){
html += "<tr align='center'>";
html += "<td>" + value.irum + "</td>";
html += "<td>" + value.id + "</td>";
html += "<td>" + value.pw + "</td>";
html += "<td>" + value.age + "</td>";
html += "<td>" + value.addr + "</td>";
html += "<td>" + value.tel + "</td>";
html += "</tr>";
});
html += "</table>";
$("#display").empty();
$("#display").append(html);
}
</script>
</head>
<body>
<button id="btn">회원 목록 가져오기</button>
<br /><br />
<div id="display">
여기에 회원 목록이 출력됩니다.
</div>
</body>
</html>▲jq11_ajax3.html
반응형
'취업성공패키지 SW 개발자 교육 > Web' 카테고리의 다른 글
| [Web] 26. 회원 관리 & 게시판 만들기 ① : 웹 프로젝트 생성 및 페이지 작성 전 환경 준비 (3) | 2020.06.15 |
|---|---|
| [Web] 25. ajax 통신을 이용한 json 출력 / xml 출력 / jsp 접근 (0) | 2020.06.11 |
| [Web] 23. jQuery : 라이브러리 설정, 테이블 작성, 구구단, 선택자 (0) | 2020.06.09 |
| [MyBatis] 22. 쇼핑몰 화면 작성, 장바구니 구현, 로그인 세션 구현 (0) | 2020.06.08 |
| [MyBatis] 21. 게시판 만들기 ④ : 검색 기능 추가 (0) | 2020.06.05 |
'취업성공패키지 SW 개발자 교육/Web' Related Articles
more
