.serialize() - jQuery API : http://api.jquery.com/serialize/

$('form').submit(function() {
  alert($(this).serialize());
  return false;
});

오늘 jQuery를 가지고 스크립트를 작성하다가 jQuery를 이용해서 form 객체를 호출해서 jquery.submit() 메서드를 실행했는데 안먹히는 거다. 왜 그런거지!? 하면서 끙끙거리면서 고민하다가 옆에 계신 실장님께 도움을 요청하여 왜그런지 분석하다가 jQuery Document에 있는 걸 그대로 따라한 소스를 보시고서는

이건 센스가 없는거에요. 이 코드가 작동되는 것이 맞지만, 굳이 이렇게 할 필요가 있을까요?
이렇게 하면 될텐데?

라고 하시며 조언을 해주시는데...

document.forms['form'].submit();

이건 된다.

$('#form').submit();

이건 안된다.

$('#form').get(0).submit();

이건 된다. 단, 이렇게 get(0)으로 꺼내게 될 경우에는 jQuery에서 다루는 객체가 아니라 실제 form 객체이기 때문에 submit() 메서드는 jquery에서 다루기가 어려워진다. 즉, 복잡시러워지는거다. 문득 생각난건데.

$($('#form').get(0)).submit(function() {

});

요렇게하면 쓸 수 있지 않을까란 잡생각도 잠시 해봤다.

가만히 보고 있으니, 굳이 form.submit()을 실행하는 이벤트를 가로채서 ajax처리할 필요가 없었다.

var serializeObject = $form.serialize();

로 form에 있는 정보를 문자열로 직렬화해서 ajax로 넘기면 되는 거였다. 흠.


사실 그 앞에서 jQuery를 이용해서 동적으로  document.body에다가 form을 생성하고 거기에 appen로 붙이면서 form객체를 만들고 있었다. 이렇게 만들어진 form 객체를 jQuery를 이용해서 다루려고 했던 것인데, 이 부분에서 내가 생각했던 의도와는 다르게(원래 그렇게 되는 게 맞는 것이었겠지) 동작하고 있었던 것이다. 오류메시지도 나타나질 않으니 당황스러웠기도 하고 황망했다.


난 (개발) 센스가 부족하다. ㅠㅅ-)

센스만점이 되는 그날까지 부지런히 노력하자.




오늘의 교훈 : 난 브라우저(클라이언트)에서 다루는 객체의 계층구조나 동작원리를 제대로 이해하지 못하고 있다는 것이다. 그저 jQuery를 이용해서 다루는 정도가 아니라, 충분히 머리 속에서 동작원리를 이해하고 상상해볼 수 있는 수준까지 도달하기 위한 노력을 잊지 말자.

metho='post' 를 코딩하ㅣ 않았을 때, 디폴트는 HTTP GET이다. 따라서 브라우저는 파라미터 정보를 몸체가 아니라 헤더에 보낸다는 것이다.

요청이 GET으로 들어온다는 것은 서블릿에 doGet()이 있어야 한다는 말인데, 폼 처리에 대해서 대부분 doPost()만 만들어놓기 때문에

문제가 발생한다.

 

서블릿에서 doGet()과 doPost() 둘 다 지원하려면?

둘다 지원해야하는 경우, 보통 데이터를 수정하는 것이 아니라

doGet()을 구현하고 doPost()는 요청을 doGet()으로 넘기는 방식으로 구현한다.

  1. public void doPost() throws ... {
  2. doGet(request, response);

  3. }

이 글은 스프링노트에서 작성되었습니다.

