Coding Note

[Ajax] 도서 정보 출력하기 본문

Web/Jsp

[Ajax] 도서 정보 출력하기

jinnkim 2022. 2. 11. 12:30

 

Ajax 예제 풀이하기!

 

예제02

- 도서 정보 출력하기

 

 

구현

 

 

 

 

코드

 

- ajax02.html

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax 테스트02 - 도서 정보 출력하기</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script  type="text/javascript">
        function fn_process() {
            $.ajax({
                type: "post",
                async: false,
                url: "url 작성",        /* 데이터를 XML 형태로 받음 */
                dataType: "xml",
                success: function(info, textStatus) {
                    $(info).find("book").each(function() {
                        var title=$(this).find("title").text();
                        var writer=$(this).find("writer").text();
                        var image=$(this).find("image").text();            
                        /* 전송된 XML 데이터에서 엘리먼트 이름으로 데이터를 가져온다. */
                        
                        $("#bookInfo").append(
                                "<p>"+title+"</p>" +        
                                "<p>"+writer+"</p>"    +
                                "<img src="+image+" />"
                            );
                    });
                },
                error: function(info, textStatus) {
                    alert("에러가 발생했습니다");
                },
                complete: function(info, textStatus) {
                    alert("작업을 완료했습니다.");
                }
                
            });
        }
    </script>
    
</head>
<body>
    <div id="bookInfo">
    <input type="button" value="도서정보 요청" onclick="fn_process()">
    </div>
</body>
</html>
 
cs

 

 

 

- ajaxServlet.java

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
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;
 
@WebServlet("/ajax02")
public class AjaxLab02 extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doHandle(request, response);
    }
 
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doHandle(request, response);
    }
 
    private void doHandle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        
        String result="";
        PrintWriter out= response.getWriter();
        
        //도서정보를 xml로 작성 => 클라이턴트로 전송
        result="<main><book>"+
                "<title><![CDATA[Do it! HTML5 + CSS3 웹 표준의 정석]]></title>"+
                "<writer><![CDATA[- 고경희]]></writer>" +
                "<image><![CDATA[이미지폴더/image1.jpg]]></image>"+
                "</book>"+
                "<book>"+"<title><![CDATA[개발자를 위한 웹 개발 환경 자동화]]></title>"+
                "<writer><![CDATA[- 미테쉬 소니]]></writer>" +
                "<image><![CDATA[http://localhost:8080/chap19_Ajax/image/image2.jpg]]></image>"+
                "</book>"+ 
                "<book>"+"<title><![CDATA[개발자에서 아키텍트로]]></title>"+
                "<writer><![CDATA[- 마이크 킬링]]></writer>" +
                "<image><![CDATA[http://localhost:8080/chap19_Ajax/image/image3.jpg]]></image>"+
                "</book></main>";
        System.out.println(result);
        out.print(result);                //브러우저에 응답 메시지를 보냄
        
    }
 
}
 
cs

 

 

 

< 공부하기 >

 

1. .${}. append()

   - 선택된 요소의 마지막에 새로운 HTML 요소, 콘텐츠를 추가한다.

   - Insert content, specified by the parameter, to the end of each element in the set of matched elements.

 

2. CDATA

   - <![CDATA [Do it! HTML5 + CSS3 웹 표준의 정석]]>

      - CDATA 태그 안에 데이터는 전부 문자열로 처리한다.

      - mybatis에서 부등호 연산은 오류가 나, CDATA로 처리한다.

   

 

'Web > Jsp' 카테고리의 다른 글

[JSON] 예제 - 회원정보 출력하기  (0) 2022.02.14
[JSP] JQuery ajax 공부하기  (0) 2022.02.11
[JSP, DB] DB 연동 - 회원가입_추가하기  (0) 2022.02.08
[JSP, DB] DB 연동 - 회원가입_유효성 검사 및 조회하기  (0) 2022.02.07
[JSP] JDBC 연동 - DB 로그인, 로그아웃하기_2  (0) 2022.02.06
'Web/Jsp' Related Articles more
Comments