前端表单数据传输到后端控制层示例

这是一个简单的前端代码示例，通过AJAX将表单数据传输到控制层：

HTML代码：

<form id='myForm'>
  <label for='name'>Name:</label>
  <input type='text' id='name' name='name'><br><br>
  <label for='email'>Email:</label>
  <input type='email' id='email' name='email'><br><br>
  <button type='submit'>Submit</button>
</form>

JavaScript代码：

var form = document.querySelector('#myForm');

form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为

  var name = form.elements['name'].value;
  var email = form.elements['email'].value;

  // 发送POST请求到控制层
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/submit');
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        console.log('提交成功！');
      } else {
        console.log('提交失败：' + xhr.status);
      } 
    }
  };
  var data = JSON.stringify({
    name: name,
    email: email
  });
  xhr.send(data);
});

在控制层中，您可以使用您选择的服务器端框架（例如Express.js）来处理POST请求和表单数据。例如，以下是使用Express.js处理POST请求的示例代码：

Express.js处理POST请求：

const express = require('express');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());

app.post('/api/submit', (req, res) => {
  const name = req.body.name;
  const email = req.body.email;
  // 处理表单数据...
  res.send('提交成功！');
});

app.listen(3000, () => {
  console.log('服务器已启动！');
});