我想提交一個對 php 服務器進行 ajax 呼叫的反應表單。我使用過反應鉤子，但由于我是新手，實際上我無法弄清楚錯誤。
function App() {
const [name, setName] = useState("");
const [result, setResult] = useState("");
const handleChange = (e) => {
setName(e.target.value);
};
const handleSumbit = (e) => {
e.preventDefault();
const form = $(e.target);
$.ajax({
type: "POST",
url: form.attr("action"),
data: form.serialize(),
success(data) {
setResult(data);
}
});
};
return (
<div>
<form
action="server.php"
method="post"
onSubmit={(event) => handleSumbit(event)}
>
<label htmlFor="name">Name: </label>
<input
type="text"
id="name"
name="name"
value={name}
onChange={(event) => handleChange(event)}
/>
<br />
<button type="submit">Submit</button>
</form>
<h1>{result}</h1>
</div>
);
}
const header4 = ReactDOM.createRoot(document.getElementById('header4')) ;
header4.render(<App />);
我跳過了匯入部分。上面的代碼運行沒有任何錯誤，但是當我單擊按鈕時，什么也沒有發生。
這是我的 php 代碼：
<?php
header('Access-Control-Allow-Origin: http://localhost:3000');
$user = $_POST['name'];
echo ("Hello from server: $user");
?>
uj5u.com熱心網友回復：
我驗證了您的反應代碼作業正常，如果您在任何瀏覽器的開發人員工具中檢查網路選項卡，就會有一個 POST 請求轉到 http://localhost:3000/server.php。您看不到任何事情發生的原因是此 url 可能不是您的服務器正在收聽的。如果我們不提供絕對 url，則相對路徑會導致您的請求由 http://localhost:3000/server.php 處的 react 處理，并且由于沒有資源可以處理它而出錯。要解決此問題，請將表單操作屬性更改為：
http://<serverhost>:<serverport>/server.php
這應該適用于基于 localhost 的服務器。對于生產應用程式，您可能會考慮向服務器發出 POST 請求而不是表單提交。請嘗試讓我知道這是否能解決您的問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/493652.html