데이터를 주고 받는 방법 모음

1. 폼(form)으로 데이터 전송하기

[폼이 있는 페이지]

<form action="/add" method="POST">
  <div class="form-group">
    <label>제목</label>
    <input type="text" class="form-control" name="title">
  </div>
  <div class="form-group">
    <label>날짜</label>
    <input type="text" class="form-control" name="date">
  </div>
  <button type="submit" class="btn btn-outline-secondary">전송하기</button>
</form>

폼태그 내부에 있는 action은 뭔가? 

Action은 어떤 경로로 action을 취할 건지를 정해주는 것이다. 따라서 위의 코드를 살펴보면 /add 라는 경로로 post를 요청한다는 것을 작성해준 것이다.

 

폼태그 내부에 있는 method는 뭔가?

Method는 GET/POST중 어떤 요청을 할 것인지를 정하는 것이다. 

 

!!!! req.body는 POST 밖에 안된다! GET은 안됨

---

[sever]

app.post('/add', function(request, response)
  console.log(request.body.title);
  console.log(request.body.date);
  response.send('전송완료')
});

/add라는 경로로 누군가 들어오면 '전송완료'라고 보내줘라는 의미이다.

 

---

 

2. AJAX 

$.ajax({
  method: 요청할 메소드 입력(예를 들면 GET/POST/DELETE 등등),
  url: 요청할 경로,
  data: 
	}).done(function (result) {
		//성공시 실행 할 코드
	}).fail(function (error) {
		//실패시 실행 할 코드
});


//예시 
$.ajax({
  method: 'post',
  url: '/create',
  data: {title: '제목', date: '2023.09'}
	}).done(function (result) {
		//성공시 실행 할 코드
        console.log('성공');
	}).fail(function (error) {
		//실패시 실행 할 코드
        console.log('성공');
});

 

[sever]

app.요청할 메소드('요청할 경로', function(request, response)
  
});

// 예시
app.post('/create', function(request, response)
  
});

 

---

 

3. Query string

// 보낼 데이터 한 개
var vlaue1 = '';
window.location.replace('/search?value=' + value1);

// 보낼 데이터 두 개
var vlaue1 = '';
var vlaue2 = '';
window.location.replace('/search?value1=' + value1 + '&value2=' + value2);

//예시
var inputValue = $('#keyword').val(); //검색창에 입력된 A 값
window.location.replace('/search?value=' + inputValue);

 

 

app.get('/search', (request, response) => {
	console.log(request.query.value); //쿼리 값으로 넘어온 값 콘솔창에 출력
})

 

 

---

 

4. SSE (Server Sent Events)

 

GET 요청할 부분(프론트)

var eventSource;

eventSource = new EventSource('경로');
eventSource.addEventListener('서버에 쓴 데이터 명', function (e){
    console.log(e.data); // 서버가 보낸 데이터
});


//예시
var eventSource;

eventSource = new EventSource('/');
eventSource.addEventListener('event', function (e){
    console.log(e.data); // 서버가 보낸 데이터
});

 

 

GET 요청하는 부분(서버)

app.get('경로', function(request, response){

    response.writeHead(200, { //헤더를 변경해주는 부분
      "Connection": "keep-alive",
      "Content-Type": "text/event-stream",
      "Cache-Control": "no-cache",
    });

    // * event: 보낼 데이터 명\n
    // * data: 보낼 데이터\n\n
    response.write('event: test\n');
    response.write('data: 안녕하세요\n\n'); 

});

// 예시
app.get('/', function(request, response){

    response.writeHead(200, { //헤더를 변경해주는 부분
      "Connection": "keep-alive",
      "Content-Type": "text/event-stream",
      "Cache-Control": "no-cache",
    });

    // * event: 보낼 데이터 명\n
    // * data: 보낼 데이터\n\n
    response.write('event: test\n');
    response.write('data: 안녕하세요\n\n'); 
	response.end();
});

 

---