jQuery ajax请求在Chrome中不起作用

**解决* 这个问题是由于我的计算机上的文件访问控制，一旦我上传到DEV服务器在线它工作

我有一个使用ajax动态加载页面的网站。起初我认为问题是因为我使用了.load，然后我尝试使用$.ajax，但仍然存在同样的问题。使用这两种方法在IE和Firefox中都有效，但在Google Chrome中不起作用。javascript文件的代码如下所示：

// JavaScript Document

$(document).ready(function() {

/* THIS SECTION OF CODE WAS TAKEN FROM http://forum.jquery.com/topic/getting-value-from-a-querystring */
// ***this goes on the global scope

// get querystring as an array split on "&"
var querystring = location.search.replace( '?', '' ).split( '&' );

// declare object
var queryObj = {};

// loop through each name-value pair and populate object
for ( var i=0; i<querystring.length; i++ ) {
    // get name and value
  var name = querystring[i].split('=')[0];
  var value = querystring[i].split('=')[1];
  // populate object
  queryObj[name] = value;
}

/* END SECTION */

jQuery.fn.stretchheight = function() {

    if ($(window).height() > $('body').innerHeight())
    {
        $(this).height($(window).height() - ($('body').innerHeight() - $(this).outerHeight(true)));
    }
    return this;
}


//if GET VARIABLE page is == 1 then hide all the green stuff and start animating for red section
if (queryObj["page"] == 1) 
{   
    $("#sales-bottom").hide();
    $(".logo").css("float","left");
    $(".logo").hide();
    $(".content-area").css("float","left");
    $(".content-area").hide();
    $(".green-side").css("display","none");
    $(".red-side").css("display","visible");
    $(".red-side").stretchheight();
    $(".red-side").css("position","absolute");      
    $(".red-side").css("left","-300px");
    $(".logo").css("position","absolute");
    $(".logo").css("left","400px");     
    $(".content-area").css("position","absolute");
    $(".content-area").css({"left":"400px","top":"230px"});     


    $(".red-side").animate({left: 0},1000,function() {
            $(".inner-red-side").fadeIn(1000,function() {
                $(".logo").fadeIn(1000,function() {
                    $(".content-area").fadeIn(1000);
                });                 
            });
    });
}



//if GET VARIABLE page is == 2 then hide all the red stuff and start animating for green section
if (queryObj["page"] == 2) 
{
    $("#port-sub").hide();
    $("#design-bottom").hide();
    $(".logo").css("float","right");
    $(".logo").hide();
    $(".content-area").css("float","right");
    $(".content-area").hide();
    $(".red-side").remove();
    $(".green-side").stretchheight();

    $(".green-side").css("position","absolute");        
    $(".green-side").css("right","-300px");
    $(".logo").css("position","absolute");
    $(".logo").css("right","400px");        
    $(".content-area").css("position","absolute");
    $(".content-area").css({"right":"400px","top":"230px"});        

    $(".green-side").animate({right: 0},1000,function() {
            $(".inner-green-side").fadeIn(1000,function() {
                $(".logo").fadeIn(1000,function() {
                    $(".content-area").fadeIn(1000)
                });                 
            });
        }
    );


}

/****** ALL CONTENT SECTIONS FOR RED ********/
//CONTENT FOR WHAT WE OFFER (RED)
if((queryObj['page'] == 1) && (queryObj["sel"] == 1))
{
    $.ajax({
        url: "pages/sales/what_we_offer.html",
        success: function(data){
            $(".content-area").html(data);
        }
    });
    /*
    $(".content-area").load("pages/sales/what_we_offer.html");
    document.title = 'Maxxim - What We Offer';
    */
}

//CONTENT FOR OUR BRANDS
if((queryObj['page'] == 1) && (queryObj["sel"] == 2))
{
    $(".content-area").load("pages/sales/our_brands.html");
    document.title = 'Maxxim - Our Brands';
}

//CONTENT FOR CONTACT US    
if((queryObj['page'] == 1) && (queryObj["sel"] == 3))
{
    $(".content-area").load("pages/sales/contact_us.html");
    document.title = 'Maxxim - Contact Us';
}
/************ END OF CONTENT RED ***********/



/****** ALL CONTENT SECTIONS FOR GREEN ********/
//CONTENT FOR WHAT WE OFFER (GREEN)
if((queryObj['page'] == 2) && (queryObj["sel"] == 1))
{
    $(".content-area").load("pages/design/what_we_offer.html");
    document.title = 'Maxxim - What We Offer';
}

if((queryObj['page'] == 2) && (queryObj["sel"] == 2))
{
    $(".content-area").load("pages/design/packaging.html");
    document.title = 'Maxxim - Packaging';
}


if((queryObj['page'] == 2) && (queryObj["sel"] == 3))
{
    $(".content-area").load("pages/design/brandmarks.html");
    document.title = 'Maxxim - Brandmarks';
}


if((queryObj['page'] == 2) && (queryObj["sel"] == 4))
{
    $(".content-area").load("pages/design/print_material.html");
    document.title = 'Maxxim - Print Material';
}
/************ END OF CONTENT GREEN ***********/



//if GET VARIABLE page is == 2 then hide all the red stuff
if (queryObj["page"] == 2) {
    $(".red-side").css("display","none");
    $(".green-side").css("display","visible");
}

/* MOUSE EVENTS */
/* RED LAYOUT */
//mouseover for sales & marketing
$("#s").hover(
    function()
    {
        this.src = "imgs/main/sales-m-butt-o.gif";
    },
    function()
    {
        this.src = "imgs/main/sales-m-butt.gif";
    }
);

//mouseover for design
$("#d").hover(
    function()
    {
        this.src = "imgs/main/design-butt-o.gif";
    },
    function()
    {
        this.src = "imgs/main/design-butt.gif";
    }
);

//mouseover for what we offer (red)
$("#offer-red").hover(
    function()
    {
        this.src = "imgs/main/what-we-offer-butt-o.gif";
    },
    function()
    {
        this.src = "imgs/main/what-we-offer-butt.gif";
    }
);


//mouseover for our brands (red)
$("#brands-red").hover(
    function()
    {
        this.src = "imgs/main/our-brands-butt-o.gif";
    },
    function()
    {
        this.src = "imgs/main/our-brands-butt.gif";
    }
);

//mouseover for our brands (red)
$("#contact-red").hover(
    function()
    {
        this.src = "imgs/main/contact-us-butt-o.gif";
    },
    function()
    {
        this.src = "imgs/main/contact-us-butt.gif";
    }
);

//changes page to show design information
$("#design-bottom").click(function() {
    window.location.href = "main.html?page=2&sel=1";
});


/* GREEN LAYOUT MOUSE EVENTS*/
//mouseover for what we offer 
$("#offer-green").hover(
    function()
    {
        this.src = "imgs/main/des-what-we-offer-butt-o.gif";
    },
    function()
    {
        this.src = "imgs/main/des-what-we-offer-butt.gif";
    }
);


//mouseover for packaging
$("#portfolio-green").hover(
    function()
    {
        this.src = "imgs/main/des-portfolio-butt-o.gif";
    },
    function()
    {
        this.src = "imgs/main/des-portfolio-butt.gif";
    }
);

//mouseover for packaging
$("#packaging-green").hover(
    function()
    {
        this.src = "imgs/main/packaging-butt-o.gif";
    },
    function()
    {
        this.src = "imgs/main/packaging-butt.gif";
    }
);


//mouseover for brandmarks
$("#brandmarks-green").hover(
    function()
    {
        this.src = "imgs/main/brandmarks-butt-o.gif";
    },
    function()
    {
        this.src = "imgs/main/brandmarks-butt.gif";
    }
);

//mouseover for materials
$("#materials-green").hover(
    function()
    {
        this.src = "imgs/main/print-material-butt-o.gif";
    },
    function()
    {
        this.src = "imgs/main/print-material-butt.gif";
    }
);

//changes page to show sales and marketing information
$("#sales-bottom").click(function() {
    window.location.href = "main.html?page=1&sel=1";
});



//click event for portfolio brings down sub menu (GREEN)
$("#port-menu").click(function() {
    $("#port-sub").show();
});


});

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Maxxim - Sales & Marketing</title>
<script type="text/javascript" language="JavaScript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="JavaScript" src="js/animated.js"></script>
<link rel="stylesheet" type="text/css" href="css/animated.css">
</head>
<body>
<div class="red-side">
<div class="inner-red-side">
<img src="imgs/main/sales-and-marketing.gif" alt="Sales & Marketing" id="sales-and-marketing">
<ul>
<li><a href="main.html?page=1&sel=1"><img src="imgs/main/what-we-offer-butt.gif" alt="What We Offer" id="offer-red"></a></li>
<li><a href="main.html?page=1&sel=2"><img src="imgs/main/our-brands-butt.gif" alt="Our Brands" id="brands-red"></a></li>
<li><a href="main.html?page=1&sel=3"><img src="imgs/main/contact-us-butt.gif" alt="Contact Us" id="contact-red"></a></li>
</ul>
</div>
</div>
<div class="logo">
<img src="imgs/main/main-logo.gif" alt="Maxxim Logo">
<a href="main.html?page=1&sel=1" title="Sales & Marketing"><img src="imgs/main/sales-m-butt.gif" alt="Sales & Marketing" id="s"></a>
<a href="main.html?page=2&sel=1" title="Design"><img src="imgs/main/design-butt.gif" alt="Design" id="d"></a>
<div class="clear"></div>
</div>
<div class="content-area">
</div>
<div class="green-side">
<div class="inner-green-side">
<img src="imgs/main/design.gif" alt="Design" id="design">
<ul>
<li><a href="main.html?page=2&sel=1"><img src="imgs/main/des-what-we-offer-butt.gif" alt="What We Offer" id="offer-green"></a></li>
<li id="port-menu">
        <img src="imgs/main/des-portfolio-butt.gif" alt="Portfolio" id="portfolio-green">
        <ul id="port-sub">
