用javascript和php更改div的内容

Question

我想在我的div上做一些类似iframe的事情。

基本上，我已经做到了使链接更改div的内容，如下所示：

<a href="#self" onClick="document.getElementById('maincontent').innerHTML = '<?php include 'file.php'; ?>';">Open file</a>

但是，这很有效，但是令人遗憾的是，如果我在其中建立另一个链接以将内容更改回第一个文件，服务器将陷入无限循环并崩溃。

我真的只是想找到一种动态更改内容的方法，并使用php从文件中获取内容。 如果我的解决方法完全荒唐可笑，我的确会提出建议。

Answer 1

我认为最好和最简单的方法是使用jQuery：

<script type="text/javascript">
$('#addContent').click(function(){
   $("#maincontent").load("file.php");
   return false;
});
</script>

<a href="#" id="addContent">Open File</a>
<div id="maincontent"></div>

该脚本将使用ajax调用将file.php的内容加载到选定的div中。

Answer 2

这看起来像是jQuery的load（）函数的好地方。 只需给div一个ID，在链接中添加click事件，然后让该事件将php脚本的内容加载到div中即可。 加载新数据时，也许在div上添加一个类（例如，“ updated”）。 这样，您的click事件可以在div上检查is（'。uploaded'）并在再次单击链接时将其切换回。

Answer 3

将divs放入#maincontent中，以保存所需的不同内容。 输入div ID。 单击链接后，隐藏/显示适当的内容

这是一个类似的线程： 用PHP制表？

Answer 4

首先，我建议不要像这样构建事件处理程序。 一方面，您必须非常小心，正确地转义内容。 我会这样：

<div id="content1">
<?php include 'file1.php'; ?>
</div>
<div id="content2">
<?php include 'file2.php'; ?>
</div>

然后使用Javascript进行操作。 您可以设置innerHTML或简单地隐藏/显示相关的div。 所以：

<script type="text/javascript">
var content = 1;

function swap_content() {
  document.getElementById('maincontent').innerHTML = document.getElementById('content' + content).innerHTML
  if (content == 1) {
    content = 2;
  } else {
    content = 1;
  }
}
</script>
<a href="#" onclick="swap_content();">Open File</a>

或者，您可以只隐藏/显示适当的内容，而不是复制内容。

最后，虽然不是必需的，但这在像jQuery这样的Javascript库中却要琐碎得多。

Answer 5

对我来说，听起来您应该使用AJAX。 在clickevent（您也不应与内联代码绑定）上，您应该使用XHR请求加载内容。

为了使您的生活更轻松，我建议您查看一个JavaScript库，我个人最喜欢的是jQuery（ www.jquery.com ）。 要实现您想要的目标，您只需执行以下操作：

$('#id_to_the_a_tag').click(function() {
    $("#maincontent").load("file.php");
    return: false;
});