[英]Posting object from React.js to PHP using Axios
I am trying to create a login form using React JS as frontend and PHP as backend.我正在尝试使用 React JS 作为前端和 PHP 作为后端创建一个登录表单。 I can't seem to figure out how to pass the form's data (email and password) to the PHP script.
我似乎无法弄清楚如何将表单的数据(电子邮件和密码)传递给 PHP 脚本。 I tried googling and all the solutions either don't work for me or are out of data.
我尝试使用谷歌搜索,但所有解决方案要么对我不起作用,要么没有数据。 I am using React v16.
我正在使用 React v16。
This is my front-end code:这是我的前端代码:
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;
And this is my backend:这是我的后端:
<?php
$data = json_decode(file_get_contents("php://input"));
echo "received data";
print_r("$data");
?>
For now, if I look at Chrome inspector, it will say Request Payload is {email: "xxx", password: "xxx"} so I know my front end is trying to send data to login.php
but I don't know how to "catch" the data sent by the front end with PHP.现在,如果我查看 Chrome 检查器,它会说Request Payload is {email: "xxx", password: "xxx"} 所以我知道我的前端正在尝试将数据发送到
login.php
但我不知道如何用PHP“捕捉”前端发送的数据。
What I intended to do is: once login.php
gets the data, it will return a JSON object of the data and the string "received data"
back to the frontend.我打算做的是:一旦
login.php
获取数据,它将返回数据的 JSON 对象和字符串"received data"
回前端。
Please help me take a look at this.请帮我看看这个。 I did research all day and still can't find a solution.
我研究了一整天,仍然找不到解决方案。
FYI, I have been trying every solution I can find online for example I tried this:仅供参考,我一直在尝试我可以在网上找到的所有解决方案,例如我试过这个:
let data = {
email,
password
}
let form = new FormData()
form.append('data', data)
Axios.post('http://localhost:80/api/login.php', form)
.then(...)
.catch(...)
and the backend will be:后端将是:
$email = $_POST['email'];
$password = $_POST['password'];
But to no avail.但无济于事。
Hi please just replace your Php code I hope you will get your response.您好,请更换您的 PHP 代码,希望您能得到您的回复。
Thanks谢谢
<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);
?>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.