nodejs 폼 데 이 터 를 가 져 오 는 세 가지 방법 인 스 턴 스

머리말
nodejs 는 서버 언어 로 서 개발 과정 에서 로그 인 등 을 등록 할 때 form 폼 을 통 해 백 엔 드 에 데 이 터 를 보 내 판단 해 야 합 니 다.그러면 서버 언어 인 nodejs 는 어떤 방법 으로 form 폼 을 호출 하 는 post 요청 값 을 받 을 수 있 습 니까?
흔히 볼 수 있 는 것 은 다음 과 같은 세 가지 가 있 는데,예 를 들 어 구체 적 인 용법 을 살 펴 보 자.
백 엔 드 에 서 는 express 플러그 인 을 사용 합 니 다.express 에 대해 알 아야 읽 기 쉽 습 니 다~
1.우선 npm 초기 화,express 패키지 다운로드,모듈 가 져 온 후 서비스 대상 만 들 기

//  express  
const express = require("express");
//        
const app = express();

양식 전달
from 폼 의 특성 을 통 해 폼 에 있 는 button 의 type 이 submit 인 단 추 를 누 르 면 폼 데 이 터 를 제출 할 수 있 습 니 다.형식 은 하나의 대상 방식 으로 속성 명 은 input 태그 의 name 값 이 고 속성 값 은 input 태그 value 값 입 니 다.다음 예 를 들 어 구체 적 인 쓰기 방법 을 보 겠 습 니 다.

<form action="/todata" method="POST">
        <table>
            <tr>
                <td>  </td>
                <td> <input type="text" name="user" id=""></td>
            </tr>
            <tr>
                <td>  </td>
                <td> <input type="text" name="password" id=""></td>
            </tr>
            <tr>
                <button type="submit">  </button>
            </tr>
        </table>
</form>

폼 제출 은 post 요청 이기 때문에 백 엔 드 nodejs 코드 에서 post 요청 데이터 수신 에 대해 응답 헤드 를 분석 하 는 처리 app.use(body Parser.urlencoded({extended:false})를 한 다음 에 req.body 로 전단 에서 전 달 된 데 이 터 를 표시 해 야 합 니 다.구체 적 인 백 엔 드 코드 는 다음 과 같다.

const express = require("express");
const app = express();
app.use(express.static("./"))
var bodyParser = require('body-parser')
//     application/x-www-form-urlencoded   
app.use(bodyParser.urlencoded({ extended: false }))
app.post("/todata",(req,res)=>{
    console.log(req.body);
    res.send("    ")
})
app.listen("80",()=>{
    console.log("  ");
})

터미널 에서 node 코드 를 실행 하여 결 과 를 봅 니 다.

ajax 전송 요청
백 엔 드 에 요청 을 보 낼 때 get,post 요청 을 자주 사용 합 니 다.마찬가지 로 폼 의 데 이 터 는 ajax 를 통 해 post 로 데 이 터 를 백 엔 드 에 보 낼 수 있 습 니 다.위의 예 를 바탕 으로 이 방법의 전단 코드 는 다음 과 같다.

	 $("#inp3").on("click",function(){
        let user = $("#inp1").val();
        let password = $("#inp2").val();
        $.ajax({
        url:"todata",
        type:"post",
        data:{
            user,
            password
        },
        success:(data)=>{
            alert(data)
        }
         })
    })

여기 서 저 희 는 두 개의 input 값 을 가 져 온 다음 제출 단추 의 제출 단 추 를 연결 하여 ajax 요청 을 하고 백 엔 드 에 보 낸 데 이 터 를 data 속성 에 저장 합 니 다.백 엔 드 역시 req.body 를 통 해 얻 을 수 있 습 니 다.여기 서 특히 주의해 야 할 것 은 form 폼 에 action 값 을 쓸 필요 가 없습니다.폼 에 있 는 button 단 추 는 기본 동작 을 막 아야 합 니 다.(그렇지 않 으 면 요청 을 직접 보 내 려 면 ajax 요청 이 실 패 했 습 니 다)또는 input 태그 type 을 button 형식 으로 사용 합 니 다.

양식 직렬 화
이 전송 은 폼 을 제출 하 는 데 자주 사용 되 는 방법 입 니 다.ajax 를 통 해 요청 을 보 내 거나 name 속성 을 백 엔 드 의 속성 명 으로 직접 보 낼 수 있 습 니 다.상기 두 가지 방법의 결합 이 라 고 할 수 있다.

		$("#inp3").on("click",function(){
        $.ajax({
        url:"todata",
        type:"post",
        data:$("form").serialize(),
        success:(data)=>{
            alert(data)
        }
         })
    })

$("form").serialize()라 는 방법 으로 name 속성 값 을 얻 을 수 있 습 니 다.

총결산
nodejs 가 폼 데 이 터 를 가 져 오 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 nodejs 가 폼 데 이 터 를 가 져 오 는 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 저 희 를 많이 사랑 해 주세요!