如何通过HTTP POST方法获取联系表单提交的用户消息

前端表单修复 #

你当前的表单代码缺少关键的name属性，浏览器默认提交表单时只会携带带有name标识的字段，同时需要修改action属性为你的后端处理接口地址。修复后代码如下：

<div class="text">Message me</div>
<form class="contact-form" action="/submit-contact" method="POST">
    <div class="fields">
        <div class="field name">
            <input type="text" class="fullname" name="fullname" placeholder="Name">
        </div>
        <div class="field email">
            <input type="email" class="email-input" name="email" placeholder="Email">
        </div>
    </div>
    <div class="field">
        <input type="text" class="subject" name="subject" placeholder="Subject">
    </div>
    <div class="field textarea">
        <textarea class="message" name="message" cols="30" rows="10" placeholder="Message.."></textarea>
    </div>
    <div class="button-area">
        <button class="send-msg" type="submit" name="send">Send message</button>
        <div class="error-box"></div>
    </div>
</form>

对应联系表单界面：

后端接收逻辑 #

根据你使用的后端技术栈，可参考以下常见实现：

Node.js（Express框架） #

首先安装并配置表单解析中间件：

npm install express body-parser

接口逻辑代码：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
// 解析表单格式数据
app.use(bodyParser.urlencoded({ extended: true }));

// 处理表单提交的POST请求
app.post('/submit-contact', (req, res) => {
    // 直接从req.body中获取对应name的字段值
    const { fullname, email, subject, message } = req.body;
    // 此处可添加字段校验、存数据库、触发通知邮件等逻辑
    res.send('提交成功');
});

app.listen(3000, () => console.log('服务启动在3000端口'));

PHP #

直接通过全局$_POST变量获取提交的字段：

<?php
// submit-contact.php 文件
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // 获取表单字段
    $fullname = $_POST['fullname'];
    $email = $_POST['email'];
    $subject = $_POST['subject'];
    $message = $_POST['message'];
    // 此处添加后续处理逻辑
    echo "提交成功";
}
?>

修改前端form的action属性为submit-contact.php即可对接。

内容的提问来源于stack exchange，提问作者jaggu