1. 程式人生 > 程式設計 >nodejs獲取表單資料的三種方法例項

nodejs獲取表單資料的三種方法例項

前言

nodejs作為服務端語言,在開發中註冊登入等需通過form表單向後端傳送資料www.cppcns.com進行判斷,那作為服務端語言的nodejs通過哪些方法可以接收呼叫form表單的post請求值呢。

常見的會用到以下三種,讓我們對著例子看看具體用法。

後端我們使用express外掛,需要對express有所瞭解的才便於閱讀哦~

1、首先npm初始化,下載express包,匯入模組後建立服務物件

//匯入express模組
const express = require("express");
// 建立伺服器物件
const app = express();

form表單傳遞

這種通過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&ghttp://www.cppcns.comt;
        程式設計客棧    </tr>
            <tr>
                <td>密碼&http://www.cppcns.com
lt;/td> <td> <input type="text" name="password" id=""></td> </tr> <tr> <button type="submit">提交</button> </tr> </table> </form>

由於表單提交是post請求,在後端nodejs程式碼中需要對post請求資料接收需要做解析響應頭的處理app.use(bodyParser.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程式碼,來看看結果

nodejs獲取表單資料的三種方法例項

ajax請求傳遞

在向後端傳送請求時,常用到get、post請求,同樣,表單的資料可以通過ajax以post請求傳送資料給後端。以上面例子為基礎,該方法的前端程式碼如下。

	 $("#inp3").on("click",function(){
        let user = $("#inp1").val();
        let password = $("#inp2").val();
        $.ajax({
        url:"todata",type:"post",da程式設計客棧ta:{
            user,password
        },success:(data)=>{
            alert(data)
        }
         })
    })

這裡,我們將兩個input的值獲取到,然後繫結提交按鈕的提交按鈕進行ajax請求傳送,傳送給後端的資料儲存在data屬性中。後端同樣通過req.body獲取到。這裡需要特別注意的是form表單不需要寫action值,表單中button按鈕需要阻止預設行為(不然會點選直接傳送請求導致ajax請求會失敗),或是用input標籤type為button型別。

nodejs獲取表單資料的三種方法例項

表單序列化

這種傳送是表單提交的常用方法,它也是通過ajax傳送請求,也可以將name屬性作為傳送後端的屬性名直接傳送。可以說是以上兩種方法的結合。

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

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

nodejs獲取表單資料的三種方法例項

總結

到此這篇關於nodejs獲取表單資料的文章就介紹到這了,更多相關nodejs獲取表單資料內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!