如何使用jQuery将PHP文件加载到DIV中？

Question

我正在开发一个网站，我在侧边菜单中添加了以下代码：

<a href="#" class="leftMenu" id="contact">联系我们</a>

然后我有这个脚本

$(document).ready(function(){
  $("#contact").click(function(){
    $("#contents").load('home.php');
  });
});

我在页面中有这个DIV：

<div class="contentWrapper" id="contents"></div>

很明显，我想要的是当我点击“联系我们”超链接时加载home.php，但它不起作用。我的代码有什么问题？

- JudeJitsu

---

你有收到任何错误吗？这段代码应该可以运行。 - Blender

你的错误可能在home.php文件中。尝试使用Firebug（或开发者控制台）来监视请求和响应。 - Ben D

指定的位置是否真的存在 home.php 文件？ - m90

我一整个上午都在测试这个，但是$.load('file.html')一直不能工作。似乎它总是得到了它。你能告诉我关于你的文件夹结构的情况吗？你是否包括来自子文件夹等的文件？ - Tom

<script></script> 的闭合标签是否在 #contents 内部？ - Mike H.

Answer 1

将文件名替换为home.php页面的URL。

$(document).ready(function(){
  $("#contact").click(function(){
    $("#contents").load('url to home.php');
  });
});

- Mangala Edirisinghe

---

谢谢，出于一些奇怪的原因，它起作用了！但是我在想为什么没有URL它就不起作用呢？应该是一样的，对吧？ - JudeJitsu

是的，相对URL应该可以工作。尝试使用“/home.php”进行附加？ - Mike H.

如何在单击按钮时将两个不同的页面加载到两个不同的div中？ - user2805663

加载后，它会从目标页面获取CSS样式吗？ - Kamel Labiad

Answer 2

您可以像这样使用$.load()，获取更多有关发生情况的数据。当您看到错误消息时，您可能可以自己解决它 ^^

$("#contents").load("home.php", function(response, status, xhr) {
  if (status == "error") {
      // alert(msg + xhr.status + " " + xhr.statusText);
      console.log(msg + xhr.status + " " + xhr.statusText);
  }
});

- Tom

Answer 3

@user2805663 我知道这篇文章已经有一段时间了，但我还是想发表解决方案，因为它可以帮助其他人，就像它帮助了我一样。

感谢@Mangala Edirisinghe

通过以下方法，您可以在单击（链接）时将两个不同的文件加载到两个不同的DIV中。

$(document).ready(function(){ 
 $("#clickableLink").click(function(){ 
  $("#contents").load('url/file1.php');
  $("#contents2").load('url/file2.php'); 
 }); 
});

- TechYogi

---

它是否也保留了CSS样式？ - Kamel Labiad

@KamelLabiad 是的，它会保持不变，因为通常你会在 HEAD 部分加载 CSS，所以它已经在 DOM 中可用了。 - TechYogi

Answer 4

你必须使用从索引dir而不是脚本目录中的"home.php"路径。

如果您的网站是：

/
  index.php  
  scripts
     /script.js 
     /home.php

您需要修改参数传递的"scripts/home.php"

- Domenico Luciani