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

#php #jquery #ajax #post #get

#php #jquery #ajax #Публикация #получить

Вопрос:

Я искал, есть ли похожий здесь пост, и если кто-то найдет его, извините за дубликат.

Итак, моя дилемма заключается в следующем:

Учитывая приведенный ниже код, почему мои возвращенные данные загружаются, а затем исчезают?

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

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

1. Почему вы используете POST, когда вы не отправляете никаких данных POST, которые, по-видимому, также ничего не изменяют с вашим запросом?

2. Как отмечалось выше, вы могли бы просто внедрить это с помощью javascript.

3. Кажется, все в порядке. Что показал Firebug? Правильно ли реагирует PHP-код?

4. «Исчезает»? И можете ли вы абстрагироваться от PHP в своем вопросе? Затем продемонстрируйте проблему на jsfiddle.net ?

Ответ №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);   
  });
);

Это также гарантирует, что стандартное событие (щелчок по ссылке) будет отменено с первой строкой.

1. @ricbax Странно, так и должно быть, но поскольку вы используете jquery, второе решение, которое я добавил, в любом случае приятнее (вы можете удалить javascript из html).

2. Похоже ли, что ваша страница обновляется, как только вы нажимаете на ссылку?

Ответ №2:

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

1. извините, я забыл добавить эту важную деталь в свой пост

2. Можете ли вы обновить свой пост? Кроме того, вы можете предоставить ссылку на свою страницу?

3. Попробуйте временно переместить #content div за пределы #contentbg и посмотрите, получите ли вы какие-либо результаты. Я не совсем уверен, почему это отдельные divs в первую очередь.

Ответ №3:

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

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

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

Ответ №4:

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

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

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