jQuery загружает данные из PHP, но затем исчезает, почему?

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

Я предполагаю, что #content определено в вашей структуре HTML:

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

Также попробуйте сейчас удалить #content { position: relative; }, только если содержимое «скачет» после загрузки в документ

Answer 3

Я не вижу ни одного элемента с идентификатором #content в вашем HTML, вы уверены, что он существует?

Answer 4

Кажется, в вашем html нет div "content".Кроме того, используйте

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

, так как нет необходимости использовать $ .post, потому что никакие данные не отправляются.