IT공부방/jQuery, ajax, java
nodejs 및 jQuery 를 이용한 서버와의 통신 참고하기
동해둘리
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(){
- });
[step3] client 코드
- <!DOCTYPE>
- <html>
- <head>
- <script>
- // 삭제
- $('#btn_remove').on('click',function(){
- var ck = new Array();
- });
- url:'/remove',
- type:'GET',
- }
- });
- });
- // 수정
- $('#btn_add').on('click',function(){
- url:'/add',
- type:'POST',
- }
- });
- });
- // 추가
- $('#btn_modify').on('click',function(){
- url:'/modifyById',
- type:'POST',
- }
- });
- });
- // 목록
- $('#btn_list').on('click',function(){
- url:'/list',
- type:'GET',
- });
- }
- });
- });
- });
- </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>
- <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
반응형