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>
你可以通过调用:
来加载一些文档到这个iframedocument.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时,触发你的js &插入HTML响应后的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();
}
}
感谢您的重播。
相关文章:
- 使用CSS/JavaScript更改剑道图工具提示文本颜色
- CSS/Javascript Lightbox
- (html/css/javascript)试图使导航栏中的“当前页面”链接变成不同的颜色
- 在css/javascript中单击,切换图像上的去饱和度
- 如何使用HTML/CSS/JavaScript开发桌面应用程序
- 我的CSS/Javascript下拉菜单测试代码出了什么问题
- 如何在HTML CSS JavaScript中根据纵横比调整高度或宽度
- 使用CSS/Javascript设计图像地图的样式
- 如何使手风琴(CSS+javascript)工作
- 在项目中组织CSS/JavaScript的最佳方式是什么
- 用于检查未使用的CSS/JavaScript选择器的NetBeans插件
- HTML CSS- javascript .click() event
- 使用HTML/CSS/JavaScript更改文件名
- CSS Javascript在1 onClick上处理2事件
- CSS/Javascript带有类's和id's
- 使用CSS/JavaScript在活动页面上突出显示活动导航菜单项,无id
- 选择框在应用 css/javascript 时失去功能
- 使用 CSS/JavaScript 安排动画
- 动态图像放置帮助 - CSS / javascript / jquery.
- PhoneGap Build Service "Build in HTML5, CSS, JavaScript