解决Jquery $(“#main”).html($(“#main”).html()+data);在Firefox中无效

现在的位置: 首页 > 综合 > 正文

解决Jquery $(“#main”).html($(“#main”).html()+data);在Firefox中无效

2013年11月04日 ⁄ 综合 ⁄ 共 2489字 ⁄ 字号小中大 ⁄ 评论关闭

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ecsoft</title>
<link href="1.css" type="text/css" rel="stylesheet">
<style type="text/css">

</style>

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
	$(function(){
	    //点击navigate:Demo，在左侧栏的div中显示
		$("#demo").click(function(){
			$(".demo-link").css("display","block");
		});	
		
	});
	
	//点击左侧栏的链接,在右边的main DIV中显示外部HTML的内容
	function getContent(url,id){		
		//alert(url);		
		//alert(id);
		$("#main").text("");//加载显示内容前，清除上一次加载的内容
		////注释掉$(id).click(function(){})事件,是因为已经在下面的<a>中绑定了哦你click事件了.说明:不注释在IE中正常,FF中就不能执行此函数了.
	    //$(id).click(function(){						
			//alert("hh");
			$.ajax({
        			type:"get",
        			url:url,
					dataType:"html",//如果不指定dataType，在IE中会默认为返回是HTML，但是在FF中默认为XMLDocument:[object XMLDocument]
        			success:function(data){
						alert(data);
        				$("#main").html($("#main").html()+data);
        			},
        		  error: function(){
        		  	alert("加载失败！");
        		  }
        	});
		//});	
	}
	
</script>
</head>
<body>
<div id="container">
	<div id="globallink">
			<ul>
				<li><a id="demo" href="#">Demo</a></li>
				<li><a href="#">nav2</a></li>
				<li><a href="#">nav3</a></li>
				<li><a href="#">nav4</a></li>
				<li><a href="#">nav5</a></li>
				<li><a href="#">nav6</a></li>
			</ul>
		<br>
	</div>
	<div id="parameter">
		<div id="lcategory">
			<h4 class="demo-link" id="category"><span>Demo</span></h4>
			<ul>
				<li class="demo-link"><a id="navigate-link" href="#" onclick="getContent('a.html','#navigate-link');return false;">Navigate</a></li>
				<li class="demo-link"><a id="button-link" href="#" onclick="getContent('button.html','#button-link');return false;">Button</a></li>
				<li class="demo-link"><a id="table-link" href="#" onclick="getContent('a.html','#table-link');return false;">Table</a></li>
				<li class="demo-link"><a href="#">Ajax学习心得</a></li>
				<li class="demo-link"><a href="#">新疆甘肃游记</a></li>
				<li class="demo-link"><a href="#">学生节</a></li>
				<li class="demo-link"><a href="#">职业生涯</a></li>
			</ul>
			<br>
		</div>	
		<div id="llatest">
			<h4 class="latest"><span>最新文章列表</span></h4>
			<ul>
				<li><a href="#">又是一年银杏黄</a></li>
				<li><a href="#">迎新小记</a></li>
                <li><a href="#">beep饭局</a></li>
				<li><a href="#">夜访中戏小记</a></li>
				<li><a href="#">植物园看郁金香</a></li>
				<li><a href="#">玉渊潭看花</a></li>
				<li><a href="#">学校的春天</a></li>
				<li><a href="#">美术馆小记</a></li>
				<li><a href="#">巧学巧用Flash</a></li>
			</ul>
			<br>
		</div>
	</div>
	
	<div id="main">
		    	
	</div>
	<div id="footer">
		<p>更新时间: 2008-06-24 ?All Rights Reserved </p>
	</div>
</div>
</body>
</html>

解决方法：见以上代码的注释部分！

在$.ajax({})方法中指定dataType，服务器返回数据的类型：

dataType:"html",//如果不指定dataType，在IE中会默认为返回是HTML，但是在FF中默认为XMLDocument:[objectXMLDocument]

FF显示1: 没有指定dataType之前