[英]Sending POST with javascript
這段代碼有什么問題? 嘗試通過POST w / javascript將數據發送到PHP頁面,但它沒有發送任何內容,標題中沒有任何內容。$ _POST不包含任何內容。
HTML:
<form method="POST" id="userSub" class="userSub">
<table>
<tr><td colspan="2">Sign In Here </td></tr>
<tr><td>Username:</td><td><input name="username" type="text" id="username" /></td></tr>
<tr><td>Password:</td><td><input name="pwd" type="text" id="pwd" /></td></tr>
<tr><td><input name="submit" type="submit" value="submit" id="submit" onclick="loginSub()" /></td></tr>
<tr><td colspan="2">Need a Username? <a href="signup.html">Sign Up</a></td></tr>
</table>
</form>
使用Javascript:
function loginSub(){
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("rssnav2").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","PHP/login.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();
}
PHP現在沒有做任何特別的事情,只是看看我是否可以將帖子信息傳遞給它:
<?php
echo "test";
$username=$_POST['username'];
echo $username;
?>
IS回顯“測試”行正確,因此它與PHP頁面進行通信。 另外,我知道我仍然有“text”類型的pwd輸入,我知道在將密碼發送到服務器之前散列密碼可能是個好主意。
謝謝大家的幫助!
您沒有在XMLHttpRequest
發送參數。 就像是:
var params = "username=user&password=something";
xmlhttp.open("POST", "PHP/login.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
document.getElementById("rssnav2").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(params);
xmlhttp
實際上並不知道<form>
,因此它不會自動發送任何數據。
你需要自己收集<form>
的數據,將其格式化為URL編碼,然后將.send()
與請求一起.send()
。
function loginSub(){
var user = document.getElementById('username');
var pass = document.getElementById('pwd');
var postData = [
encodeURIComponent(user.name) + '=' + encodeURIComponent(user.value),
encodeURIComponent(pass.name) + '=' + encodeURIComponent(pass.value)
].join('&');
// ...
xmlhttp.send(postData);
}
有關更多詳細信息,您可能需要閱讀MDN的Using XMLHttpRequest ,尤其是有關使用除純 AJAX之外的部分的內容。
它包含一個通用的解決方案,用於在一個小的vanilla框架中收集<form>
數據,您可以使用它:
<form method="POST" action="PHP/login.php" onsubmit="AJAXSubmit(this); return false;">
邊注:
您的<form>
可能仍在提交,可能會中斷Ajax請求。 您可以通過取消其onsubmit
事件來防止這種情況:
<form method="POST" id="userSub" class="userSub" onsubmit="return false">
此外,還有更多方法可以提交<form>
不是單擊type="submit"
。 例如,大多數瀏覽器只需在鍵入type="text"
或type="password"
點擊Enter即可進行提交。 而且,這樣做通常不會模仿click
的的type="submit"
。
因此,您至少需要考慮將調用移出onclick
並進入onsubmit
:
<form method="POST" id="userSub" class="userSub" onsubmit="loginSub(); return false;">
嘗試改變
xmlhttp.send();
至
xmlhttp.send('username='+document.getElementById('username').value);
當然,您需要輸入驗證邏輯。
function loginSub()
{
var xmlhttp = false;
if(window.XMLHttpRequest)
{
if(typeof XMLHttpRequest != 'undefined')
{
try
{
return xmlhttp= new XMLHttpRequest();
}
catch(e)
{
return xmlhttp= false;
}
}
else if( window.ActiveXObject)
{
try
{
return xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');
}
catch(e)
{
try
{
return xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
catch(e)
{
return xmlhttp = false;
}
}
}
}
var xmlhttp=false;
xmlhttp=createobject();
if(xmlhttp)
{
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('rssnav2').innerHTML = xmlhttp.responseText;
}
}
parameter=username+'='+document.getElementById('usernname').value;
xmlhttp.open('POST','PHP/login.php',true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send(parameter);
}
}
這將解決您的問題
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.