如何將表格數據發送到服務器

Question

我想建立一個小型網站。 我的后端幾乎完成了，但是我找不到如何將表單數據發送到服務器。 這是我的嘗試，例如，我想將數據發送到運行在端口3000的本地主機：

jQuery('#signUp-Form').on('submit',function(e){
    e.preventDefault();
    console.log('Sending data');
    var name = jQuery('[name = username]').val();
//    socket.emit('sign-up',{
//      username: jQuery('[name = username]').val(),
//      password: jQuery('[name = password]').val()
//    });
});

我可以使用socket.io，但是我想使用POST,GET etc並且在服務器端我用express構建了服務器。

我可以從字段中檢索到var name ，現在我想將其發送到服務器：這是處理此請求的函數。 僅前兩行：

app.post('/login',(req,res) => {
  var body = _.pick(req.body, ['username', 'password']);

現在我的問題是我該如何以這種格式發送數據，以使'/ login'與pattern匹配，並且req.body僅包含名稱。

這是一個基本問題，但是我看不到我該怎么做。

Answer 1

汗，您似乎正在嘗試兩種表單提交方法：非AJAX和AJAX。 從您的問題來看，使用哪種方法尚不清楚，但是我將展示兩種方法：

非Ajax

使用<form action="/login" method="POST"> ：

<form id="myform" action="/login" method="POST">
    <input type="text" name="username">
    <input type="password" name="password">
    <button type="submit">login</button>
</form>

此方法將刷新頁面並向/ login發送POST請求，以發送url編碼的數據，例如：

username=nha&password=asonteu

AJAX

使用AJAX， 頁面不會刷新 ，並且您必須以編程方式發送數據：

$( "#myform" ).on( "submit", function( event ) {
    event.preventDefault();
    let data = $( this ).serialize();
    //make our request here
    $.post( "/login", function( data ) {
        console.log(data);
    });
});

serialize()還會對表單數據進行url編碼。

您的服務器必須處理任何期望的數據格式（以正確提取字段）。 URL編碼很有用，但是稍后您將看到JSON或protobufs 。 只要客戶端和服務器都同意，使用哪種格式就沒關系。

注意：使用POST時，數據將在請求正文中

我希望這有幫助！