2021. 10. 10. 14:35ㆍWeb dev
안녕하세요.
오늘은 홈페이지에서 특정 버튼이 눌렸을 때 서버가 응답할 수 있도록,
홈페이지에서 POST 요청을 하면 서버에서 해당 POST 요청을 처리하는 예제를 가져왔습니다.
간단하게 버튼이 눌리면, 서버 측에 JSON 파일을 넘겨보겠습니다.
Ajax를 이용한 POST 통신입니다.
코드 구조는 아래의 01번 게시물을 참조해주세요.
https://devhyeon.tistory.com/25
01. Node js 기반 Web server
Node js web server를 구축해보겠습니다. 현재 단계에서는 localhost에서 실행 가능하며, 검색을 통해 얻은 지식이므로 정석적인 방법이 아닐 수 있습니다! 1. 관련 프로그램을 설치합니다. - Node js LTS v
devhyeon.tistory.com
1. index.html
- <script type="text/javascript" src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
- 다운로드 없이 홈페이지의 코드를 참조하는 부분입니다.
- 그대로 복붙하여 사용해도 되고, 다른 버전이 있으면 그걸 사용해도 됩니다.
- 그 외에 태그들은 검색을 통해 직접 예제를 보시는 게 이해가 더 빠르실 겁니다.
<!DOCTYPE html>
<html>
<head>
<title>Upload File</title>
<script defer src="/js/script.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
body {
text-align: center;
}
form {
display: block;
border: 1px solid black;
padding: 20px;
}
</style>
</head>
<body>
<h1>Upload files to Node.js Server</h1>
<input type="button" id="submit" value="보내기">
<input type="file" id="fileUpload" />
</form>
</body>
</html
2. script.js
- 첫번째 줄은 고정 키워드입니다.
- $('#submit').click(function()
- submit의 이름을 가진 객체의 클릭 이벤트를 정의함.
- 5번째 줄의 url: '/test'
- 클릭을 했을 때 data에 있는 name과 price를 json 형식으로 localhost:3000/test 로 전달한다는 의미입니다.
$(function(){
$('#submit').click(function(){ //submit 버튼을 클릭하였을 때
$.ajax({
type:'post', //post 방식으로 전송
url:'/test', //데이터를 주고받을 파일 주소
data: {
name : "name",
price : "price"
},
dataType:'json', //json 파일 형식으로 값을 담아온다.
success : function(data){ //파일 주고받기가 성공했을 경우
alert("send data !");
},
error : function(err) { // 실패 시
alert("failed : " + err);
}
});
});
});3. server.js
- require == import, #include
- 밑에 세줄 json~~ 부분은 구글링을 통해 찾은 것으로 확실히 모르지만, 저의 경우 정상 작동 하였습니다.
- 3000번 포트에 서버를 열어주고, /test url에 들어갈 시, name과 price의 값을 받아오도록 코드를 작성하였습니다.
- req는 request, res는 respond로 해당 매개변수 이름은 자유롭게 설정가능합니다.
- req.body.id 형태로 참조하시면 됩니다.
const path = require("path");
var express = require('express');
var app = express()
// 아래부터 세줄 json데이터 참조를 위해 필요
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// 3000번 포트로 서버 오픈
app.listen(3000, function () {
console.log("start! express server on port 3000")
})
app.post('/test', function(req, res) {
var name = req.body.name;
var price = req.body.price;
console.log("Is send it?");
console.log(name + " " + price);
})
읽어주셔서 감사합니다.
문제가 있을 시 지적 환영입니다!
'Web dev' 카테고리의 다른 글
| ##. Https 인증서 받기(무료!) (0) | 2021.10.10 |
|---|---|
| 01. Node js 기반 Web server (0) | 2021.10.10 |