Contact.java

  1. import java.io.*;
    import javax.servlet.*;
    import javax.servlet.http.*;

    public class Contact extends HttpServlet {

        public void doGet(HttpServletRequest req, HttpServletResponse res){
            try {
                res.setContentType("text/html; charset=KSC5601");
                PrintWriter out  = res.getWriter();
                req.setCharacterEncoding("KSC5601");
                String number = req.getParameter("number");
                String name = req.getParameter("name");
                String address = req.getParameter("address");
                out.println("<html>");
                out.println("<head><title>Contact 서블릿 실행하기</title></head>");
                out.println("<body><h3> " +number + " 번 당신!!<h3><br>");
                out.println("이름은 " + name + " 이고!!!");
                out.println("사는 곳은 " + address + " 가 맞지!?");
                out.println("조사하면 다나와~~ ㅡㅅ-)ㅋ");
                out.println("</body>");
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

어제 작성했던 doPost()를 doGet() 방식으로 변경했다. GET 방식은 실행될 때, 주소표시줄에 파라메터(인자)의 값이 모두 나타난다.

그래서 주소 표시줄에서 http://localhost:8080/servlet/Contact?number=700&name=허니몬&address=경기도 라고 입력하면 doGet() 메소드가 호출되어 나타난다. GET 방식으로 넘어갈 때는 서블릿 뒤에서 ? 부터 시작하여, 각 파라메터마다 & 으로 연결이 된다.

MessageServlet.java

  1. import java.io.*;
    import javax.servlet.*;
    import javax.servlet.http.*;

    public class MessageServlet extends HttpServlet {
        public void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {

            res.setContentType("text/html;charset=KSC5601");
            // setContentType 를 잘못 입력할 경우, 컴파일 시 다운로드 하시겠습니까? 라고 나온다.
            PrintWriter out = res.getWriter();

            //태그<tag> 사용할 때는 보다시피 .println() 메소드 안에 사용해주면 된다.
            out.println("<html>");
            out.println("<head><title>Hello Servlet</title></head>");
            out.println("<body>");
            out.println("Message Servlet : ");
            out.println("<a href='HelloServlet'>HelloServlet Link</a>");
    out.println("<a href='Contact?number=700&name=허니몬&address=경기도'>Contact Servlet Link</a>"); //에서 보는 것처럼 서블릿을 호출하면서 뒤에 ?로 하여 매개변수들을 직접 지정해줄 수도 있다.
            out.println("</body>");
            out.println("</html>");
            out.close();

        }
    }

doPost() 메소드는 반드시 HTML <FORM METHOD=POST> 에 의해서만 호출되어 사용이 가능하다.

 

● 폼 데이터 처리(09/05/18 배운 내용 하단부에 입력됨)

HTML의 폼에서 태그에 사용된 이름이 유일한 경우에는 getParameter9)로 값을 알아볼 수 있었다. 하지만, 동일한 이름이 여러 번 사용된 경우에는 어떻게 될까? 이러한 경우에는 전달되는 값도 여러 개이다. 따라서 값을 얻을 때 여러 개의 값을 저장할 수 있는 배열 형태를 사용해야 한다. HttpServletRequest는 이러한 용도로 getParameterValues() 메소드를 제공한다. 이 메소드는 다음 예와 같은 방법으로 사용할 수 있다. 이 메소드를 사용할 때 주의할 점은 해당 이름으로 값이 전달되지 않는 경우에 리턴 값이 "null"이 올 수도 있기 때문에 "null"인지 여부를 반드시 확인하여야 한다.

폼처리는 중요합니다~!!! Check it up now!! Bebe!! 베뤼베뤼 임포딴뜨!!! 유노우!!!! 푸햐햐햐햣!!

 

예 : 값이 여러 개 전달되는 경우

  1. String values[] = res.getParameterValues("name");
    if ( values != null) {
       ...
    }

※ 전달되는 값

HTML 의 폼(Form)에서 Input 타입이 text인 경우에는 사용자가 입력한 문자열이 서블릿에 전달된다. 그런데 입력 타입이 checkbox나 radio인 경우에는 어떤 값들이 전달될까? HML 폼에서 체크박스를 사용하면 선택된 체크 박스의 value 속성으로 기술된 값만 서블릿에 전달된다. 만약 HTML 폼의 체크 박스에 value 속성을 기술하지 않으면 'on' 값이 서블릿에 전달되기 때문에 주의해야 한다.

 

예 : 파라미터 이름을 모를 경우(잘 사용하지 않는다.)

  1. import java.util.Enumeration; //필요

    Enumeration e = req.getParameterNames(); // 이전에서 사용한 파라메터들을 몽땅 주머니에 때려넣는 거라고 생각하면 된다.
    while( e.hasMoreElements() ) {
       String name = (String) e.nextElement();
       String value = req.getParameter(name);
       if (values != null){
          for(int i = 0; i < values.length; i++ ) {
             out.println("<li>" + name + " : " + values[i]);
          }
       }
    }

 

resin.conf를 수정하여, 작업하는 폴더를 변경하기

resinConfEdit.JPG

이 작업(resin.conf를 변경한 다음 웹엔진 다시 시작하기)을 마친 다음에 C:\myservlet 폴더에 가면 resin 작동에 필요한 폴더들을 스스로 생성한다.

앞으로 서블릿 작업은 c:\myservlet\WEB-INF\classes에서 사용하면 된다.

resinConfEditCreateFolder.JPG

서블릿을 제외한 파일들은 c:\myservlet\ 에 저장하면 된다.

 

JdbcOracleServlet.java

  1. import java.io.*;
    import java.sql.*;
    import javax.servlet.*;
    import javax.servlet.http.*;

    public class JdbcOracleServlet extends HttpServlet {
        String connect = new String("jdbc:oracle:thin:@127.0.0.1:1521:cjedu");
        String user = "scott";
        String passwd = "tiger";

        public void init(ServletConfig conf) throws ServletException {
            try {
                Class.forName("oracle.jdbc.driver.OracleDriver");
            } catch (Exception e) {
                e.printStackTrace();
            }
            System.out.println("Constructor Succeeded");
        }

        public void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
            Connection con;
            PrintWriter out;
            Statement stat;

            res.setContentType("text/html; charset=euc-kr");
            out = res.getWriter();
            try {
                con = DriverManager.getConnection( connect, user, passwd );
                stat = con.createStatement();
                ResultSet rs = stat.executeQuery("SELECT * FROM customer");

                out.println("<html><head><title>JdbcServlet Test</title></head>");
                out.println("<body>");
                out.println("<h1>JdbcOracleServlet Test</h1>");
                out.println("<p>This is the out form of the JdbcOracleServlet Test</p>");

                while ( rs.next() ) {
                    String num = rs.getString(1);
                    String name = rs.getString(2);
                    String address = rs.getString(3);
                    out.println( num + " -- " + name + " -- " + address );
                    out.println("<p>");
                }

                out.println("</body></html>");

                out.close();
                rs.close();
                stat.close();
                con.close();

            } catch ( Exception e ) {
                e.printStackTrace();
            }
        }
    }

컴파일 후, http://localhost:8080/servlet/JdbcOracleServlet 하면 된다. ㅡㅅ-)b

JdbcOracleServlet Test (이렇게 나오면 된다.)

This is the out form of the JdbcOracleServlet Test

111 -- dada -- seoul

211 -- dayon -- seoul

311 -- mel gibson -- la

411 -- tom cruise -- seoul

511 -- hue grant -- la

611 -- diane soyer -- london

711 -- tom hanks -- london

811 -- gim carry -- seattle

911 -- shone cornery -- seattle

121 -- george cloony -- florida

131 -- michel phiper -- tokyo

141 -- allec boldwin -- beijing

337 -- bella -- la

418 -- jerry -- la

586 -- tom -- seoul

739 -- merry -- paris

200 -- honeymon -- gyunggi

333 -- kim -- gyounggi

444 -- kim -- nara

  1. //코드를 살짝 수정하면!!!
  2. import java.io.*;
    import java.sql.*;
    import javax.servlet.*;
    import javax.servlet.http.*;

    public class JdbcOracleServlet extends HttpServlet {
        String connect = new String("jdbc:oracle:thin:@127.0.0.1:1521:cjedu");
        String user = "scott";
        String passwd = "tiger";

        public void init(ServletConfig conf) throws ServletException {
            try {
                Class.forName("oracle.jdbc.driver.OracleDriver");
            } catch (Exception e) {
                e.printStackTrace();
            }
            System.out.println("Constructor Succeeded");
        }

        public void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
            Connection con;
            PrintWriter out;
            Statement stat;

            res.setContentType("text/html; charset=euc-kr");
            out = res.getWriter();
            try {
                con = DriverManager.getConnection( connect, user, passwd );
                stat = con.createStatement();
                ResultSet rs = stat.executeQuery("SELECT * FROM customer");

                out.println("<html><head><title>JdbcServlet Test</title></head>");
                out.println("<body>");
                out.println("<h1>JdbcOracleServlet Test</h1>");
                out.println("<p>This is the out form of the JdbcOracleServlet Test</p>");
                out.println("<table border=1  width=300>");
                out.println("<tr><th>번호</th><th>이름</th><th>주소</th></tr>");

                while ( rs.next() ) {
                    String num = rs.getString(1);
                    String name = rs.getString(2);
                    String address = rs.getString(3);
                    out.println("<tr>");
                    out.println("<td>"+ num + "</td><td>" + name + "</td><td>" + address + "</td>");
                    out.println("</tr>");
                }
                out.println("</table>");

                out.println("</body></html>");

                out.close();
                rs.close();
                stat.close();
                con.close();

            } catch ( Exception e ) {
                e.printStackTrace();
            }
        }
    }

