在当前的ajax页面中调用ajax页面

时间:2011-04-23 05:47:38

标签: javascript ajax

我创建了两个页面“index.php”& index.php页面中的“library.php”我使用ajax在div中包含库页面。当我在index.php中调用library.php页面时,存在于库中的ajax库.php不工作。请帮助。 .....

这是我的代码

的index.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var rootdomain = "http://" + window.location.hostname

function ajaxinclude(url) {
    var page_request = false
    if (window.XMLHttpRequest) page_request = new XMLHttpRequest()
    else if (window.ActiveXObject) {
        try {
            page_request = new ActiveXObject("Msxml2.XMLHTTP")
        } catch (e) {
            try {
                page_request = new ActiveXObject("Microsoft.XMLHTTP")
            } catch (e) {}
        }
    } else return false
    page_request.open('GET', url, false)
    page_request.send(null)
    writecontent(page_request)
}

function writecontent(page_request) {
    if (window.location.href.indexOf("http") == -1 || page_request.status == 200) document.write(page_request.responseText)
}

</script>
</head>

<body>
<div style="width:400px; height:500px;">
<script type="text/javascript">
ajaxinclude("Library.php")
</script>
</div>


</body>
</html>

Library.php

(包含在index.php页面中)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="Content-Style-Type" content="text/css">
        <meta http-equiv="Content-Script-Type" content="text/javascript">

        <title>Tabs - jQuery plugin for accessible, unobtrusive tabs</title>

        <script src="javascript/jquery-1.1.3.1.pack.js" type="text/javascript"></script>
        <script src="javascript/jquery.history_remote.pack.js" type="text/javascript"></script>
        <script src="javascript/jquery.tabs.pack.js" type="text/javascript"></script>


        <link rel="stylesheet" href="css/jquery.tabs.css" type="text/css" media="print, projection, screen">

        <style type="text/css" media="screen, projection">



        body {
            font-size: 16px;  }
        * html body {
            font-size: 100%; 
        }
        body * {
            font-size: 87.5%;
            font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
        }
        body * * {
            font-size: 100%;
        }
        h1 {
            margin: 1em 0 1.5em;
            font-size: 18px;
        }
        h2 {
            margin: 2em 0 1.5em;
            font-size: 16px;
        }
        p {
            margin: 0;
        }
        pre, pre+p, p+p {
            margin: 1em 0 0;
        }
        code {
            font-family: "Courier New", Courier, monospace;
        }
        </style>
    </head>
    <body>

    <h2>Slide and Fade Effect Combined</h2>

    <div id="container-5">
        <ul>
            <li><a href="#fragment-13"><span>One</span></a></li>
            <li><a href="#fragment-14"><span>Two</span></a></li>
            <li><a href="#fragment-15"><span>Three</span></a></li>
        </ul>
        <div id="fragment-13">
            <p>Use a combined slide and fade effect to switch tabs:</p>
            <pre><code>$(&#039;#container&#039;).tabs({ fxSlide: true, fxFade: true, fxSpeed: 'fast' });</code></pre>
        </div>
        <div id="fragment-14">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
        <div id="fragment-15">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
    </div>

<script type="text/javascript">
        $(function() {
          $('#container-5').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'normal' });
        });
    </script>
 </body>
</html>

1 个答案:

答案 0 :(得分:0)

阅读完您的代码后,看起来您想要在现有页面中添加页面,那么为什么要再次使用这些页面?
试试纯文本吧!没有HTML,头! 可以使用脚本和样式:)

你可以使用这个jQuery代码

$("#targetDiv").load("library.php");

<强> Edit 2
用这个Library.php尝试jQuery

    <script src="javascript/jquery-1.1.3.1.pack.js" type="text/javascript"/>
    <script src="javascript/jquery.history_remote.pack.js" type="text/javascript" />
    <script src="javascript/jquery.tabs.pack.js" type="text/javascript"   />
    <link rel="stylesheet" href="css/jquery.tabs.css" type="text/css" media="print,  projection, screen">
    <style type="text/css" media="screen, projection">
    body {
        font-size: 16px;  }
    * html body {
        font-size: 100%; 
    }
    body * {
        font-size: 87.5%;
        font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
    }
    body * * {
        font-size: 100%;
    }
    h1 {
        margin: 1em 0 1.5em;
        font-size: 18px;
    }
    h2 {
        margin: 2em 0 1.5em;
        font-size: 16px;
    }
    p {
        margin: 0;
    }
    pre, pre+p, p+p {
        margin: 1em 0 0;
    }
    code {
        font-family: "Courier New", Courier, monospace;
    }
    </style>
</head>
<body>

<h2>Slide and Fade Effect Combined</h2>

<div id="container-5">
    <ul>
        <li><a href="#fragment-13"><span>One</span></a></li>
        <li><a href="#fragment-14"><span>Two</span></a></li>
        <li><a href="#fragment-15"><span>Three</span></a></li>
    </ul>
    <div id="fragment-13">
        <p>Use a combined slide and fade effect to switch tabs:</p>
        <pre><code>$(&#039;#container&#039;).tabs({ fxSlide: true, fxFade: true, fxSpeed: 'fast' });</code></pre>
    </div>
    <div id="fragment-14">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
    <div id="fragment-15">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
</div>

<script type="text/javascript">
    $(function() {
      $('#container-5').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'normal' });
    });
</script>