快捷導(dǎo)航

nodejs獲取表單數(shù)據(jù)的三種方法實(shí)例

更新時(shí)間：2021年06月02日 12:06:40 作者：yun_shuo

在開發(fā)中經(jīng)常需要獲取form表單的數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于nodejs獲取表單數(shù)據(jù)的三種方法,方法分別是form表單傳遞、ajax請(qǐng)求傳遞以及表單序列化,需要的朋友可以參考下

前言

nodejs作為服務(wù)端語(yǔ)言，在開發(fā)中注冊(cè)登錄等需通過(guò)form表單向后端發(fā)送數(shù)據(jù)進(jìn)行判斷，那作為服務(wù)端語(yǔ)言的nodejs通過(guò)哪些方法可以接收調(diào)用form表單的post請(qǐng)求值呢。

常見的會(huì)用到以下三種，讓我們對(duì)著例子看看具體用法。

后端我們使用express插件，需要對(duì)express有所了解的才便于閱讀哦~

1、首先npm初始化，下載express包，導(dǎo)入模塊后創(chuàng)建服務(wù)對(duì)象

//導(dǎo)入express模塊
const express = require("express");
// 創(chuàng)建服務(wù)器對(duì)象
const app = express();

form表單傳遞

這種通過(guò)from表單的特性，可以點(diǎn)擊表單中button的type為submit的按鈕，會(huì)提交表單數(shù)據(jù)。形式是以一種對(duì)象方式，屬性名為input標(biāo)簽中name值，屬性值為input標(biāo)簽value值，下面例子來(lái)看看具體寫法。

<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請(qǐng)求，在后端nodejs代碼中需要對(duì)post請(qǐng)求數(shù)據(jù)接收需要做解析響應(yīng)頭的處理app.use(bodyParser.urlencoded({ extended: false }))，然后用req.body來(lái)表示前端傳遞過(guò)來(lái)的數(shù)據(jù)。具體后端代碼如下。

const express = require("express");
const app = express();
app.use(express.static("./"))
var bodyParser = require('body-parser')
//  解析 application/x-www-form-urlencoded響應(yīng)頭
app.use(bodyParser.urlencoded({ extended: false }))
app.post("/todata",(req,res)=>{
    console.log(req.body);
    res.send("提交成功")
})
app.listen("80",()=>{
    console.log("成功");
})

通過(guò)終端運(yùn)行node代碼，來(lái)看看結(jié)果

ajax請(qǐng)求傳遞

在向后端發(fā)送請(qǐng)求時(shí)，常用到get、post請(qǐng)求，同樣，表單的數(shù)據(jù)可以通過(guò)ajax以post請(qǐng)求發(fā)送數(shù)據(jù)給后端。以上面例子為基礎(chǔ)，該方法的前端代碼如下。

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

這里，我們將兩個(gè)input的值獲取到，然后綁定提交按鈕的提交按鈕進(jìn)行ajax請(qǐng)求發(fā)送，發(fā)送給后端的數(shù)據(jù)存儲(chǔ)在data屬性中。后端同樣通過(guò)req.body獲取到。這里需要特別注意的是form表單不需要寫action值，表單中button按鈕需要阻止默認(rèn)行為（不然會(huì)點(diǎn)擊直接發(fā)送請(qǐng)求導(dǎo)致ajax請(qǐng)求會(huì)失?。?，或是用input標(biāo)簽type為button類型。

表單序列化

這種發(fā)送是表單提交的常用方法，它也是通過(guò)ajax發(fā)送請(qǐng)求，也可以將name屬性作為發(fā)送后端的屬性名直接發(fā)送?？梢哉f(shuō)是以上兩種方法的結(jié)合。

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

只需要通過(guò)$(“form”).serialize()這個(gè)方法，就能獲取含name屬性值。