AJAX - 使用JavaScript的XMLHttpRequest和PHP

檢索數據我想使用AJAX 一個形式上使用戶不必離開當前頁面提交自己的名字。當用戶鍵入他們的名字時，我已經有了這個功能。它會在輸入時自動更改。我正在努力的是onClick提交名稱。我沒有收到PHP文件的任何迴應，我不知道爲什麼。這裏是我的代碼：AJAX - 使用JavaScript的XMLHttpRequest和PHP

的表單頁面：（提交操作通過一個全局變量通過GET請求發送名稱）

<script type="text/javascript"> 

//Decalre the variables of name as Global variable 
var name; 

    //For IE 5 + 6 
function httpReq(){ 
    if (window.XMLHttpRequest) { 
     // code for IE7+, Firefox, Chrome, Opera, Safari 
     return xmlhttp=new XMLHttpRequest(); 
    } else { 
     // code for IE6, IE5 
     return xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
} 

function nameTest(str) { 
    if (str.length==0) { 
     document.getElementById("nameTest").innerHTML="Please enter your name."; 
     return; 
    } 
    httpReq(); 
    xmlhttp.onreadystatechange=function() { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
      document.getElementById("nameTest").innerHTML=xmlhttp.responseText; 
     } 
    } 
    xmlhttp.open("GET","nameTest.php?q="+str,true); 
    xmlhttp.send(); 
    return name = str; 
} 


// function to submit the users details to the database 
function submit(str) { 
    httpReq(); 
    xmlhttp.onreadystatechange=function() { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
      document.getElementById("submitted").innerHTML=xmlhttp.responseText; 
     } 
    } 
    xmlhttp.open("GET","mailing-list.php?name="+name, true); 
    xmlhttp.send(); 
} 
</script> 

    Name: <input type="text" onkeyup="nameTest(this.value)"> 
    <span id="nameTest">Please enter your name.</span> 
      <input style="width: 100px; height: 40px;" type="button" onclick="submit" value="Join!"> 
     <span id="submitted"></span>

的PHP頁面不作迴應（只回應一些簡單的事情，直到我得到一個迴應）：

<?php 

$name = $_GET["name"]; 

echo "Hello There " + $name; 

?>

似乎無法弄清楚爲什麼沒有響應。任何幫助感謝！

來源

2013-05-13 Luke Turnbull

你'httpReq'是沒有意義的，你這是新的對象，但你真的只是創建一個新的全局變量' xmlhttp'。我希望你不打算同時撥打多個電話。 – epascarello 2013-05-13 13:30:29

在PHP中，你使用'$ _GET [「name」]'，但是你使用的JavaScript的關鍵是'q'：？「q =」+ str' – Ian 2013-05-13 13:31:52

@epascarello httpReq只是在舊IE版本和其他瀏覽器在一個函數中拉出來，所以我不會這樣做幾次，我敢肯定這不是問題，因爲nameTest部分工作正常。 – 2013-05-14 09:12:04

var name; 

    //For IE 5 + 6 
function httpReq(){ 
    if (window.XMLHttpRequest) { 
     // code for IE7+, Firefox, Chrome, Opera, Safari 
     return new XMLHttpRequest(); 
    } else { 
     // code for IE6, IE5 
     return new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
} 

function nameTest(str) { 
    if (str.length==0) { 
     document.getElementById("nameTest").innerHTML="Please enter your name."; 
     return; 
    } 
    var xmlhttp = httpReq(); 
    xmlhttp.onreadystatechange=function() { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
      document.getElementById("nameTest").innerHTML=xmlhttp.responseText; 
     } 
    } 
    xmlhttp.open("GET","nameTest.php?name="+str,true); 
    xmlhttp.send(); 
    window.name = str; 
} 


// function to submit the users details to the database 
function submit() { 
    var xmlhttp = httpReq(); 
    xmlhttp.onreadystatechange=function() { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
      document.getElementById("submitted").innerHTML=xmlhttp.responseText; 
     } 
    } 
    xmlhttp.open("GET","mailing-list.php?name="+window.name, true); 
    xmlhttp.send(); 
}

您還沒有爲xmlhttp賦值，可能是控制檯告訴您它未定義，您應該檢查它。對不起，你的代碼中有很多錯誤。我編輯它，你現在應該嘗試。 submit（）不會得到參數，它只是從全局變量名（window.name）中獲取名稱，該名稱由函數nameTest（str）設置。

最後一件事：你應該檢查你想要的客戶端和服務器端之間的兼容性。您在查詢字符串中使用了「？q =」而不是「？name =」，請注意這些事情！

來源

2013-05-13 13:30:26

對不起，我沒有指定，它的submit（）函數不起作用，我只顯示了nameTest函數，因爲那是我獲得變量的地方提交函數的名稱值 – 2013-05-14 09:15:17

所以你想nameTest「保存」將由submit（）用來檢索數據的名稱？ – 2013-05-14 14:22:04

函數submit（str）中的值「name」未知，因此爲空。改成

xmlhttp.open（「GET」，「mailing-list.php？name =」+ str，true）;

，並調用你的函數是這樣的：

submit("NameToShow");

BTW：使用jQuery將使這個很多更容易爲你。

來源

2013-05-13 13:31:34 Borniet

根據LightStyle，您應該使用返回的httpReq()方法來檢索您的requestObject。

var xmlhttp = httpReq(); 
    xmlhttp.onreadystatechange=function() {...}

您必須修改 onclick="submit" 到onclick="submit();"讓它叫。

這PHP腳本將返回0，連接操作符是PHP .：

<?php 
$name = $_GET["name"]; 
echo "Hello There " . $name; 
?>

來源

2013-05-13 13:49:32 Marcassin

AJAX - 使用JavaScript的XMLHttpRequest和PHP

回答

相關問題