【Express】如何把前端資料送到後端？body-parser＋JQuery AJAX（或是表單）

▌非AJAX作法（表單做法）

• 用form表單把資料post到特定路徑下面
• 此做法會導致畫面重新reload
• 表單資料會出現在req.body （name會是資料名稱）
• Name是會POST到後端的重要參數（id只會在前端）

//html
<form action="/" method="POST">
     <input type="text" placeholder="IG帳號" name="account" id="submit_input" value="">
      <button id="button-describe" type="submit">訂閱</button>
</form>

//express
app.post('/', function (req, res) {
    console.log(req.body.account);
})

▌AJAX作法（JQuery作法）

//html
<input type="text" placeholder="IG帳號" id="subscriptionAccount" value="">
<button id="subscriptionButton" type="submit">訂閱</button>

• 取得input資料，然後把他ajax到伺服器
• data:{“content”:subscriptionAccount} 會把一個物件傳到後面
• success:function(res) 可以得到後端伺服器的res（後端自己寫的）

//JQuery
$('#subscriptionButton').on('click', function () {
        var subscriptionAccount = $('#subscriptionAccount').val();
        if (subscriptionAccount == '') {
            toastr.info("請輸入帳號")
        }
        else{
            $.ajax({
                url: "/newaccount",
                dataType: "json",
                data:{"content":subscriptionAccount},
                method:"post",
                success:function(res){
                    console.log(res)
                    if(res.success){
                        toastr.info("訂閱成功");
                    }else{
                        toastr.info("帳號已存在");
                    }
                }
            });
        }
});

//Express.JS

app.post('/newaccount', function (req, res) {
    var content = req.body.content;
    var connectTofirebase = fireData.ref("AccountData").push();
    if(allAccount.indexOf(content) == -1){
        connectTofirebase.set({
            "account": content,
            "date": Date.now()
        }).then(function(){
            fireData.ref('AccountData').once('value',function(snapshot){
                res.send({
                    "success":true,
                    "result":snapshot.val(),
                    "message":"訂閱成功"
                });
            });
        });
    }

    else {
            res.send({
                "success":false,
                "message":"已存在該帳號"
            });
    }

})

▌後端的Express的API寫法

• API寫法

 res.send({
                    "success":true,
                    "result":snapshot.val(),
                    "message":"訂閱成功"
                });

▌不管怎樣都要安裝body-parser

• body-parser可以解析前端POST過來的「資料」

npm install body-parser  //安裝body-parser

▌設置參數

//express.js
var bodyParser = require('body-parser');
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
    extended: false
}));

​