javascript - 如何向服务器发送表单数据

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 等，在服务器端我用 express 构建了我的服务器。

我可以将字段中的名称检索到 var name 中，现在我想将它发送到服务器:这是处理此请求的函数。只有前两行:

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

现在我的问题是如何以这种格式发送数据，以便“/login”与模式匹配并且 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 encoded数据如:

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，数据将在请求正文中

希望对您有所帮助!