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'与模式匹配，并且req.body仅包含名称。

这是一个基本问题，但是我看不到我该怎么做。

Answer 1

可汗，您似乎正在尝试两种表单提交方法：non-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，数据将在请求正文中

我希望这会有所帮助！

如何将表格数据发送到服务器

1 个答案:

非AJAX

AJAX