요렇게도 된다. +_+)

JdbcOracleServlet.JPG

 

서블릿(Form method = get) 을 이용하여 CustomerFind 서블릿에서 파라메터를 받아서 쿼리를 처리하여 출력하여 보자. <input> 태그들에 name 과 value를 입력하는 걸 잊지 말자. req.getParameter('name');으로 빼와야 한다.

JdbcOracleServlet.java

  1. import java.io.*;
    import java.sql.*;
    import javax.servlet.*;
    import javax.servlet.http.*;

    public class JdbcOracleServlet extends HttpServlet {
        String connect = new String("jdbc:oracle:thin:@127.0.0.1:1521:cjedu");
        String user = "scott";
        String passwd = "tiger";

        public void init(ServletConfig conf) throws ServletException {
            try {
                Class.forName("oracle.jdbc.driver.OracleDriver");
            } catch (Exception e) {
                e.printStackTrace();
            }
            System.out.println("Constructor Succeeded");
        }

        public void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
            Connection con;
            PrintWriter out;
            Statement stat;

            res.setContentType("text/html; charset=euc-kr");
            out = res.getWriter();
            try {
                con = DriverManager.getConnection( connect, user, passwd );
                stat = con.createStatement();
                ResultSet rs = stat.executeQuery("SELECT * FROM customer");

                out.println("<html><head><title>JdbcServlet Test</title></head>");
                out.println("<body>");
                out.println("<h1>JdbcOracleServlet Test</h1>");
                out.println("<p>This is the out form of the JdbcOracleServlet Test</p>");
                // <Form> 태그 추가
                out.println("<form method = 'get' action = '/servlet/CustomerFind'>");
                out.println("<table border=1  width=300>");
                out.println("<tr>");
                out.println("<select name='title'>");
                out.println("<option value='num'>번호");
                out.println("<option value='name'>이름");
                out.println("<option value='address'>주소</select>");
                out.println("<input type='text' name='search'><input type='submit'>");

                out.println("</tr>");
                out.println("<tr><th>번호</th><th>이름</th><th>주소</th></tr>");

                while ( rs.next() ) {
                    String num = rs.getString(1);
                    String name = rs.getString(2);
                    String address = rs.getString(3);
                    out.println("<tr>");
                    out.println("<td>"+ num + "</td><td>" + name + "</td><td>" + address + "</td>");
                    out.println("</tr>");
                }
                out.println("</table></form>");

                out.println("</body></html>");

                out.close();
                rs.close();
                stat.close();
                con.close();

            } catch ( Exception e ) {
                e.printStackTrace();
            }
        }
    }

 CustomerFindSearch.JPG

