试图将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）链接

回答

相关问题