주요내용 : 세션, 쿠키, jQuery, json
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID 선택자 연습1</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ // jQuery의 시작점. 외워야함(약어 version : $(function(){}))
alert($("#unique2").html()); // id 명으로 tag를 검색해서 해당내용을 리턴. #은 id선택자
// page로드시 id가 unique2인 태그를 검색한 후 html()메소드를 이용해 태그의 값을 가져옴.
});
</script>
</head>
<body>
<div class="class1">안녕하세요.</div>
<div id="unique2">제이쿼리입니다!</div>
<div id="unique3">
<p>제이쿼리는 아주 쉽습니다!!!</p>
</div>
</body>
</html>
-----------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID 선택자 연습2</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function addHtml(){
$("#article").html('안녕하세요' + '<br>'); // id명으로 tag를 검색해서 해당내용을 등록
}
</script>
</head>
<body>
<div>
<p id="article"></p>
</div>
<input type="button" value="추가하기" onClick="addHtml()"/>
</body>
</html>
-----------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID 선택자 연습5</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function fn_process(){
var value=$("#t_input").val(); // html : tag 내에 textNode를 가져오거나 변경
// 제이쿼리에서 id로 텍스트 박스에 접근하여 val()메소드를 이용해서 입력값을 가져옴.
$("#t_output").val(value); // val : formtag 내에 textNode를 가져오거나 변경
// 제이쿼리에서 id로 텍스트 박스에 접근하여 val()메소드를 이용해서 값을 출력함.
}
</script>
</head>
<body>
<input type="text" id="t_input" />
<input type="button" value="입력하기" onClick="fn_process()" /><br><br>
<div>
결과 : <br>
<input type="text" id="t_output" disabled /> <!-- output에 결과가 찍힘 -->
</div>
</body>
</html>
-----------------------------------------
package sec01.ex01;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class AjaxTest1
*/
@WebServlet("/ajaxTest1")
public class AjaxTest1 extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doHandler(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doHandler(request, response);
}
private void doHandler(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
String param = (String) request.getParameter("param");
System.out.println("param = " + param);
PrintWriter writer = response.getWriter();
writer.print("안녕하세요! 서버입니다.");
}
}
-----------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax 연습1</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function fn_process(){
$.ajax({
type:"get", //get방식으로 전송
dataType:"text", // 응답데이터를 텍스트로 지정
async:false, // false인 경우 동기식으로 처리
url:"http://localhost:8090/pro15/ajaxTest1", // 전송할 서블릿을 지정
data: {param:"Hello,jquery"}, // 서버로 매개변수와 값을 설정
// 전송과 응답이 성공했을 경우의 작업을 설정
success:function (data,textStatus){
$('#message').append(data); // 서버 응답 메세지를 div 엘리먼트에 표시
},
// 작업 중 오류가 발생했을 경우에 수행할 작업을 설정
error:function(data,textStatus){
alert("에러가 발생했습니다.");
},
// 완료시 수행할 작업을 설정.
complete:function(data,textStatus){
alert("작업을 완료했습니다");
}
});
}
</script>
</head>
<body>
<input type="button" value="전송하기" onClick="fn_process()" /><br><br>
<div id="message"></div>
</body>
</html>
-----------------------------------------
package sec02.ex01;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class MemberServlet
*/
@WebServlet("/mem")
public class MemberServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doHandle(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doHandle(request, response);
}
protected void doHandle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
PrintWriter writer = response.getWriter();
String id = (String)request.getParameter("id");
System.out.println("id = " + id);
MemberDAO memberDAO = new MemberDAO();
boolean overlappedId = memberDAO.overlappedID(id); // id중복 여부 체크
// 결과를 메세지로 전송.
if(overlappedId == true) {
writer.print("not_usable");
} else {
writer.print("usable");
}
}
}
-----------------------------------------
package sec02.ex01;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.sql.DataSource;
public class MemberDAO {
private Connection con;
private PreparedStatement pstmt; // 실무에선 PreparedStatement를 더 많이씀.
private DataSource dataFactory;
public MemberDAO()
{
try
{
Context ctx = new InitialContext();
Context envContext = (Context)ctx.lookup("java:/comp/env");
dataFactory = (DataSource)envContext.lookup("jdbc/oracle");
} catch (Exception e)
{
e.printStackTrace();
}
}
public boolean overlappedID(String id)
{
boolean result = false;
try
{
con = dataFactory.getConnection();
// 오라클의 decode 함수를 이용해 id가 존재하면 true, 존재하지 않으면 false를 문자열로 조회.
String query = "select decode(count(*),1,'true','false') as result from t_member";
query += " where id=?";
System.out.println("prepareStatement: " + query);
pstmt = con.prepareStatement(query);
pstmt.setString(1, id);
ResultSet rs = pstmt.executeQuery();
rs.next();
// 문자열을 boolean 자료형으로 변환.
result = Boolean.parseBoolean(rs.getString("result"));
pstmt.close();
} catch(Exception e)
{
e.printStackTrace();
}
return result;
}
}
-----------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아이디 중복 체크</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
function fn_process(){
var _id=$("#t_id").val(); // 텍스트 박스에 입력한 id를 가져옴.
if(_id==''){
alert("ID를 입력하세요"); // id를 입력하지 않으면 오류 메세지를 출력.
return;
}
$.ajax({
type:"post",
async:false,
url:"http://localhost:8090/pro15/mem",
dataType:"text",
data: {id:_id}, // id를 서블릿으로 전송.
success:function (data,textStatus){
if(data=='usable'){
$('#message').text("사용할 수 있는 ID입니다.");
$('#btnDuplicate').prop("disabled", true); // 사용할 수 있는 id면 버튼을 비활성화시킴.
}else{
$('#message').text("사용할 수 없는 ID입니다.");
}
},
error:function(data,textStatus){
alert("에러가 발생했습니다.");
},
complete:function(data,textStatus){
//alert("작업을완료 했습니다");
}
}); //end ajax
}
</script>
</head>
<body>
<input type="text" id="t_id"/>
<input type="button" id="btn_duplicate" value="ID 중복체크하기" onClick="fn_process()" /><br><br>
<div id="message"></div> // 결과를 표시
</body>
</html>
-----------------------------------------
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON 테스트</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function (){
$("#checkJson").click(function(){
var jsonStr = '{"name":"박지성","age":25,"gender":"남자","nickname":"날쌘돌이"}';
var jsonObj = JSON.parse(jsonStr); // parse 메소드로 JSON 데이터를 가져옴.
var output = "회원정보<br>";
output += "======<br>";
// 문자열에서 JSON 객체의 속성을 가져옴.
output += "이름 : " + jsonObj.name + "<br>";
output += "나이 : " + jsonObj.age + "<br>";
output += "이름 : " + jsonObj.gender + "<br>";
output += "이름 : " + jsonObj.nickname + "<br>";
$("#output").html(output);
});
});
</script>
</head>
<body>
<a id="checkJson" style="cursor:pointer">출력</a><br><br>
<div id="output"></div>
</body>
</html>
-----------------------------------------
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON 테스트2</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function (){
$("#checkJson").click(function(){
// members 배열에 회원정보를 객체의 name/value 쌍으로 저장
var jsonStr = '{"members":[{"name":"박지성","age":25,"gender":"남자","nickname":"날쌘돌이"}' + ',{"name":"손흥민","age":"30","gender":"남자","nickname":"탱크"}]}';
var jsonInfo = JSON.parse(jsonStr);
var output = "회원정보<br>";
output += "======<br>";
for(var i in jsonInfo.members){
// 각 배열 요소에 접근하여 객체의 name으로 value를 출력.
output += "이름 : " + jsonInfo.members[i].name + "<br>";
output += "나이 : " + jsonInfo.members[i].age + "<br>";
output += "이름 : " + jsonInfo.members[i].gender + "<br>";
output += "이름 : " + jsonInfo.members[i].nickname + "<br><br><br>";
}
$("#output").html(output);
});
});
</script>
</head>
<body>
<a id="checkJson" style="cursor:pointer">출력</a><br><br>
<div id="output"></div>
</body>
</html>
-----------------------------------------
package sec03.ex01;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.simple.JSONArray;
import org.json.simple.JSONObject;
/**
* Servlet implementation class JsonServlet3
*/
@WebServlet("/json3")
public class JsonServlet3 extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doHandle(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doHandle(request, response);
}
protected void doHandle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
PrintWriter writer = response.getWriter();
JSONObject totalObject = new JSONObject(); // 배열을 최종적으로 저장할 JSONObject 객체를 생성
JSONArray membersArray = new JSONArray();
JSONObject memberInfo = new JSONObject();
memberInfo.put("name", "박지성");
memberInfo.put("age", "25");
memberInfo.put("gender", "남자");
memberInfo.put("nickname", "두개의 심장");
membersArray.add(memberInfo);
memberInfo = new JSONObject();
memberInfo.put("name", "김연아");
memberInfo.put("age", "21");
memberInfo.put("gender", "여자");
memberInfo.put("nickname", "KB손해보험");
membersArray.add(memberInfo);
totalObject.put("members", membersArray); // 회원 정보를 저장한 배열을 배열 이름 members로 totalObject에 저장
JSONArray bookArray = new JSONArray(); // JSONArray 객체를 생성.
JSONObject bookInfo = new JSONObject();
// JSONArray 객체를 생성한 후 책정보를 저장.
bookInfo.put("title", "초보자를 위한 자바 프로그래밍");
bookInfo.put("writer", "이병승");
bookInfo.put("price", "30000");
bookInfo.put("gerne", "IT");
bookInfo.put("image", "http://localhost:8090/pro15/image/image1.jpg");
bookArray.add(bookInfo); // bookArray에 객체를 저장.
bookInfo = new JSONObject();
bookInfo.put("title", "모두의 파이썬");
bookInfo.put("writer", "이승찬");
bookInfo.put("price", "12000");
bookInfo.put("gerne", "IT");
bookInfo.put("image", "http://localhost:8090/pro15/image/image1.jpg");
bookArray.add(bookInfo);
totalObject.put("books", bookArray); // 도서 정보를 저장한 배열을 배열이름 books로 totalObject에 저장.
String jsonInfo = totalObject.toJSONString(); // String 포맷으로 데이터를 바꿔줌.
System.out.println(jsonInfo);
writer.print(jsonInfo);
}
}
-----------------------------------------
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON 테스트3</title>
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
<script>
$(function (){
$("#checkJson").click(function(){
$.ajax({
type: "post",
async:false,
url:"${contextPath}/json3",
success: function (data, textStatus){
var jsonInfo = JSON.parse(data);
var memberInfo = "회원정보<br>";
memberInfo += "======<br>"
for(var i in jsonInfo.members){ // 배열이름 members로 회원 정보를 출력.
memberInfo += "이름 : " + jsonInfo.members[i].name + "<br>";
memberInfo += "나이 : " + jsonInfo.members[i].age + "<br>";
memberInfo += "성별 : " + jsonInfo.members[i].gender + "<br>";
memberInfo += "별명 : " + jsonInfo.members[i].nickname + "<br>";
}
var booksInfo = "<br><br><br>도서 정보";
booksInfo += "==========<br>";
for(var i in jsonInfo.books){
console.log("ddd"); // 크롬 개발자도구에 결과값 찍히게 하는 방법 ★★★★★
memberInfo += "제목 : " + jsonInfo.books[i].title + "<br>";
memberInfo += "저자 : " + jsonInfo.books[i].writer + "<br>";
memberInfo += "가격 : " + jsonInfo.books[i].price + "<br>";
memberInfo += "장르: " + jsonInfo.books[i].genre + "<br>";
// 이미지 URL을 구해 <img> 태그의 src속성에 설정.
imageURL = jsonInfo.books[i].image;
booksInfo += "<img src=" + imageURL + "/>" +"<br><br><br>";
}
$("#output").html(memberInfo + "<br>" + booksInfo);
},
error: function(data, textStatus){
alert("에러가 발생했습니다.");
}
});
});
});
</script>
</head>
<body>
<a id="checkJson" style="cursor:pointer">데이터 수신하기</a><br><br>
<div id="output"></div>
</body>
</html>
