728x90
반응형
HTML 코드입니다.
<body>
<div>
<form id="write_form">
<legend>데이터 추가</legend>
<table>
<tr>
<td><label>닉네임</label></td>
<td><input type="text" name="name"/></td>
</tr>
<tr>
<td><label>메시지</label></td>
<td><textarea name="content"></textarea></td>
</tr>
</table>
<input type="submit" value="글쓰기">
</form>
</div>
<table id="output">
</table>
</body>
Ajax코드입니다.
$(document).ready(function(){
$('#write_form').submit(function(){
var data = $(this).serialize();
$.ajax({
url : '/messages'
,type : 'post'
,data : data
,success : function(data){
console.log("채팅 메시지 데이터 저장 성공",data);
}
}) //Ajax()
event.preventDefault();
})//submit() 이벤트
setInterval(function(){
$.ajax({
url : '/messages'
,type : 'get'
,data : {dummy:new Date().getTime()}
,success : function(data){
$('#output').empty();
$.each(data, function (index, item){
var output = '';
output += '<h2>' + item.name + '</h2';
output += '<p>' + item.content + '</p>';
$('<div></div>').html(output).prependTo('#output');
})//each()
} //success 콜백함수
}); //Ajax()
}, 1000); //setInterval함수
})
$.post(), $.get() Ajax 호출방식입니다.
$(document).ready(function(){
$('#write_form').submit(function(){
var data = $(this).serialize();
$.post('/messages', data, function(data){
console.log("채팅 메시지 데이터 저장 성공",data);
}) //$.post()
event.preventDefault();
})//submit() 이벤트
setInterval(function(){
$.get('/messages', {
dummy: new Date().getDate()
}, function(data){
$('#output').empty();
$.each(data, function (index, item){
var output = '';
output += '<h2>' + item.name + '</h2';
output += '<p>' + item.content + '</p>';
$('<div></div>').html(output).prependTo('#output');
}) //each()
} //success 콜백함수
}); //$.get()
}, 1000); //setInterval함수
})
[서버단]
node.js 서버코드 입니다.
//모듈 추출
var http = require('http');
//Express
var express = require('express'); //express모듈 : http모듈처럼 사용할 수 있지만 훨씬 더 많은 기능이 있는 외부모듈이다.
//http에 http모듈을 추출하여 저장한다. express에 express모듈을 추출하여 저장한다.
var app = express();
app.use(express.static('public'));
//BodyParser
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json());
var messages = [];
app.get('/messages',function(request,response){
response.send(messages)
})
app.post('/messages',function(request,response){
var name = request.param('name');
var content = request.param('content');
console.log(name,content)
var message = {
name : name,
content : content
};
messages.push(message);
response.send({
message : '데이터를 추가했습니다.'
,data : message
})
})
JAVA기반 SpringController 코드
@RestController
public class HomeController {
List<Map<String,String>> messages = new ArrayList<Map<String,String>>();
@GetMapping(value = "/messages")
public List<Map<String,String>> getMessage(String name, String content) {
return messages;
}
@PostMapping(value = "/messages")
public List<Map<String, String>> postMessage(String name, String content) {
Map<String, String> message = new HashMap<String, String>();
message.put("name", name);
message.put("content", content);
messages.add(message);
return messages;
}
}
728x90
반응형
'JavaScript > nodeJS & Ajax & Plugin' 카테고리의 다른 글
| w2ui 플러그인을 활용한 그리드 그리기 -2 (메서드와 이벤트) (0) | 2022.01.10 |
|---|---|
| w2ui 플러그인을 활용한 그리드 그리기 -1 (0) | 2022.01.10 |
| [node.js] mysql 서버 연동 (0) | 2022.01.08 |
| [node.js] - XMLHttpRequest / XML문서 데이터 추출 (childeNodes,nodeValue) (0) | 2022.01.07 |
| [Node.js] - XMLHttpRequest / JSON.parse()로 변환된 JSON객체가 담긴 배열 구조 (0) | 2022.01.07 |