Question

我正在尝试使用React JS作为前端和PHP作为后端来创建登录表单。我似乎无法弄清楚如何将表单的数据（电子邮件和密码）传递给PHP脚本。我尝试使用Google搜索，但所有解决方案都不适合我或没有数据。我正在使用React v16。

这是我的前端代码：

import React, { useState } from 'react';

// libraries
import { Col, 
          Button, 
          Form, 
          FormGroup, 
          Label, 
          Input} from 'reactstrap';
import Axios from 'axios'          


const App = () => {

  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const submit = () => {
    Axios({
      method: 'POST',
      url: 'http://localhost:80/api/login.php',
      headers: {
        'Content-Type': 'application/json',
      },
      data: {
        email,
        password
      }
    })
    .then((response) => {
      console.log(response)
    })
    .catch((error) => {
      console.log(error)
    })
  }

  return (
    <div>

      <Form>
        <FormGroup row>
          <Label for="exampleEmail" sm={2}>Email</Label>
          <Col sm={10}>
            <Input value={email} onChange={e => setEmail(e.target.value)} type="email" name="email" placeholder="email" />
          </Col>
        </FormGroup>

        <FormGroup row>
          <Label for="examplePassword" sm={2}>Password</Label>
          <Col sm={10}>
            <Input value={password} onChange={e => setPassword(e.target.value)} type="password" name="password" placeholder="password" />
          </Col>
        </FormGroup>

        <FormGroup check row>
          <Col sm={{ size: 10, offset: 2 }}>
            <Button onClick={submit}>Submit</Button>
          </Col>
        </FormGroup>
      </Form>

    </div>
  );
}

export default App;

这是我的后端：

<?php

$data = json_decode(file_get_contents("php://input"));
echo "received data";
print_r("$data");

?>

就目前而言，如果我查看Chrome检查器，它会说 Request Payload （请求有效载荷）为{电子邮件：“ xxx”，密码：“ xxx”}，所以我知道前端正在尝试发送数据到login.php，但我不知道如何使用PHP“捕获”前端发送的数据。

我打算做的是：一旦login.php获取数据，它将返回数据的JSON对象和字符串"received data"回到前端。

请帮助我看看这个。我整天都在研究，但仍然找不到解决方法。

仅供参考，例如，我一直在尝试可以在网上找到的所有解决方案：

let data = {
      email,
      password
    }

let form = new FormData()
form.append('data', data)

Axios.post('http://localhost:80/api/login.php', form)
.then(...)
.catch(...)

，后端将是：

$email = $_POST['email'];
$password = $_POST['password'];

但无济于事。

Answer 1

您好，请替换您的Php代码，希望您能收到答复。

谢谢

<php
    header('Access-Control-Allow-Origin: *');
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
    header("Access-Control-Allow-Headers: Content-Disposition, Content-Type, Content-Length, Accept-Encoding");
    header("Content-type:application/json");
    $data = json_decode(file_get_contents("php://input"));
    echo "received data";
    print_r($data);
?>

使用Axios将对象从React.js发布到PHP

1 个答案: