jQuery从PHP加载数据，但随后数据消失了，为什么？

我已经搜索过了，看看这里是否有类似的帖子，如果有人发现它的重复抱歉

所以我的困境是：

鉴于下面的代码，为什么它返回我的数据加载，然后消失

CSS

#contentbg{
   background-image: url(../images/jp_01.jpg);
   background-repeat: no-repeat;
   background-position: top;
   position: absolute;
   width: 755px;
   height: 629px;
}

#content{
   position: relative;
}

function getHome(){ 
    $.post("php/functions.php?s=home",
     function(data) {
     $('#content').html(data);   
   });
};

JS

#contentbg{
   background-image: url(../images/jp_01.jpg);
   background-repeat: no-repeat;
   background-position: top;
   position: absolute;
   width: 755px;
   height: 629px;
}

#content{
   position: relative;
}

function getHome(){ 
    $.post("php/functions.php?s=home",
     function(data) {
     $('#content').html(data);   
   });
};

HTML

<div id="contentbg">
    <div id="content"></div>
</div>
<ul id="navlist">
     <li id="home"><a href="index.php" onClick="getHome();" title="Home"></a></li>
</ul>

---

我在您的HTML中没有看到任何id为

#content

的项目，您确定它存在吗？

我在您的HTML中没有看到任何id为

#content

的项目，您确定它存在吗？

问题是，您单击链接时没有取消标准操作，因此发生的是您单击，执行javascript，然后加载

index.php

您需要从

getHome

函数返回

false

，以解决此问题

function getHome(){ 
   $.post("php/functions.php?s=home",
     function(data) {
     $('#content').html(data);   
   });
   return false;
}

由于您已经在使用jquery，您还可以摆脱内联javascript并使用如下函数：

$("#home a").click(function(event) {
  event.preventDefault();
  $.post("php/functions.php?s=home",
     function(data) {
     $('#content').html(data);   
  });
);

---

这也确保了标准事件（点击链接）在第一行被取消。

问题是，当你点击链接时，你没有取消标准操作，所以现在发生的是，你点击，javascript被执行，然后

index.php

被加载

您需要从

getHome

函数返回

false

，以解决此问题

function getHome(){ 
   $.post("php/functions.php?s=home",
     function(data) {
     $('#content').html(data);   
   });
   return false;
}

由于您已经在使用jquery，您还可以摆脱内联javascript并使用如下函数：

$("#home a").click(function(event) {
  event.preventDefault();
  $.post("php/functions.php?s=home",
     function(data) {
     $('#content').html(data);   
  });
);

这也确保了标准事件（点击链接）在第一行被取消。

我假设内容是在HTML结构中定义的：

$('#content').load('php/functions.php?s=home');

现在还可以尝试删除

#内容{position:relative；}

，以防内容加载到文档后“跳跃”

我假设#内容在HTML结构中定义：

$('#content').load('php/functions.php?s=home');

另外，现在还可以尝试删除

#content{position:relative；}

，以防内容加载到文档后“跳跃”

html中似乎没有“content”div。
此外，使用

$("#content").load("url");

因为没有发送post数据，所以不需要使用$.post。

您的html中似乎没有“内容”div。
此外，使用

$("#content").load("url");

---

因为没有发送任何post数据，所以不需要使用$.post。

当您没有发送任何post数据时，为什么要使用post？显然，您也不会修改您的请求中的任何内容？如上所述，您可以使用javascript注入此内容。一切似乎都正常。萤火虫展示了什么？PHP代码响应正确吗？“正在消失”？你能把PHP从你的问题中抽象出来吗？然后在JSFIDLE.net上演示这个问题？当你没有发送任何POST数据时，为什么要使用POST？显然，你也没有对你的请求进行任何修改？如上所述，你可以用javascript注入它。一切似乎都正常。萤火虫展示了什么？PHP代码响应正确吗？“正在消失”？你能把PHP从你的问题中抽象出来吗？然后在jsfiddle.net上演示这个问题？对不起，我忘了在我的帖子中添加那个重要的细节。你能更新你的帖子吗？否则，您能否提供指向页面的链接？请尝试将

#content

div临时移动到

#contentbg

之外，然后查看是否有任何结果。我不太清楚为什么这些是分开的分区。对不起，我忘了在我的帖子中添加那个重要的细节。你能更新你的帖子吗？否则，您能否提供指向页面的链接？请尝试将

#content

div临时移动到

#contentbg

之外，然后查看是否有任何结果。我不太清楚为什么这些都是单独的div。@ricbax Strange，应该是这样，但当您使用jquery时，我添加的第二个解决方案无论如何都更好（您可以从html中删除javascript）。单击链接后页面是否会刷新？@ricbax Strange，应该是这样，但是，当您使用jquery时，我添加的第二个解决方案无论如何都更好（您可以从html中删除javascript）？