2014-12-22 3 views
0

Я хочу, чтобы моя страница PHP обновила указанный DIV каждый 'n' второй.Обновить DIV с помощью копий Jquery целиком

Код:

<body>  
    <div id="refreshData"> 
    //Functions 
    </div> 
    <div id="setofDIV"> 
    //Functions 
    </div> 
    </body> 
      <script type="text/javascript">    
       function show_data() 
        { 
        $('#refreshData').load('main.php); 
        } 
       setInterval('show_data()', 5000); 
      </script> 

Но после обновления все тело копируется дважды в main.php файле.

+1

является main.php файл, в котором этот javascript есть? –

+0

@PatrickEvans Да –

+0

Если 'main.php' возвращает всю страницу, то это полное содержимое отображается в этом div снова. 'main.php' должен отображать только новое содержимое для div, если запрос является запросом AJAX, или JavaScript должен быть достаточно умным, чтобы извлечь из него контент и использовать эту часть. – GolezTrol

ответ

2

PHP решение

Чтобы сделать эту работу, main.php придется возвращать только содержимое дел. Это означает, что ему нужно определить, когда нужно сделать целую страницу или просто содержимое div. Существует несколько способов сделать это.

  1. Сделать отдельный файл PHP для запросов AJAX, которая всегда только возвращает ту часть страницы
  2. Используйте HTTP_X_REQUESTED_WITH заголовок обнаружить запрос на AJAX

    если (! Пустой ($ _ SERVER [ 'HTTP_X_REQUESTED_WITH']) & & strtolower ($ _ SERVER [ 'HTTP_X_REQUESTED_WITH']) == 'XMLHttpRequest') { // Если вы здесь, это запрос AJAX. Убедитесь, что вы только отображаете содержимое div. }

  3. Как у одного. Вместо создания отдельного PHP-файла добавьте параметр строки запроса, поэтому страница будет знать, что она должна только вернуть эту часть. Вы можете даже указать в строке запроса эту часть, чтобы вы могли загружать разные части через один и тот же файл php через разные интервалы.

решение JavaScript

В качестве альтернативы, вы можете просто извлечь всю страницу, и использовать JQuery для извлечения содержимого в Див от него. Для этой цели у load function есть удобный синтаксис.

Метод .load() позволяет указать часть удаляемого документа для вставки. Это достигается с помощью специального синтаксиса для параметра url. Если один или несколько символов пробела включают в себя , часть строки, следующей за первым , считается селектором jQuery, который определяет загружаемый контент .

Функция загрузки позволяет использовать дополнительный селектор после URL-адреса, содержимое, соответствующее селектору, выбирается из ответа AJAX и вставлено в указанный элемент документа. По этой причине идентификаторы должны быть разными, иначе вы вставляете элемент с тем же идентификатором внутри существующего элемента, и это недопустимо.

Так что ваш HTML должен выглядеть следующим образом:

<div id="refreshDataContainer"> 
    <div id="refreshData"> 
    </div> 
</div> 

После того, как вы сделали это изменение, вы можете полностью заменить #refreshData следующей строкой:

$('#refreshDataContainer').load('main.php #refreshData'); 
+0

. Спасибо за информацию. Но вы можете указать код, используя AJAX, как вы указали в первом методе –

+0

'load()' уже выполняет запрос AJAX. Решение метода 1 заключается не в вызове 'main.php', а в другом URL-адресе, который возвращает содержимое div. Например, 'main_refreshdata.php'. Или (как в 3) вы можете вызвать 'main.php? Part = refreshdata', поэтому main.php будет знать, что это должно отображать только новый контент, а не целую страницу. Каждое из этих трех решений требует изменения кода сервера (PHP). – GolezTrol

+0

Судя по вашим ответам, у вас, похоже, есть некоторые проблемы с пониманием части PHP, поэтому я считаю, что решение JavaScript может быть лучшим на данный момент. К счастью, функция 'load()' уже позволяет вам сделать это очень легко. Я добавил объяснение в ответ, чтобы показать вам, как это сделать. – GolezTrol

-1

Попробуйте ниже: -

<div class="result"></div> 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script> 
    function refresh_div() { 
     jQuery.ajax({ 
      url:'YOUR PHP page url', 
      type:'POST', 
      success:function(results) { 
       jQuery(".result").html(results); 
      } 
     }); 
    } 

    t = setInterval(refresh_div,1000); 
</script> 

«ВАШ PHP URL страницы» должен содержать контент, который вы хотите отобразить на главной странице.

+0

. Если ваш URL-адрес страницы PHP только возвращает эту часть, тогда нет причин использовать этот альтернативный способ выполнения запроса по 'load', который OP уже использовал. – GolezTrol

+0

Текущий код OP уже делает это. Метод .load jQuery - это ярлык для этого типа кода. Проблема OP заключается в том, что страница, которую они загружают, - это одна и та же страница с javascript, поэтому каждый из этих вызовов добавляет еще один javascript, который будет загружаться в одном и том же месте более –

Смежные вопросы