2015년 7월 1일 수요일

Node.js, Express, JQuery에서 Ajax 호출 예제

Post 방식 예제임

1. routing을 하는 member.js 정의
- loginb 호출시 DB에서 사용자 정보 존재 여부 조회 후 메시지를 json으로 return함
var MemberProvider = require('./db/db-member.js').MemberProvider;

var memberProvider = new MemberProvider();

// 로그인 실행 
router.post('/loginb', function(req, res, next) {
    var vId = req.body.email;
    var vPwd = req.body.user_password;
    var datas = [vId, req.body.mem_type];
    // DB에서 사용자 정보 조회
    memberProvider.selectSingleQueryByID("selectInfo", datas, function(err, memberInfo) {
        var vMsg = "";
        if (memberInfo == null) {
            vMsg = "일치하는 ID가 없습니다. ";
        } else if (memberInfo.password != vPwd) {
            vMsg = "비밀번호가 틀립니다.";
        } 

        // 로그인 성공
        if (vMsg == "") {
            res.render('./home', {
                title: 'Main',
                logintype: CONSTS.MEMBER_TYPE.PERSONAL,
                item: memberInfo,
                message: "환영합니다."});
        } else {    // 로그인 실패
            res.render('./member/login', {
                title: 'login failed',
                logintype: CONSTS.MEMBER_TYPE.PERSONAL,
                message: vMsg});
        }
    });
});

2. login view용 jade 파일
- view 구성을 담당
- 두가지 방식(1. $.ajax, 2. $.post)로 Ajax 호출을 수행할 수 있음
- $.ajax는 요청 오류에 대해서도 대응이 가능함
extends ../layout-intro

block scripts
    script(type="text/javascript").
        $(document).ready(function() {
            $("#login").click(function() {
                if ($("#email").val() == "") {
                    alert('이메일(아이디)를 입력하세요.');
                    $("#email").focus();
                    return false;
                }
                if ($("#password").val() == "") {
                    alert('비밀번호를 입력하세요.');
                    $("#password").focus();
                    return false;
                }

                // 1. $.ajax이용
                $.ajax({
                    url: "/member/login#{logintype}",
                    dataType: "json",
                    type: "POST",
                    data:$('#login_account').serialize(),
                    success: function(data) {
                        alert('callback : ' + data.message);
                    },
                    error: function() {
                        alert('error');
                    }
                })
                
                // 2. $.ajax의 약식인 $.post 이용
                //- $.post("/member/login#{logintype}", {email:'a', pasword:'b'}, function(data) {
                //-     alert(data.message);
                //- });
            });
        });

block content
    section.login-sect
        div.heading
            div.branding
            h1= title
        div.login-body
            div.row-item
                form#login_account.login-form(action="/member/login#{logintype}" method="post")
                    input(type="hidden", name="mem_type", value="#{logintype}")
                    ol
                        li.row-item
                            label(for="email-addres") 이메일
                            div.input-wrapper
                                input#email.TextInput.TextInput_Large(type="email", name="email" placeholder="이메일 주소" value="#{userid}")
                        li.row-item
                            label(for="password") 비밀번호
                            div.input-wrapper
                                input#password.TextInput.TextInput_Large(type="password", name="password" placeholder="비밀번호")
                        li
                            input#login.Btn.Btn_emph.Btn_super(name="login", type="button" value="로그인")
            div.row-item
                p.already 아직 계정이 없으신가요?
                a.change-form(href="/member/register#{logintype}") 회원가입 


3. layout-intro.jade 
- view용 사용되는 template jade 파일
doctype html
html
    head
        title= title
        link(rel='stylesheet', href='/stylesheets/style.css')
        script(src="/javascripts/jquery-1.11.2.min.js")
        block scripts
    body
            block content
    footer
        nav.footer-nav
            div.row


이 글은 Evernote에서 작성되었습니다. Evernote는 하나의 업무 공간입니다. Evernote를 다운로드하세요.

댓글 없음:

댓글 쓰기