CustomerFind.java

  1. import java.io.*;
    import java.sql.*;
    import javax.servlet.*;
    import javax.servlet.http.*;

    public class CustomerFind extends HttpServlet {
        private String connect = new String("jdbc:oracle:thin:@127.0.0.1:1521:cjedu");
        private String user = "Scott";
        private String passwd = "tiger";


        public void init(ServletConfig conf) throws ServletException {
            // JDBC 드라이버 등록하기
            try {
                Class.forName("oracle.jdbc.driver.OracleDriver");
            } catch (Exception e) {
                e.printStackTrace();
            }


        }

        public void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
            Connection con; //Connect 생성
            Statement stat; //Statement 생성
            PrintWriter out;//PrintWriter 생성

            res.setContentType("text/html; charset=euc-kr");
            out = res.getWriter();
            try {
                con = DriverManager.getConnection( connect, user, passwd );
                stat = con.createStatement( ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_UPDATABLE);
                String stitle = req.getParameter("title");
                String search = req.getParameter("search");
                String sql = "Select * from customer where " + stitle + " like '%" + search + "%'";

                ResultSet rs = stat.executeQuery(sql);
                out.println("<html><head><title>CustomerFind Servlet Execute</title></head><body>");
                out.println("<h1>JdbcOracleServlet Execute CustomerFind Servlet</h1>");
                out.println("INPUT Query : " + sql +"<br><br>");

               
                // 검색된 결과값 출력하기
                if ( rs.next() == true ) {
                    rs.beforeFirst();
                    out.println("<table border=1 width=350>");
                    out.println("<tr><th>번호</th><th>이름</th><th>주소</th></tr>");
                    while ( rs.next() ) {
                        String num = rs.getString(1);
                        String name = rs.getString(2);
                        String address = rs.getString(3);
                        out.println("<tr>");
                        out.println("<td>" + num + "</td><td>" + name + "</td><td>" + address +"</td>");
                        out.println("</tr>");
                    }
                } else {
                    out.println("<h4>아쉽지만, 찾으시는 데이터가 없습니다.</h4>");
                }


                out.println("</table></body></html>");
               
                out.close();    //PrintWriter 파이프 종료
                rs.close();        //ResultSet 종료
                stat.close();    //Statement 종료
                con.close();    //Connection 종료
            } catch (Exception e) {
                e.printStackTrace();
            }

        }
    }

CustomerFindSearchResult.JPG

 

CustomerFindSearchNoResult.JPG

 


storedata.sql

  1. create table store(pid varchar2(3) primary key,
    pkind varchar2(20) not null, -- 종류
    pname varchar2(20) not null, --이름
    pexp varchar2(50) not null, -- 설명
    pnum number(3) not null, -- 수량
    pmaker varchar2(100) ); -- 제조사

    insert into store values('111','세탁기','통돌이 세탁기','통이 도는 강력 세탁기',20,'LG');
    insert into store values('121','세탁기','신바람 세탁기','첨단 FUZZY 세탁기',25,'SAMSUNG');

    insert into store values('211','디스켓','IMATION','3M의 새 디스켓',100,'3M');
    insert into store values('221','필름','SUPER100','KODAK의 자동 카메라용 필름',300,'KODAK');
    insert into store values('231','필름','MONO2000','KONICA흑백 필름',300,'KONICA');

    insert into store values('311','청소기','싹싹이','구석 구석 말끔히- 강력 진공 청소기',15,'LG');
    insert into store values('321','청소기','동글이','소음 걱정 없는 조용한 청소기',80,'DAEWOO');

    insert into store values('411','자동차','트라제XG','품위 있는 레져카 ',96,'HYUNDAI');
    insert into store values('412','자동차','아반테','실속파의 선택',30,'HYUNDAI');

    insert into store values('421','자동차','코란도','강력한 4륜 구동 RV ',88,'SSANGYONG');
    insert into store values('431','자동차','엘란','20C 마지막 스포츠카 ',30,'KIA');

    commit;

DadaStore.JPG

 

 

 

이 글은 스프링노트에서 작성되었습니다.

+ Recent posts