0

感谢您阅读我的问题。

我正在使用这段代码，效果很好，但我正在尝试将按钮自定义为链接

原始码

<?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>

我的意思是如果内容是“示例”，在我单击链接后它会更改为其他内容

使用下面的回复它不会给我“找不到错误”它只是不向我显示文件中的内容

4

2 回答 2

1

问题是您的锚链接将指向 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.onreadystatechange上面的var elem的设置：

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 可以在 onreadystatechange 的功能块内部使用您想要更改的容器元素以及您的 ajax 调用的返回值（“测试”div）

然后您可以删除<form>and<input type='button ... />并将其替换为：

<a href="#" onclick="ajaxFunction('test','one.htm'); return false;">Make Ajax Call</a>
于 2013-08-16T15:24:45.543 回答
0

如果你想覆盖默认点击，a你必须记住取消默认event.preventDefault();

我不知道你是否可以使用内联符号来做到这一点，但你也可以使用return false;：

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

return false;会做event.preventDefault()and event.cancelBubble()，但它有一些问题：例如，当发生错误时，您的事件不会被取消。我建议使用 EventListener API，preventDefault()但我觉得它超出了这个问题的范围。

于 2013-08-16T15:24:39.473 回答