[NODEJS]GET 방식 데이터 전송 GET METHOD TRANSMISSION[QS,CDNJS]

다른 부분은 이전 부분들과 중복되기 때문에 설명을 생략합니다.
중요하게 봐야 할 부분은 녹색 컬러 부분과 갈색 컬러 부분입니다.

The explanation of other parts is omitted because they overlap with the previous parts.
The important parts to look at are the green colored part and the brown colored part.

1.QS
– get방식 데이터 전송을 사용하려면 qs모듈이 필요한데 서버부분은 모듈을 설치해야 하나 클라이언트 부분은 cdnjs에서 cdn방식링크로 사용할 수 있습니다.
– https://cdnjs.com 에서 아래의 코드를 받을 수 있습니다.

– To use get-type data transmission, the qs module is required. The server part requires the module to be installed, but the client part can be used as a cdn-style link in cdnjs.
– You can get the code below from https://cdnjs.com.

        <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.12.1/qs.min.js" 
        integrity="sha512-vuLOE4Fh9lfxaN9n81Vl1HwrqMYz9WKoNmsHNC7Hz7OWX4k4O7FjCyQ1tQ82RJExao+Fas40RLiS5PCfVRGgnQ==" 
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

– querystring에서 id,name을 가지고 옵니다.
– querysting은 주소의 ?와 그 뒷 부분을 의미합니다.
– ignoreQueryPrefix: true 이 옵션은 querystring에서 ?를 제거하는 옵션입니다.

– Get id and name from querystring.
– querysting means the ? and the part after it in the address.
– ignoreQueryPrefix: true This option removes ? from the querystring.

            const { id, name } = Qs.parse(location.search, {
                ignoreQueryPrefix: true,
            });

2.전체코드(full coce)

server_data.js

//server_data.js
const http = require('http');
const express = require('express');
const app = express();
const server = http.createServer(app);

/*  routing  */
app.use(express.static(__dirname+"/public"));


// Start the server
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
  console.log(`CommonJS(Express) Server is running on port ${PORT}`);
});

index.html

<html>
    <head>    
        <title>index.html</title>
    </head>
    <body>
      <a href="get.html?id=202405&name=hellowworld!">querystring</a>
    </body>
</html>

get.html

<html>
    <head>    
        <title>get.html</title>
    </head>
    <body>
        <div id="getid"></div>
        <div id="getname"></div>
    </body>

        <!--https://cdnjs.com/libraries/qs-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.12.1/qs.min.js" 
        integrity="sha512-vuLOE4Fh9lfxaN9n81Vl1HwrqMYz9WKoNmsHNC7Hz7OWX4k4O7FjCyQ1tQ82RJExao+Fas40RLiS5PCfVRGgnQ==" 
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script>    
            const { id, name } = Qs.parse(location.search, {
                ignoreQueryPrefix: true,
            });

            document.getElementById('getid').innerHTML = `${id}`;
            document.getElementById('getname').innerHTML = `${name}`;
            console.log(id,name);
        </script>

</html>

Leave a Reply Cancel reply