<li><a href="main.html?page=2&sel=2"><img src="imgs/main/packaging-butt.gif" alt="Packaging" id="packaging-green"></a></li>
<li><a href="main.html?page=2&sel=3"><img src="imgs/main/brandmarks-butt.gif" alt="Brandmarks" id="brandmarks-green"></a></li>
<li><a href="main.html?page=2&sel=4"><img src="imgs/main/print-material-butt.gif" alt="Print Materials" id="materials-green"></a></li>
    </ul>
      </li>
</ul>
</div>
</div>
<div id="design-bottom"></div>
<div id="sales-bottom"></div>
</body>
</html>

该网页可在以下位置查看：

---

谢谢你的帮助

我解决了。问题是由于我的计算机上的文件访问控制。一旦我把它上传到在线开发服务器上，它就工作了

什么是“问题”？我的应用程序，ajax请求不会从google chrome中的指定文件加载内容，但在其他浏览器中都可以正常工作。您可以只向ajax请求发布相关代码吗？在这个问题中有太多不需要的代码$.ajax（{url:“pages/sales/what_we_provide.html”，success:function（data）{$（“.content area”）.html（data）；}}/*$（“.content area”）.load（“pages/sales/what_we_offer.html”）；document.title='Maxxim-我们提供的内容'*/

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

/* GENEREAL */
body 
{
margin: 0 0;
background-color: #000;
}

a img
{
border: none;
}

.clear
{
clear: both;
}
/* LOGO */
.logo
{
width: 254px;
margin-top: 80px;
}

#s 
{
float: left;
}

#d
{
float: left;
}

/* RED SIDE */
.red-side
{
padding-top: 150px;
background-color: #6b0006;
width: 280px;
float: left;
}

.inner-red-side
{
display: none;
}


#sales-and-marketing
{
margin-left: 30px;
margin-bottom: 40px;
}

.red-side ul
{

}

.red-side li
{
list-style-type: none;
margin-top: 50px;
margin-left: 45px;
}

#design-bottom
{
background-image:url(../imgs/main/design-lrg-butt.gif);
width: 102px;
height: 31px;
position: fixed;
bottom: 25px;
right: 30px;
}

#design-bottom:hover
{
background-image:url(../imgs/main/design-lrg-butt-o.gif);
}

/* CONTENT AREA */
.content-area
{
width: 550px;
font: Verdana, Geneva, sans-serif;
font-size:16px;
color: #fff;
}
/* GREEN SIDE */
.green-side
{
padding-top: 150px;
background-color: #73a534;
width: 280px;
float: right;
}

#design
{
margin-left: 30px;
margin-bottom: 40px;
}

.green-side ul
{

}

.green-side li
{
list-style-type: none;
margin-top: 50px;
margin-left: 45px;
}


#sales-bottom
{
background-image: url(../imgs/main/sales-m-butt-lrg.gif);
width: 213px;
height: 31px;
position: fixed;
bottom: 25px;
left: 30px;
}

#sales-bottom:hover
{
background-image:url(../imgs/main/sales-m-butt-lrg-o.gif);
}

#port-sub
{
margin-left: -35px;
margin-top: -20px;
}


#port-sub li
{
margin-bottom: -20px;
}