Fatal编程技术网

javascript未设置innerHTML

javascript ajax html

javascript未设置innerHTML,javascript,ajax,html,innerhtml,Javascript,Ajax,Html,Innerhtml,我正在为一个客户开发一个网站，我正在使用ajax获取文件的内容，特别是html，然后我尝试将html插入到一个div中，以便显示内容。我知道我正在获取文件的内容，因为我将警报设置为显示请求的readyState、status和responseText，并且它在警报中显示文件的内容。但是，当我尝试使用以下行将其插入div时：document.getElementsByClassName（'content'）.innerHTML=response什么也没发生。有人能帮我弄清楚吗 代码： JAVASC

我正在为一个客户开发一个网站，我正在使用ajax获取文件的内容，特别是html，然后我尝试将html插入到一个div中，以便显示内容。我知道我正在获取文件的内容，因为我将警报设置为显示请求的readyState、status和responseText，并且它在警报中显示文件的内容。但是，当我尝试使用以下行将其插入div时：
document.getElementsByClassName（'content'）.innerHTML=response什么也没发生。有人能帮我弄清楚吗

代码：

JAVASCRIPT:


document.getElementByClassName正在返回数组。您不能设置数组的innerHtml，您需要在数组中循环并将每个元素设置为innerHtml

工作示例：


函数processData（）{
response=request.responseText；
/*if（request.readyState==4）{
如果（请求状态==200）{
试一试{
var elements=document.getElementsByClassName（'content'）；
对于（var x=0；x
document.getElementByClassName正在返回一个数组。您不能设置数组的innerHtml，您需要在数组中循环并将每个元素设置为innerHtml

工作示例：


函数processData（）{
response=request.responseText；
/*if（request.readyState==4）{
如果（请求状态==200）{
试一试{
var elements=document.getElementsByClassName（'content'）；
对于（var x=0；x
为什么不使用jQuery的$.load（）；使用jQuery的$.load（）函数并为自己节省大量的痛苦和时间
为什么不使用jQuery的$.load（）；你应该缩小你的代码粘贴范围，隔离具体的问题。这是太多的代码。还有，为什么不使用jQuery库呢？对不起，我只是想确保我没有遗漏任何东西。至于jQuery，我以前从未使用过。与我所拥有的相比有什么好处？你知道有什么好的起点吗？你应该缩小你的代码粘贴范围，并隔离具体的问题。这是太多的代码。还有，为什么不使用jQuery库呢？对不起，我只是想确保我没有遗漏任何东西。至于jQuery，我以前从未使用过。与我所拥有的相比有什么好处？你知道它有什么好的起点吗？或者给元素一个id并使用
document.getElementById（）
@nnnnn true，但这取决于他试图实现的+1。谢谢，我没有意识到document.getElementsByClassName返回了一个数组。虽然我应该使用“s”，lolOr给元素一个id并使用
document.getElementById（）
@nnnnn true，但这取决于他试图实现+1的目标。谢谢，我没有意识到document.getElementsByClassName返回了一个数组。虽然我应该在“s”之前，哈哈

<script language="javascript" type="text/javascript">
var request = new ajaxRequest();
var fileLoc;
var response;
function getData(fileName){
    fileLoc = encodeURI("assets/"+fileName+".html")
    alert(fileLoc);
    request.onreadystatechange = processData;
    request.open("GET",fileLoc, false);
    request.send();
    alert(request.readyState);
    alert(response);
    alert(request.status);
    document.getElementsByClassName('content').innerHTML = response;

}
function processData(){
    response = request.responseText;
    /*if (request.readyState==4){
        if (request.status==200){
            try{
                document.getElementsByClassName('content').innerHTML = response;
            } catch(e){
                alert("Error: " +e.description);
            }
        }
        else{
            alert("An error has occured making the request");
        }
    }*/
}
function home() {
    getData("home");
}
function about() {
    getData('about');
}
function proof() {
    getData('contact');
}
function contact() {
    getData('proof');
}
function ajaxRequest(){
    var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]
    if (window.XMLHttpRequest)
        return new XMLHttpRequest();
    else if (window.ActiveXObject){ 
        for (var i=0; i<activexmodes.length; i++){
            try{
                return new ActiveXObject(activexmodes[i]);
            }
            catch(e){
                alert(e.description);
            }
        }
    }
    else
        return false
}



<body>
<div class="container">
    <div class="logo"> <span id="link-home" class="noglow" onclick="javascript: home();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">Home</span><!-- end link-home --> 
        <span  id="link-about"class="noglow" onclick="javascript: about();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">About</span><!-- end link-about --> 
        <span id="link-proof" class="noglow" onclick="javascript: proof();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">Proof of Concept</span><!-- end link-proof --> 
        <span id="link-contact" class="noglow" onclick="javascript: contact();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">Contact</span><!-- end link-contact -->

        <div id="home-flower" onclick="javascript: home();" onmouseover="javascript: document.getElementById('link-home').className='glow'" onmouseout="javascript: document.getElementById('link-home').className='noglow'"></div><!-- end home-flower -->
        <div id="about-flower" onclick="javascript: about();" onmouseover="javascript: document.getElementById('link-about').className='glow'" onmouseout="javascript: document.getElementById('link-about').className='noglow'"></div><!-- end about-flower -->
        <div id="proof-flower" onclick="javascript: proof();" onmouseover="javascript: document.getElementById('link-proof').className='glow'" onmouseout="javascript: document.getElementById('link-proof').className='noglow'"></div><!-- end proof-flower -->
        <div id="contact-flower" onclick="javascript: contact();" onmouseover="javascript: document.getElementById('link-contact').className='glow'" onmouseout="javascript: document.getElementById('link-contact').className='noglow'"></div><!-- end other-flower --> 
    </div><!-- end logo-->
    <div class="content"></div><!-- end content -->   
</div><!-- end container -->
<div class="footer"></div><!-- end footer -->



    @charset "UTF-8";
/* CSS Document */

* {
    margin:auto;
}

html, body {
    height: 100%;
}

.container {
    position:relative;
    min-height: 100%;
    width:800px;
}

.logo{
    position:relative;
    width:100%;
    height:210px;
    top:0px;
    left:0px;
    background:url(images/logo.png);
}

.content {
    position:relative;
    top:0px;
    left:0px;
    padding-top:20px;
    padding-bottom: 75px !important;
}  

.footer {
    position:relative;
    height: 75px;
    margin-top:-75px;
    background-color:#06F;
    bottom:0px;
    left:0px;
}

.large{
    font-size:36px;
}

.fltright {
    position:relative;
    float:right;
    top:0px;
    left:0px;
    width:auto;
    height:auto;
}

.fltleft {
    position:relative;
    float:left;
    top:0px;
    left:0px;
    width:auto;
    height:auto;
}

span.glow {
    text-shadow: 0px 0px 10px #87CFBF, 0px 0px 10px #87CFBF, 0px 0px 10px #87CFBF;
    color:#999;
    text-align:center;
}

span.noglow {
    color:#999;
    text-align:center;
}

#home{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    visibility:visible;
    line-height:20px;
}

#about{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;   
    visibility:visible;
}

#proof{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;   
    visibility:visible;
}

#contact{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;   
    visibility:visible;
}

#link-home{
    position:absolute;
    width:75px;
    height:30px;
    top:110px;
    left:419px;
}

#link-about{
    position:absolute;
    width:75px;
    height:30px;
    top:110px;
    left:515px;
}

#link-proof{
    position:absolute;
    width:75px;
    height:30px;
    top:100px;
    left:609px;
}

#link-contact{
    position:absolute;
    width:75px;
    height:30px;
    top:110px;
    left:708px;
}


#home-flower{
    position:absolute;
    width:30px;
    height:30px;
    top:131px;
    left:442px;
    background:url(images/home-flower.png);
}

#about-flower{
    position:absolute;
    width:30px;
    height:30px;
    top:135px;
    left:540px;
    background:url(images/about-flower.png);
}

#proof-flower{
    position:absolute;
    width:30px;
    height:30px;
    top:131px;
    left:635px;
    background:url(images/proof-flower.png);
}

#contact-flower{
    position:absolute;
    width:30px;
    height:30px;
    top:135px;
    left:733px;
    background:url(images/contact-flower.png);
}



function processData(){
    response = request.responseText;
    /*if (request.readyState==4){
        if (request.status==200){
            try{
               var elements = document.getElementsByClassName('content');
               for(var x=0; x < elements.length; x++)
               {
                 elements[x].innerHTML = response;
               }
            } catch(e){
                alert("Error: " +e.description);
            }
        }
        else{
            alert("An error has occured making the request");
        }
    }*/
}

function getData(fileName){
    fileLoc = encodeURI("assets/"+fileName+".html")
    alert(fileLoc);
    request.onreadystatechange = processData;
    request.open("GET",fileLoc, false);
    request.send();
    alert(request.readyState);
    alert(response);
    alert(request.status);
    var elements = document.getElementsByClassName('content');
    for(var x=0; x < elements.length; x++)
    {
       elements[x].innerHTML = response;
    }
}