怎么使用ajax请求把react前端输入的表单数据传到后端数据库中

首先，在React中，你需要使用 `axios` 或者 `fetch` 等库来发起 AJAX 请求。

1. 安装 `axios` 库

在终端中运行以下命令来安装 `axios` 库：

npm install axios

2. 发起 AJAX 请求

在 React 组件中，你可以在表单提交时发起 AJAX 请求。例如：

import React, { useState } from 'react';
import axios from 'axios';

function Form() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('/api/contact', formData);
      console.log(response.data);
    } catch (err) {
      console.error(err);
    }
  }

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Name:</label>
        <input type="text" name="name" id="name" value={formData.name} onChange={handleChange} />
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input type="email" name="email" id="email" value={formData.email} onChange={handleChange} />
      </div>
      <div>
        <label htmlFor="message">Message:</label>
        <textarea name="message" id="message" value={formData.message} onChange={handleChange}></textarea>
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

这里我们定义了一个表单组件，其中包含 `name`，`email` 和 `message` 三个表单项。在 `handleSubmit` 函数中，我们使用 `axios.post` 发起 POST 请求，将表单数据作为请求体传递给后端 `/api/contact` 接口。如果请求成功，我们在控制台中打印服务器返回的数据。

3. 处理后端请求

在后端中，你需要使用一个路由处理 POST 请求，并将表单数据存储到数据库中。例如，如果你使用 Node.js 和 Express 构建后端，可以使用以下代码：

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

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.post('/api/contact', (req, res) => {
  const { name, email, message } = req.body;
  // 这里可以连接数据库，将表单数据存储到数据库中
  // ...

  res.status(200).json({ success: true });
});

app.listen(3000, () => console.log('Server is running on port 3000'));

这里我们使用 `body-parser` 中间件来解析请求体中的 JSON 数据。在 `/api/contact` 路由中，我们从请求体中获取表单数据，并将其存储到数据库中。如果存储成功，我们返回一个包含 `success: true` 的 JSON 响应。