nodejs 및 jQuery 를 이용한 서버와의 통신 참고하기

IT공부방/jQuery, ajax, java

by 동해둘리 2016. 8. 5. 17:28

향후, 참고를 위해 좋은 자료가 있는 포스팅을 기록으로 남김니다.

자료출처 : http://cafe.naver.com/jjdev/1714

[step1] mysql database:ksmart

member table

[step2] nodejs server 코드

// mysql dbms연결
var mysql = require('mysql');
var client = mysql.createConnection({
    user:'root',
    password:'java1234',
    database:'ksmart'
});
var http = require('http');
var express = require('express');
var app = express();
app.use(express.static('public'));
app.use(express.bodyParser());
app.use(app.router);
// 멤버 목록
app.all('/list',function(request,response){
    var sql = 'select * from member';
    client.query(sql,function(error,result){       
    //  console.log(result);
        response.send(result)
    });
});
// 멤버 추가
app.all('/add',function(request,response){
    var id = request.param('id');
    var pw = request.param('pw');
    var name = request.param('name');
    var age = request.param('age');
    var gender = request.param('gender');
   
    var sql = "insert into member(id,pw,name,age,gender) values(?,?,?,?,?)";
    client.query(sql,
                [id,pw,name,age,gender],
                function(error,result){
                    response.send(id);
    });
});
// 멤버 삭제
app.all('/remove',function(request,response){
    var ck = request.param('ck'); // 배열
    for(var i=0; i<ck.length;i++){
        var sql = 'delete from member where id=?';
        client.query(sql,[ck[i]],function(){});
    }
    response.send(ck);
});
// 멤버 수정
app.all('/modifyById',function(request,response){
    var id = request.param('id');
    var pw = request.param('pw');
    var name = request.param('name');
    var age = request.param('age');
    var gender = request.param('gender');
   
    var sql = "update member set pw=?,name=?,age=?,gender=? where id=?";
    client.query(sql,
                [pw,name,age,gender,id],
                function(error,result){
                    response.send(id);
    });
});
 
http.createServer(app).listen(80,function(){
    console.log('Server Running at http://127.0.0.1');
});

[step3] client 코드

<!DOCTYPE>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
    // 삭제
    $('#btn_remove').on('click',function(){
        var ck = new Array();
        $('.ck:checked').each(function(index,item){
            ck.push($(item).val());
        });
        $.ajax({
            url:'/remove',
            type:'GET',
            data:{ck:ck},
            success:function(data){
                alert(data+'삭제');
                $('#btn_list').trigger('click');
            }
        });
    });
 
    // 수정
    $('#btn_add').on('click',function(){
        var id = $('#id').val();
        var pw = $('#pw').val();
        var name = $('#name').val();
        var age = $('#age').val();
        var gender = $('#gender').val();
 
        $.ajax({
            url:'/add',
            type:'POST',
            data:{id:id,pw:pw,name:name,age:age,gender:gender},
            success:function(data){
                alert(data+'님 추가');
                $('#btn_list').trigger('click');
            }
        });
    });
    // 추가
    $('#btn_modify').on('click',function(){
        var id = $('#id').val();
        var pw = $('#pw').val();
        var name = $('#name').val();
        var age = $('#age').val();
        var gender = $('#gender').val();
 
        $.ajax({
            url:'/modifyById',
            type:'POST',
            data:{id:id,pw:pw,name:name,age:age,gender:gender},
            success:function(data){
                alert(data+'님 수정');
                $('#btn_list').trigger('click');
            }
        });
    });
    // 목록
    $('#btn_list').on('click',function(){
        $.ajax({
            url:'/list',
            type:'GET',
            success:function(data){
                $('#list').empty();
                $(data).each(function(index,item){
                    $('#list').append('<tr>');
                    $('#list').append('<td><input type="checkbox" class="ck" value="'+item.id+'"></td>');
                    $('#list').append('<td>'+item.id+'</td>');
                    $('#list').append('<td>'+item.pw+'</td>');
                    $('#list').append('<td>'+item.name+'</td>');
                    $('#list').append('<td>'+item.age+'</td>');
                    $('#list').append('<td>'+item.gender+'</td>');
                    $('#list').append('</tr>');
                });
            }
        });
    });
});
</script>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>id</th>
                <th>pw</th>
                <th>name</th>
                <th>age</th>
                <th>gender</th>
                <th>추가</th>
                <th>수정</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="text" id="id"></td>
                <td><input type="password" id="pw"></td>
                <td><input type="text" id="name"></td>
                <td><input type="text" id="age"></td>
                <td>
                    <select id="gender">
                        <option value="m">남</option>
                        <option value="f">여</option>
                    </select>
                </td>
                <td><button id="btn_add">add</button></td>
                <td><button id="btn_modify">modify</button></td>
            </tr>
        </tbody>
    </table>
 
    <button id="btn_list">회원리스트</button>
    <table border="1">
        <thead>
            <tr>
                <th></th>
                <th>id</th>
                <th>pw</th>
                <th>name</th>
                <th>age</th>
                <th>gender</th>
            </tr>
        </thead>
        <tbody id="list">
        </tbody>
    </table>
    <button id="btn_remove">remove</button>
</body>
</html>

[실행화면]

[출처] jquery(ajax) + nodejs(server) + mysql 을 이용한 CRUD 구현 (JAVA, JAVASCRIPT 개발자 (자바, 자바스크립트)) |작성자zeroDay

저작자표시

'IT공부방 > jQuery, ajax, java' 카테고리의 다른 글

javascript 숫자계산시 .. 소수점오류 수정하기 toFixed() , parseFloat() (0)	2016.08.23
ajax 로 폼데이터 서버전송 후 파일생성 및 DB저장, serialize() (0)	2016.08.09
jQuery UI 의 상호작용(interaction) draggable() 함수 살펴보기 (0)	2016.08.02
jQuery 함수 addClass() appendTo() (0)	2016.07.30
AngularJS 자바스크립트 라이브러리 살펴보기 (0)	2016.07.29

동해둘리의 IT Study

고정 헤더 영역

메뉴 레이어

메뉴 리스트

검색 레이어

검색 영역

상세 컨텐츠

본문 제목

본문

'IT공부방 > jQuery, ajax, java' 카테고리의 다른 글

관련글 더보기

댓글 영역

추가 정보

인기글

최신글

티스토리툴바