使用Ajax更改div onclick的內容

Question

我想在單擊圖像時將名爲john的div的內容更改爲php文件的輸出。我確定這很簡單，但我找不到適合的例子。這裏是我的代碼：

function ajaxFunction(){ 
       var ajaxRequest; 
        ajaxRequest = new XMLHttpRequest(); 
       ajaxRequest.onreadystatechange = function(){ 
        if(ajaxRequest.readyState == 4){ 
         document.getElementById("john").innerHTML=xmlhttp.responseText; 
        } 
       } 
       ajaxRequest.open("GET", "test.php", true); 
       ajaxRequest.send(null); 
      } 

HTML

<img class='cross' src='images/cross.png' onclick="ajaxFunction();"> 
<div id='john'>john</div> 

test.php的

<?php echo "hello"; ?> 

Answer 1

我已經設法用下面的代碼來解決它。這段代碼還會從php文件中獲取「hello」之後返回元素的ID。

<script language="javascript"> 
      function calldislike(str){ 
       if (str==""){ 
        document.getElementById("john").innerHTML=""; 
        return; 
        } 
       xmlhttp=new XMLHttpRequest(); 
       xmlhttp.onreadystatechange=function(){ 
        if (xmlhttp.readyState==4 && xmlhttp.status==200){ 
        document.getElementById("john").innerHTML=xmlhttp.responseText; 
        } 
       } 
       xmlhttp.open("GET","test.php?q="+str,true); 
       xmlhttp.send(); 
      } 
     </script> 

<img src='images/cross.png' onclick="calldislike(this.id);" id='3'> 
<div id='john'>john</div> 

test.php的

<?php echo "hello".$_GET["q"]; ?> 

Answer 2

在我看來就像你有你的JavaScript語法錯誤。你試圖從xmlhttp的responseText但你XMLHttpRequest存儲在ajaxRequest

試試這個

function ajaxFunction(){ 
    var ajaxRequest = new XMLHttpRequest(); 
    ajaxRequest.onreadystatechange = function(){ 
     if(ajaxRequest.readyState == 4 && ajaxRequest.status==200){ 
       document.getElementById("john").innerHTML=ajaxRequest.responseText; 
      } 
     } 
    ajaxRequest.open("GET", "test.php", true); 
    ajaxRequest.send(); 
} 

Answer 3

我可能會建議對跨瀏覽器/版本，使用：

var ajaxRequest = getXMLHttpRequest(); 

然後，

function getXMLHttpRequest() { 
    var re = "nothing"; 
    try {re = new window.XMLHttpRequest();} catch(e1) {}; 
    try {re = new ActiveXObject("MSXML2.XMLHTTP.4.0");} catch(e) {}; 
    try {re = new ActiveXObject("Msxml2.XMLHTTP");} catch(e2) {}; 
    try {re = new ActiveXObject("Microsoft.XMLHTTP");} catch(e3) {}; 
    try {re = new ActiveXObject("MSXML2.XMLHTTP.3.0");} catch(ex) {}; 
    if (re != "nothing") {return re;} 
    else {return null;}; 
}; 

以及chan把它彈到

ajaxRequest.responseText();