簡體   English   中英

Ajax請求有效,但沒有CSS和JavaScript

[英]Ajax request works, but with no CSS and JavaScript

以下是我為Ajax請求提供的代碼段。 該請求有效,但是在處理該請求時,該頁面顯示為沒有CSS或JS的任何內容(即使我在同一目錄中也擁有所有內容)。 為了對此進行測試,我將請求指向了我網站上已經存在的頁面。 有什么幫助嗎? 提前致謝。

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajaxtest.html",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>

ajaxtest.html

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://swip.codylindley.com/jquery.DOMWindow.js"></script>

<p><a href="#inlineContent" class="defaultDOMWindow">Open DOM Window</a></p> 
<script type="text/javascript"> 
$('.defaultDOMWindow').openDOMWindow({ 
eventType:'click', 
loader:1, 
loaderImagePath:'animationProcessing.gif', 
loaderHeight:16, 
loaderWidth:17 
}); 
</script> 
<div id="inlineContent" style=" display:none;"> 
<p>Inline Content</p> 
<p>Click overlay to close window</p> 
<p>Consequat ea Investigationes in enim congue. Option velit volutpat quod blandit ex. Congue parum praesent aliquam nam clari. Qui praesent quam sollemnes id vulputate. In imperdiet diam at sequitur et. Minim delenit in dolor dolore typi. Erat delenit laoreet quinta videntur id. Ii at qui eum ut usus. Quis etiam suscipit iusto elit dolor. Dolor congue eodem adipiscing cum placerat. </p> 
<p>Erat usus lorem adipiscing non in. Nobis claram iusto et dolore facilisis. Claritatem decima velit decima ipsum wisi. Quinta ullamcorper sollemnes usus aliquip in. Ut aliquip velit tempor facit putamus. Habent duis et option quod facer. Delenit facer consequat seacula molestie notare. Qui tincidunt nobis lectores eleifend eorum. Decima usus facer id parum legere. Nonummy nonummy facilisis sit qui eodem. </p> 
</div>

這就是它應該如何工作的。

就行為而言,AJAX調用不是瀏覽器窗口。 它將獲取ajaxtest.html和僅此文件。 它不會嘗試獲取ajaxtest.html引用的任何其他文件。

如果要在文檔中放入一些網頁,請使用iframe:

<iframe id="iframe_test" src="ajaxtest.htm"></iframe>

然后,您可以通過調用以下命令將一些文檔加載到該iframe:

document.getElementById('iframe_test').src = 'ajaxtest2.html';

校正如下。

document.getElementById('myDiv').innerHTML=xmlhttp.responseText;

不要對getElementById使用雙引號

並且窗口沒有打開,因為您正在動態添加DOM,因此事件不會綁定到動態加載的內容。

我終於找到了解決方案。

//用於在HTML響應后觸發CSS

function csstuff() 
{
    $('selector').css('var', 'val');
}

//用於在HTML響應后觸發JavaScript

function domWinInit(){ 
    //include the code from 
    (http://swip.codylindley.com/jquery.DOMWindow.js)
}

function domClick(){ 
    $('.defaultDOMWindow').openDOMWindow({ 
      eventType:'click', 
      loader:1, 
      loaderImagePath:'animationProcessing.gif', 
      loaderHeight:16, 
      loaderWidth:17 
    });  
}

成功的情況是當status == 200和readyState == 4時,在插入HTML響應后觸發您的js和css函數

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById('myDiv').innerHTML=xmlhttp.responseText;

        // CSS & JavaScript firing goes here
        csstuff();
        domWinInit();
        domClick();
    }
}

感謝您的重播。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM