Question

我已经搜索过，看看是否有类似的帖子，如果有人发现对不起副本。

所以我的困境是：

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

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;
}

JS

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>

PHP

function displayHome($home){
    if(isset($home)){
        $home = '<img src="images/home.jpg" alt="Home" width="755" height="630" />';
        return $home;
    }
}

if (isset($_GET['s'])) {
    switch ($_GET['s']) {
        case "home": 
            echo displayHome($_GET['s']);
            break;
        }
}

我知道如果改变JS，数据会被加载，如下所示：

function getHome(){ 
    $.post("php/functions.php?s=home",
     function(html) {
     alert("Data Loaded: " + html);
   });
};

Answer 1

问题是当你点击链接时你没有取消标准动作，所以发生的事情是你点击，javascript被执行然后index.php被加载。

您需要从false函数返回getHome来解决此问题。

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);   
  });
);

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

Answer 2

我在HTML中看不到任何ID为#content的项目，您确定它存在吗？

Answer 3

我认为#content是在HTML结构中定义的：

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

现在尝试删除#content { position: relative; }，只是内容是＆＃34;跳跃＆＃34;一旦加载到文档中

Answer 4

你的html中似乎没有“内容”div 另外，使用

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

因为没有必要使用$ .post，因为没有发送帖子数据。

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

4 个答案: