jQuery json을 이용한 로그인 구현

황제낙엽 2011.03.25 08:27 조회 수 : 601

sitelink1 http://cafe.naver.com/jquerymytour.cafe?...d=115& 
sitelink2  
sitelink3 http://1 
extra_vars4 ko 
extra_vars5  
extra_vars6 sitelink1 
이번강좌는 간단한 jquery를 사용하는데요.
 
JSON2.js 파일을 사용해서 json개체를 만드는 방법을 알아 보고자 합니다.
 
image001_easyco74.png

 

 
먼저 첨부파일을 위 그림처럼 첨부 시킵니다. 잘모르시는 분은 1강을 보시면 추가하는 방법이 나옵니다.
 
image002_easyco74.png

 

 
위에 처럼 자바스크립트 링크를 겁니다. 인텔리 센스를 잘 설정하셨다면 인텔리센스도 뜰것입니다.
 
image003_easyco74.png

 

 
그리고 바디안에 폼에 위에 그림처럼 아이디,패스워드, 로그인 버튼을 만듭니다.
 
image004_easyco74.png

 

 
그럼 위에 그림처럼 브라우저에서 확인을 합니다. F5 누르시면 자동으로 위에 브라우져가 뜹니다.
 
image005_easyco74.png

 

 
이제 jquery가 나옵니다.
 
일단 구문중에 
 
$(document).ready(function()
{
 
});
 
이구분은 1장에서 이미 설명 드린바 있습니다. 페이지가 로드 할때 까지 기다렸다가 DOM개체가 브라우져에 다 로드가 되면 
 
실행이 된다는 뜻입니다.
 
 
그리고 그안에 $("#btnLogin") 요 구문이 보입니다.
 
DOM 개체 중에서 ID는 고유 한것이고 name 속성은 같은 이름이 중복 될 수 있습니다.
 
나중에 name을 어떻게 쓰는지 보고 지금은 각 input에 id를 jquery가 셀렉트 하는 모습을 보겠습니다.
 
$("#아이디명") 이런식으로 주시고 뒤에 .val()은 value값을 가져옵니다.
 
그래서 $("#userid").val(); 이렇게 쓰면 input box의 id가 "userid"인 놈의 value값을 가져 온다는 말입니다.
 
물론 설정 하실때는 $("#userid").val("멜롱") 이런식으로 쓰시면 값이 셋팅이 됩니다.
 
한번 해보세요.
 
$("#btnLogin").click(function(){
 
});
 
이구문은 jquery 셀렉터가 id를 btnlogin으로 가지는 엘리먼트를 찾아서 클릭이벤트를 바인딩한다는 얘기죠.
 
구지 우리가 <input type="button" id="btnlogin" onclick="OnFormCheck();"> 머 이런식으로 이벤트 주지 않아도 
 
jquery에서 이벤트를 줄수 있다는 얘기죠.
 
위에 소스를 실행 하시면 아래 그림 처럼 실행 화면이 나옵니다.
 
image006_easyco74.png

 

image007_easyco74.png

 

 
위에 소스는 보시면 클릭시 다른 폼체크 쪽으로 함수를 분기 시킵니다. 전 이렇게 따로 따로 함수를 주로 만들어서 씁니다.
 
위 소스를 실행 시키면 아래 화면 처럼 결과를 얻으 실수 있습니다.
 
image008_easyco74.png

 

 
 
 
아래 소스 를 봐주세요.
 
image009_easyco74.png

 

 
보시면 OnFormCheck 함수를 완성한것입니다.
 
$("#아이명").val() 해서 해당 컨트롤의 값을 얻을 수 있고 .focus()를 주어서 해당 컨트롤에 포커스를 줄 수 있습니다.
 
image010_easyco74.png

 

 
 
 
 
위에 소스를 실행하시면 위에 처럼 결과를 얻으 실수 있습니다.
 
image011_easyco74.png

 

 
우리가 앞으로 jquery ajax를 하기위해서 json 개체를 씁니다. 오늘 그 첫번째 사용법입니다.
 
일단 우리가 캡슐화 시킬 데이터는 사용자 아이디 그리고 패스워드 입니다.
 
그래서 데이터 부분만 함수로 따로 만듭니다.
 
그함수가 data_login함수입니다.
 
변수로 받아서 this.변수 = 파라미터명 이런식으로 정의를 합니다.
 
그리고 //JSON개체 만들기 부분에서 new 키워드를 사용해서 
 
var objdata = new data_login(m_userid , m_passwd );
 
식으로 개체를 생성합니다.
 
그리고 제일 중요한 부분인 
 
 var m_senddata = JSON.stringify(objdata);
 
json2.js에서 지원하는 stirngfiy함수를 사용해서 json개체를 쉽게 만드실 수 있습니다.
 
실행결과 입니다.
 
image012_easyco74.png

 

 
보시면 {"userid":"test" , "password":"1111"} 이렇게 만들어 지신걸 보실 수 있습니다.
 
우리가 선언한 변수명이 그대로 사용되어져서 만들어 진걸 볼 수 있습니다.
 
JSON에 대한 자료는 카페내에 있으니 검색해서 읽어 보시고 
 
오늘은 여기까지 입니다.
 
jquery ajax를 쓸때도 유용하게 쓰일 예정이니 충분히 보시기 바랍니다.
 
그럼 이만..감사합니다.
 
 
<-- 소스 입니다.-->
 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JqueryStudy._Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script src="./Common/js/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="./Common/js/JSON2.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
    $(document).ready(function() {
 
        $("#btnLogin").click(function() {
            //alert("로그인 버튼 클릭");
 
            OnFormCheck();
            return;
        });
 
 
    });
 
    function OnFormCheck() {
 
        var m_userid = $("#userid").val();
        var m_password = $("#passwd").val();
 
        if (m_userid == "") {
            alert("아이디를 입력하여 주세요.");
            $("#userid").focus();
            return;
        }
 
        if (m_password == "") {
            alert("패스워드를 입력하여 주세요.");
            $("#passwd").focus();
            return;
 
        }
        
        //JSON 데이터 만들기
        var objdata = new data_login(m_userid, m_password);
 
        var m_senddata = JSON.stringify(objdata);
 
        alert(m_senddata);
        
        return;
 
    }
 
    function data_login(p_userid, p_password) {
 
        this.userid = p_userid;
        this.password = p_password;
 
    }
</script>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="text" id="userid" />
        <input type="password" id="passwd" />
        <input type="button" id="btnLogin" value="로그인" />
    </div>
    </form>
</body>
</html>
이 게시물을
목록
쓰기 태그