我的 html 代码:
<h2>Please finalize your details</h2>
<form id="details" method="post" class="form">
Full name: <strong name="name_1">ABCDEF</strong><br><br>
ID No:<strong name="org_number_1">123</strong><br><br>
Mobile No:<strong name="ph_number_1"">1234567890</strong><br><br>
E-mail: <strong name="email_1">ABC@DEF.COM</strong><br><br>
ID Card: <img src="profile.png" alt="preview" name="image" style="width: 100px; height: 100px;"><br><br>
<button id="go">It's correct</button>
</form>
我的 JavaScript:
document.getElementById('go').addEventListener('click', submit);
function submit(){
var nme=document.getElementsByName("name_1")[0].innerHTML;
var id=document.getElementsByName("org_number_1")[0].innerHTML;
var phone=document.getElementsByName("ph_number_1")[0].innerHTML;
var email=document.getElementsByName("email_1")[0].innerHTML;
var img=document.getElementsByName("image")[0].src;
const xhr=new XMLHttpRequest();
xhr.onload=function(){
const serverResponse=document.getElementById("response");
serverResponse.innerHTML=this.responseText;
};
xhr.open("POST", "database_registration.php");
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("name="+nme+"&id="+id+"&phone="+phone+"&email="+email+"&img="+img); //this line throws the error "Failed to load resource: the server responded with a status of 405 (Method Not Allowed)"
}
我正在 Visual Studio Code 编辑器中执行我的代码,我的项目位置在:
<块引用>C:\Users\Abhishek\Desktop\Web-dev stuff\XAMPP\htdocs\Stack hack 20 20
这是错误:
不仅如此,我还尝试使用 Fetch API,但它也会引发相同的错误。现在我该怎么做?我怎样才能让它工作?
答案 0 :(得分:1)
错误不在来自服务器的 JS 中。 database_registration.php
中有什么?如果这没有处理 POST
,那么我希望服务器返回 405
。
404
表示 database_registration.php
不存在,但 405
表示它存在,但不允许 POST
特别存在。检查响应中的 allow
标头以了解支持的方法。
试试:
xhr.open("GET", "database_registration.php?" +
"name="+nme+"&id="+id+"&phone="+phone+"&email="+email+"&img="+img);
xhr.send();
改为发出 GET
请求。
或者,这可能是解析发布的内容时出错(误报,因为它应该是 400
或可能是 406
),请尝试删除正文的一部分,看看它是否适用于子集。< /p>
答案 1 :(得分:0)
我已经为您完成了第一个复选框(ID 号)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cafteria details</title>
<style>
#special{
height: 100px;
width: 100px;
border: 1px solid;
display: none;
}
</style>
</head>
<body>
<h2>Cafeteria registration</h2>
<form class="details">
Full name: <input type="text" placeholder="Please avoid any kind of prefixes" id="name" size=25><br><br>
Organization:<div id="org"><input onclick="myFunction()" type="checkbox" id="cb1">ID no: <input type="number" id="org_number"><br><br>
<input type="checkbox" id="cb2">Mobile No: <input type="tel" id="ph_number"></div><br><br>
E-mail: <input type="email" id="email" size=25><br><br>
Upload ID Card: <input type="file" name="id" accept=".pdf,.jpeg" id="img"><br><br>
</form>
<div id ="special">
</div>
<button id="button">Register</button>
</body>
<script>
function myFunction() {
var x = document.getElementById("cb1").checked;
if (x == true) {
document.getElementById("special").style.display="block";
}else{
document.getElementById("special").style.display="none";
}
}
// var x = document.getElementById("cb1").checked;
// if (x==true){
// document.getElementById("special").style.display="block";
// console.log(true)
// }
// if (document.getElementById("cb2").checked==true){
// document.getElementById("special").style.display="block";
// console.log(false)
// }
</script>
</html>
答案 2 :(得分:0)
您的代码看起来不错。如果您使用 Live Server vscode 扩展程序运行您的代码,则这是一个已知的 issue(和 here)扩展程序。
您可以尝试按照上面链接中的建议更改 Live Server 扩展上的端口号设置,但最好的办法是停止使用 Live Server 来运行此代码。
只需启动 XAMPP 并在浏览器中导航到正确的 url(请注意,您必须将项目文件夹名称中的空格消除为 stack-hack-20-20 之类的内容)。
编辑:其他一些 vscode 扩展似乎也是这种情况。当您尝试到达端点时,您会收到 405 状态。使用 GET、HEAD 或 OPTIONS http 方法存在一些限制,因此您要么使用其中一种方法访问端点,要么使用 XAMPP 等网络服务器进行 POST、DELETE 等。
答案 3 :(得分:0)
我同意@Keith 的观点,此错误代码通常表示服务器不允许您使用的请求方法,但我看到并非所有开发人员在每种情况下都使用正确的错误代码。
我怀疑您提交的数据在后端可能存在解析问题,因为它在发送之前没有经过 URI 编码。
试试这个 JavaScript,看看你是否得到不同的结果:
document.getElementById('go').addEventListener('click', submit);
function submit() {
const formData = new FormData();
formData.append("name", document.getElementsByName("name_1")[0].innerHTML);
formData.append("id", document.getElementsByName("org_number_1")[0].innerHTML);
formData.append("phone", document.getElementsByName("ph_number_1")[0].innerHTML);
formData.append("email", document.getElementsByName("email_1")[0].innerHTML);
formData.append("img", document.getElementsByName("image")[0].src);
const xhr = new XMLHttpRequest();
xhr.onload = function() {
const serverResponse = document.getElementById("response");
serverResponse.innerHTML = this.responseText;
};
xhr.open("POST", "database_registration.php");
xhr.send(formData);
}
答案 4 :(得分:0)