[英]AJAX POST to PHP without JQuery
我有一個PHP作業,我決定嘗試添加AJAX,因為在我們的課程中,我們將不會學習僅PHP的AJAX。 我似乎無法獲得工作上的回應。 但是,在Fire Fox上控制台的網絡部分中,我可以找到POST發送,其中包含我在表單中輸入的值以及php函數正常工作時產生的PHP回聲。 但是,它不會顯示在我的div標簽中。 謝謝您的任何幫助。
這是HTML和JavaScript:
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function testPass() {
var username = document.getElementById("uname").value;
var passwrd = document.getElementById("passwd").value;
var creds = "uname="+username+"&passwd="+passwrd;
var ajx = new XMLHttpRequest();
ajx.onreadystatechagne = function () {
if (ajx.readyState == 4 && ajx.status == 200) {
document.getElementById("message").innerHTML = ajx.responseText;
}
};
ajx.open("POST", "authenticate.php", true);
ajx.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajx.send(creds);
//document.getElementById("message").innerHTML = creds;
}
</script>
</head>
<body>
<p>
<form id="login">
<strong>Login</strong><br/><br/>
Username :<br/><input type="text" id="uname"><br/>
Password :<br/><input type="text" id="passwd"><br/><br/>
<div id="message" style="color:red;"></div>
<br/><button type="button" value="Submit" onclick="testPass();">Sign In</button>
</form>
</p>
</body>
</html>
這是PHP:
<?php
$uname = $_POST['uname'];
$passwd = $_POST['passwd'];
if (empty($uname) && empty($passwd)) {
echo "The username and password are required!";
} else if (empty($uname)) {
echo "The username is required!";
} else if (empty($passwd)) {
echo "The password is required!";
} else {
echo "It works!";
} ?>
嘗試盡可能多地使用函數,以使代碼可重用並且更易於排除故障。 我建議以下代碼。
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function createAjaxRequestObject() {
var xmlhttp;
if(window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// Create the object
return xmlhttp;
}
function AjaxPost(ajaxURL, parameters, onComplete) {
var http3 = createAjaxRequestObject();
http3.onreadystatechange = function() {
if(http3.readyState == 4) {
if(http3.status == 200) {
if(onComplete) {
onComplete(http3.responseText);
}
}
}
};
// Create parameter string
var parameterString = "";
var isFirst = true;
for(var index in parameters) {
if(!isFirst) {
parameterString += "&";
}
parameterString += encodeURIComponent(index) + "=" + encodeURIComponent(parameters[index]);
isFirst = false;
}
// Make request
http3.open("POST", ajaxURL, true);
http3.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http3.send(parameterString);
}
function completedAJAX(response) {
alert(response);
}
function testPass() {
var parameters = {
"uname" : document.getElementById("uname").value,
"passwd" : document.getElementById("passwd").value
};
AjaxPost("authenticate.php", parameters, completedAJAX);
}
</script>
</head>
<body>
<p>
<form id="login">
<strong>Login</strong><br/><br/>
Username :<br/><input type="text" name="uname" id="uname" /><br/>
Password :<br/><input type="password" name="passwd" id="passwd" /><br/><br/>
<div id="message" style="color:red;"></div>
<br/><button type="button" value="Submit" onclick="testPass();">Sign In</button>
</form>
</p>
</body>
</html>
另一個提示是,如果您在測試某些腳本時使用Firefox或Chrome中的開發人員工具(按CTRL + SHIFT + J),請使用Firebug。 該錯誤會在控制台中彈出,您將立即注意到該錯誤。
您有一個錯字: ajx.onreadystatechagne
應該是ajx.onreadystatechange
我想您已經解決了,但是這里是解決方案ajx.onreadystatechagne
應該
ajx.onreadystatechange
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.