0

我正在尝试根据我单击的链接更改 div 'test' 中的内容并转到原始文本所在的位置

<?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">THIS SHOULD CHANGE</div>
        <a href="#" value="Make Ajax Call" id="ajax" onclick="ajaxFunction('test','example.html'); return false;">link1</a>

a href="#" value="Make Ajax Call" id="ajax" onclick="ajaxFunction('test','example2.html'); return false;">link2</a>

    </body>
</html>

div是我想改变的是这个

 <div id="test">THIS SHOULD CHANGE</div>

我使用的链接是这些

<a href="#" value="Make Ajax Call" id="ajax" onclick="ajaxFunction('test','example.html'); return false;">link1</a>

<a href="#" value="Make Ajax Call" id="ajax" onclick="ajaxFunction('test','example2.html'); return false;">link2</a>

对此有什么想法吗？因为这让我头疼

我正在使用名为 menu 的单独 php 文件中的链接并将其包含在

<?php include 'menu.php'; ?>

这会有所不同吗？

如果我重命名一个 html 文件，我会收到一条错误消息，说它找不到，但除此之外没有任何显示正确时

！！！更新！！！

好的，如果我更改链接文本

<a href="#" value="Make Ajax Call" id="ajax" onclick="ajaxFunction('test','example.html'); return false;">link1</a>

对此

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

它工作正常，但看起来真的很糟糕，所以有没有更好的方法来更改链接？

4

2 回答 2

2

如果您尝试根据单击的链接将外部内容加载到 div 中？然后，您可以尝试以下方法。它基本上是你所拥有的精简版，对我来说很好用。

<script type="text/javascript">
    function loadiv(temp){
      var req = new XMLHttpRequest();
      req.open("GET", temp, false);
      req.send(null);
      var page = req.responseText;
      document.getElementById("test").innerHTML = page;
    };
</script>

<a href="#" onClick="loadiv('example.html?ID=1&MyVar=1'); return false;">link1</a>
<a href="#" onClick="loadiv('example2.html?ID=2&MyVar=2'); return false;">link2</a>

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

或者使用 jQuery

<script type="text/javascript">
$(function(){
    $('a').on('click', function(e){
        e.preventDefault();
        var page_url = $(this).prop('href');
        $('#test').load(page_url);
    });
});
</script>

<a href="example.html?ID=1&MyVar=1">Load Form 1</a>
<a href="example2.html?ID=2&MyVar=2">Load Form 2</a>

<div id="test"></div>
于 2013-08-16T22:18:34.163 回答
0

我的建议错了，访问外部范围时顺序无关紧要。

function z() {
    var a=1;

    function x() {
        console.log(a);
        console.log(b);
    }

    var b=2;

    x();
}
z();

我仍然建议使用带有 firebug 插件的 Firefox 或您最喜欢的具有类似功能的浏览器：检查 javascript 控制台是否有错误。您还可以在那里检查 ajax 响应。

于 2013-08-16T22:10:35.407 回答