Проводка объекта из React. js в PHP с использованием Axios - PullRequest
Новая
       3

Проводка объекта из React. js в PHP с использованием Axios

1 голос
/ 20 марта 2020

Я пытаюсь создать форму входа, используя 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 is {email: "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'];

но безрезультатно.

1 Ответ

1 голос
/ 20 марта 2020

Привет, пожалуйста, просто замените код 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);
?>
...