Ajax .load() 函数不起作用答案

【问题标题】：Ajax .load() function not workingAjax .load() 函数不起作用
【发布时间】：2015-04-19 16:41:59
【问题描述】：

.load() 仅适用于来自服务器的文件，因此稍后它会起作用，因为我将把它放在服务器上

编辑：此代码适用于 firefox，但不适用于 chrome

在选择一个选项后，我一直在尝试使用 ajax 加载网页，但脚本似乎甚至没有加载

这是脚本 + html：

<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="DaVinciRace.css" />
	<title> Da Vinci Race 2014-2015 </title>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
	
</head>

<body style="background:#f2f2f2;">

<div id="logo">
	<img src="Resources\DVRLogo.png"/>
	<!-- <p class="text">Da Vinci Race</p> -->
</div>

<div id="options" style="background:#0c0c0c; float:right;">
	<div class="menu">
		<div class="chronometre" ></div>
	</div>
</div>



<div id="DVRChrono">

</div>

<script>
	$(document).ready(function(){
		$("#options").on("click", ".chronometre", function() {
			$( "#DVRChrono" ).load( "Chronometre.html" );
		})
	});

</script>

</body>

</html>

文档“Chronometre.html”与此 html 页面位于同一文件夹中

我觉得我错过了一些明显的东西，但我一生都无法弄清楚它是什么

【问题讨论】：

浏览器控制台有错误吗？ JavaScript 会执行吗？是否发出了网络请求？服务器的响应是什么？具体来说，这是如何失败的？
控制台没有错误，有5个请求，jQuery是其中之一，状态为“304未修改”。至于它是如何失败的，当我按下按钮时没有任何反应
你应该在$(function(){ .......... });中附上js代码

标签： html ajax load

【解决方案1】：

这不是添加点击处理程序：

$("#options").on("click", ".chronometre", function() {
    // code
});

因为它在页面上存在#options 元素之前执行。代码执行没有错误，jQuery 选择器根本没有找到任何东西。所以没有可以附加处理程序的元素。

您可以通过将代码移动到页面末尾或将其包装在 document.ready 处理程序中来解决此问题：

$(function() {
    $("#options").on("click", ".chronometre", function() {
        $( "#DVRChrono" ).load( "Chronometre.html" );
    });
});

另外，您的script 标签已损坏。每个标签都应该有 src 或内容，但不能同时有。将它们分开：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
    // your code
</script>

【讨论】：

我刚试过这段代码和 $(document).ready(function(){ --code-- });这两个都没有改变任何东西，很奇怪
@Mranth0ny62：您是否也尝试过拆分script 标签？如果您有一个更新的示例仍然无法按预期工作，请展示它。另外，请调试代码以确定它具体在哪里失败。您一直在假设“.load() 函数不起作用”，而实际上您的代码从一开始就没有调用该函数。
我把它们分开了，它也不起作用，我会更新一下，至于调试，我使用的是notepad++，我不知道它有什么调试功能
@Mranth0ny62: Notepad++ 执行你的代码吗？我认为代码将在 web 浏览器 中执行，不是吗？调试意味着检查代码的运行时行为，因此您需要在 Web 浏览器中检查它。使用诸如 Firebug 或 Chrome 开发者工具之类的工具来检查代码的行为。
我这样做了，在网络选项卡中我得到 JQuery 的“304 未修改”，至于控制台，它只是空的

【解决方案2】：

试试这个：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>

<script>
(function($){    
  $("#options").on("click", ".chronometre", function() {
    $( "#DVRChrono" ).load( "Chronometre.html" );
  })
})(jQuery)
</script>

【讨论】：

那也不起作用，网络仍然显示“304 未修改”