我看过几个关于这个问题的帖子,但没有一个能解决我的问题。我正在使用XAMPP,在同一个文件夹中有一个htmlindex.html
和一个phpremote.php
。
我要发送给php的FormData
是使用JavaScript中的表单(basic_form
)创建的。由于console.log(...formdata);
按预期打印了Array[“mode”,“basic”],Array[“File”,File]
,它们是字符串和输入文件,因此构造良好。
但不幸的是,在php中,命令print_r($_post);
只输出array()
,命令var_dump($_post);
也输出array(0){}
。因此表单的内容似乎没有传递给PHP。
这里是html表单:
<body>
<div>
<form name="basic_form" enctype="multipart/form-data" action="remote.php" method="post">
<input type="text" id="mode" name="mode" value="basic"/>
<input type="file" id="file" name="file"/>
<input type="submit" id="submit_basic_input" name="submit_basic_input" value="Submit"/>
</form>
</div>
</body>
这里是提交表单的javascript:
<script>
var basic_form = document.forms["basic_form"];
basic_form.addEventListener('submit', e => {
e.preventDefault();
const url = 'remote.php';
const formData = new FormData(basic_form);
fetch(url, {
method: 'POST',
body: formData
}).then(response => {
console.log(response);
if(response["status"] == 200)
location.replace(response["url"]);
});
});
</script>
这里的php打印内容的表单:
<?php
var_dump($_POST);
$datapost = $_POST;
print_r($datapost);
print($datapost["mode"]);
?>
首先,调用fetch
,它发出POST请求
当您得到一个响应时,您将记录响应对象(它不包含任何有用的东西,特别是响应的主体将显示为可读流而不是字符串)。
该响应确实显示数组(1){[“mode”]=>string(5)“basic”}数组([mode]=>basic)basic
不过,您可以使用浏览器开发人员工具的“网络”选项卡看到它。
记录响应后,您设置location.replace(response[“URL”]);
,它发出GET请求(指向同一URL)并将浏览器导航到该请求。
GET请求是一个不同的请求,并且没有来自它的POST请求的请求体。
由于这是一个不同的请求,它得到了不同的响应,现在$_post
是一个空数组。
如果您想导航到响应,那么就去掉JavaScript。只需使用表单发出POST请求,并让浏览器呈现结果页面。
如果您想使用Ajax发出请求,那么:
response.text()
将数据从响应正文中取出,然后可能使用createElement
、appendChild
和friends将数据添加到当前文档)