試圖將ajax按鈕更改爲一個php（html）鏈接

我工作蒙山這個peice的代碼和它的作品很好，但我試圖自定義按鈕，進入鏈接

origanl代碼

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>An XHTML 1.0 Strict standard template</title> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <meta http-equiv="Content-Style-Type" content="text/css" /> 
    <style type="text/css"> 

    </style> 
    <script type="text/javascript"> 
    function ajaxFunction(id, url){ 
     var xmlHttp; 
     try {// Firefox, Opera 8.0+, Safari 
      xmlHttp = new XMLHttpRequest();  
     } catch (e) {// Internet Explorer 
      try { 
       xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 
      } catch (e) { 
       try { 
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
       } catch (e) { 
        alert("Your browser does not support AJAX!"); 
        return false; 
       } 
      } 
     } 

     xmlHttp.onreadystatechange = function(){ 
      if (xmlHttp.readyState == 4) { 
       //Get the response from the server and extract the section that comes in the body section of the second html page avoid inserting the header part of the second page in your first page's element 
       var respText = xmlHttp.responseText.split('<body>'); 
       elem.innerHTML = respText[1].split('</body>')[0]; 
      } 
     } 

     var elem = document.getElementById(id); 
     if (!elem) { 
      alert('The element with the passed ID doesn\'t exists in your page'); 
      return; 
     } 

     xmlHttp.open("GET", url, true); 
     xmlHttp.send(null); 
    }  
</script> 
</head> 

<body> 
    <div id="test"></div> 
    <form> 
     <input type="button" value="Make Ajax Call" id="ajax" onclick="ajaxFunction('test','one.htm');"/> 
    </form> 
</body> 
</html>

我試圖轉換

<input type="button" value="Make Ajax Call" id="ajax" onclick="ajaxFunction('test','one.htm');"/>

部分鏈接而不是按鈕做同樣的工作。

我該怎麼做？

我曾嘗試以下

<a href="test3.php" value="Make Ajax Call" id="ajax" onclick="ajaxFunction('test','one.htm');">xxx</a>

也是我正在想的內容在div改變

<div id="test"></div>

我的意思是，如果內容是「榜樣」後，我點擊鏈接它會更改爲其他內容

與replie下面它不給我一個「不能找到錯誤」它只是不顯示我的文件中的內容

來源

2013-08-16 Rick Skeels

如果要覆蓋甚至一個a默認點擊你必須記住取消默認與event.preventDefault();

我不知道你是否能與在線符號做，但你可以使用return false;還有：

onclick="ajaxFunction('test','one.htm'); return false;"

return false;會做event.preventDefault()和event.cancelBubble()，但它也存在一些問題：例如當發生錯誤的事件不會被取消。我推薦使用EventListener API和preventDefault()，但我覺得這不在這個問題的範圍之內。

來源

2013-08-16 15:24:39 Halcyon

問題是你的錨鏈接會去test3.php阻止JavaScript運行。

你可以做兩件事情：

變化href='test3.php'到href='#'

或更改onclick="ajaxFunction('test','one.htm');"到onclick="ajaxFunction('test','one.htm'); return false;"

也動

var elem = document.getElementById(id);

在onreadystate函數之上，當試圖爲div設置innerHTML時，存在elem的問題未定義。

因此，首先交換上述xmlHttp var elem的設置。onreadystatechange的：

var elem = document.getElementById(id); 
if (!elem) { 
    alert('The element with the passed ID doesn\'t exists in your page'); 
    return; 
} 

xmlHttp.onreadystatechange = function(){ 
    if (xmlHttp.readyState == 4) { 
     //Get the response from the server and extract the section that comes in the body section of the second html page avoid inserting the header part of the second page in your first page's element 
     var respText = xmlHttp.responseText.split('<body>'); 
     elem.innerHTML = respText[1].split('</body>')[0]; 
    } 
}

這使得它如此ELEM是你想從你的Ajax調用（「測試」的div）

的返回值來改變容器的元素的onreadystatechange的功能塊的內部觸及

然後你就可以刪除<form>和<input type='button ... />並將其替換爲：

<a href="#" onclick="ajaxFunction('test','one.htm'); return false;">Make Ajax Call</a>

來源

2013-08-16 15:24:45 crowebird

這就是偉大的:)我就在div作爲默認內容問題的第二部分的任何想法？ –

查看答案修訂 – crowebird

請用正確的代碼更新我的問題，我仍然不能得到這個工作:(大聲笑 –

試圖將ajax按鈕更改爲一個php（html）鏈接

回答

相關問題