此问题在此处已有答案：
PHP header() doesnt redirects after ajax is called（3个答案）
昨天就关门了。
我遇到了PHP头文件的问题（标题（“位置：......”））与HTML表单和Axios结合使用。当使用Axios发布表单数据时会出现这个问题。在我的PHP脚本中，我有一个if条件来检查表单输入是否为空。当我的上传按钮的类型设置为“button”并且我填充了所有输入时，一切都运行得很顺利，并将数据成功存储到数据库中。
然而，当我将一个或多个输入留空时，数据库中没有插入任何内容，URL也不会像预期的那样更改为“index.php？empty”。奇怪的是，当按钮类型更改为“submit”时，我选择了一个图像，但没有填充文本输入，URL会正确更改为“index.php？empty”。然而，如果我在不选择图像的情况下填充文本输入，则URL将变为“direct.php”，并且只有文本数据（不包括图像）被存储在数据库中。
PHP头文件（“Location：...”）在这个场景中似乎没有按预期的方式工作。如果有任何解决这个问题的建议或解决方案，我们将不胜感激。感谢大家的宝贵时间。（注意，我使用的是两个库axios和compressorjs）
<body>
<form action="direct.php" method="post" enctype="multipart/form-data">
<div class="mainimg">
<input type="file" id="file" accept="image/*" name="file" onchange="compressImg()">
</div>
<div class="test">
<input type="text" name="test">
</div>
<button type="button" onclick="uploadData()">Upload</button>
</form>
<script src="compressorjs-main/dist/compressor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.3/axios.min.js"></script>
<script>
let formData;
function compressImg() {
const fileInput = document.getElementById('file');
const file = fileInput.files[0];
if (!file) {
return;
}
new Compressor(file, {
quality: 0.6,
maxWidth: 700,
maxHeight: 700,
success(result) {
formData = new FormData();
console.log('Original Size:', file.size);
console.log('Compressed Size:', result.size);
console.log("Image name after compression", result.name);
formData.delete('file');
formData.append('file', result, result.name);
},
error(err) {
console.log(err.message);
},
});
}
function uploadData() {
if (formData) {
formData.append('test', document.querySelector('[name="test"]').value);
axios.post('direct.php', formData).then(() => {
console.log('Upload success');
console.log(formData);
});
} else {
console.log('No data to upload');
}
}个字符
1条答案
按热度按时间nwo49xxi1#
URL没有按预期更改为“index.php？empty”
.不，这不是预期的。异步AJAX请求（这是您的Axios正在做的）不会自动读取服务器端的Location标头并向指定的URL发出请求。然而，如果您发出非AJAX请求（例如通过提交表单或单击链接），则浏览器将自动跟随响应中的任何Location标头。
那么为什么Axios/AJAX请求不自动跟随链接呢？这是因为这样的请求被设计为异步的，并在后台运行，使程序员能够保持浏览器在同一页面上，同时仍然与服务器通信。（在AJAX发明之前，对服务器的每个请求都必须涉及页面的完全刷新，这通常会导致较差的用户体验，和/或更复杂的代码库以处理特定功能）。
如果您想在某些情况下在这样的异步请求之后将用户导航到新URL，那么简单的解决方案是在异步请求完成后运行的回调中使用JavaScript完成。
在你的例子中，你需要PHP向客户端指出验证失败，这样它才能采取适当的行动。因此你可以写这样的代码：
字符串
然后在JavaScript中：
型