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>

これに関するアイデアはありますか？これは頭​​が痛いので

メニューという名前の別の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