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를 다운로드하세요.