Для того, чтобы отправить два разных POST-запроса из двух разных форм в две разные таблицы в базе данных, вам потребуется использовать комбинацию React, PHP и SQL.
1. Создайте две разные формы в вашем React-компоненте. У каждой формы должен быть собственный набор полей ввода.
Пример:
import React, { useState } from 'react'; const MyComponent = () => { const [form1, setForm1] = useState({ field1: '', field2: '' }); const [form2, setForm2] = useState({ field3: '', field4: '' }); const handleForm1Submit = (e) => { e.preventDefault(); // отправить POST-запрос для формы 1 fetch('/api/form1', { method: 'POST', body: JSON.stringify(form1), }) .then((response) => response.json()) .then((data) => { // действия после успешной отправки }) .catch((error) => { // обработка ошибок }); }; const handleForm2Submit = (e) => { e.preventDefault(); // отправить POST-запрос для формы 2 fetch('/api/form2', { method: 'POST', body: JSON.stringify(form2), }) .then((response) => response.json()) .then((data) => { // действия после успешной отправки }) .catch((error) => { // обработка ошибок }); }; return ( <div> <form onSubmit={handleForm1Submit}> // поля формы 1 <input type="text" value={form1.field1} onChange={(e) => setForm1({ ...form1, field1: e.target.value })} /> <input type="text" value={form1.field2} onChange={(e) => setForm1({ ...form1, field2: e.target.value })} /> <button type="submit">Отправить форму 1</button> </form> <form onSubmit={handleForm2Submit}> // поля формы 2 <input type="text" value={form2.field3} onChange={(e) => setForm2({ ...form2, field3: e.target.value })} /> <input type="text" value={form2.field4} onChange={(e) => setForm2({ ...form2, field4: e.target.value })} /> <button type="submit">Отправить форму 2</button> </form> </div> ); }; export default MyComponent;
2. На стороне сервера (backend) вам потребуется обработать эти два POST-запроса в PHP. Напишите обработчик для каждого запроса и выполните вставку данных в соответствующие таблицы базы данных.
Пример:
<?php // Обработчик для формы 1 if ($_SERVER['REQUEST_METHOD'] === 'POST' && $_SERVER['REQUEST_URI'] === '/api/form1') { $data = json_decode(file_get_contents('php://input'), true); // Подключение к базе данных $conn = new mysqli('localhost', 'username', 'password', 'database'); // Подготовка и выполнение запроса на вставку данных в таблицу 1 $stmt = $conn->prepare("INSERT INTO table1 (field1, field2) VALUES (?, ?)"); $stmt->bind_param('ss', $data['field1'], $data['field2']); $stmt->execute(); // Закрытие соединения с базой данных $stmt->close(); $conn->close(); // Отправка ответа об успешной вставке echo json_encode(['success' => true]); exit; } // Обработчик для формы 2 if ($_SERVER['REQUEST_METHOD'] === 'POST' && $_SERVER['REQUEST_URI'] === '/api/form2') { $data = json_decode(file_get_contents('php://input'), true); // Подключение к базе данных $conn = new mysqli('localhost', 'username', 'password', 'database'); // Подготовка и выполнение запроса на вставку данных в таблицу 2 $stmt = $conn->prepare("INSERT INTO table2 (field3, field4) VALUES (?, ?)"); $stmt->bind_param('ss', $data['field3'], $data['field4']); $stmt->execute(); // Закрытие соединения с базой данных $stmt->close(); $conn->close(); // Отправка ответа об успешной вставке echo json_encode(['success' => true]); exit; } // Возвращение ошибки в случае неправильных путей запросов http_response_code(404); echo json_encode(['error' => 'Not found']); ?>
Обратите внимание, что в приведенных примерах я использую fetch API для отправки POST-запросов из React-компонента в PHP скрипт. Вам также потребуется настроить соответствующие пути в файле .htaccess
или настроить сервер, чтобы обращение к /api/form1
и /api/form2
перенаправлялось на ваш PHP-скрипт.
Таким образом, вы сможете отправить POST-запросы из разных форм в две разные таблицы базы данных с использованием React, PHP и SQL.