以下是我的ReactJS代碼
import React from 'react' /span>;
import { Component } from 'reaction;
import ReactDOM from 'react-dom'。
import './index.css';
const API_PATH = "https://localhost/testapi/contacts/myapi.php".
class Createform extends Component {
constructor（props）{
super（props）。
this.state={
Name:"", //initial state of id Name。
Class:"",
Data_sent:"False".
};
}
handleFormSubmit（event）{
event.preventDefault(); //stops the page from reloading。
// console.log(this.state)
fetch(API_PATH)
.then(response =>console.log（response）)
.then(data => console.log（data）)。
}
render() {
return(
<div className="App"/span>>
<form className="form_temp"/span>>
<label style={{marginRight: "10px"}}>姓名</label>
<input type="text" value={this.state. Name} id="Name" onChange={data => this. setState({Name: data.target.value})}></input>this.
<br/>/span>
<label style={{marginRight: "10px"}}>Class</label>
<input type="text" value={this.state. Class} id="Class" onChange={data => this. setState({Class: data.target.value})}></input>this.
< input type="submit" onClick={e => this. handleFormSubmit(e)}值="提交" />
</form>。
</div>/span>
)
}
}
ReactDOM. render(<Createform/> , document. getElementById("root") )。
下面是我的PHP rest API代碼
header('Access-Control-Allow-Origin: *'/span>)。
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")。
$rest_json = file_get_contents("php://input"/span>)。
$data = json_decode（$rest_json）。
if（$data）{
echo json_encode(array("status" => "Success") )。
}
else{
echo json_encode(array("status" => "Failed") )。
}
當我在ReactJS網頁上按下提交按鈕時，我得到了{"status": "failed"}作為JSON回應，我不知道為什么當提交按鈕被按下時，表單資料沒有進入到PHP API。
我只從......
得到回應。echo json_encode(array("status"/span> => "Failed"））。)
...上述陳述句，但我需要的是{"status": "success"}回應。
uj5u.com熱心網友回復：
你沒有在你的請求中發送任何body，這意味著你也不會收到任何body，這意味著if ($data)將永遠不會被滿足。
你似乎希望表單資料在請求中以JSON體的形式被發送。這不是自動發生的事情，你必須自己去做。
看看FormData。你可以用一個表單初始化它，它將從欄位中獲取值。然后您可以使用entries和Object.fromEntries或通過手動迭代將這些值轉換為一個物件。
然后你可以在你的fetch呼叫中發送資料。
const formData = new FormData(theForm)
const formDataObject = Object.fromEntries(formData.entries))
fetch(API_PATH, {
method: 'POST'。
body: JSON.stringify（formDataObject）。
headers: {
'Content-Type': 'application/json; charset=UTF-8'。
}
}).then( ... )
注意，這里我指的是一個變數theForm，它必須是對<form>元素的一個參考。如果你想改變你的監聽器來監聽表單的submit事件而不是按鈕的click事件，你可以在這里簡單地使用event.target。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/309948.html
標籤：