2010-08-28 2 views
0

Я хочу найти плагин, который может обновлять определенные области страницы, не обновляя всю страницу. У меня есть собственный элемент управления, который хранится внутри div, который меняет его содержимое только при обновлении, поэтому я думаю использовать что-то, что может обновить только divЕсть ли плагин jquery для обновления определенных областей страницы

ответ

1

jQuery отлично работает для этого. Что-то простое, как показано ниже, обновит элемент .result с помощью html с url. Это может сочетаться с языком на стороне сервера и различными событиями для динамического использования. Use this tutorial from jQuery.

$.ajax({ 
    url: 'ajax/test.html', 
    success: function(data) { 
    $('.result').html(data); 
    alert('Load was performed.'); 
    } 
}); 
+0

Я видел эту страницу. Я не могу понять, что у меня есть страница Test.html и есть Div, называемый dyndiv, как я могу обновить содержимое этого div? – roneden

+0

Когда вы хотите его обновить? По щелчку чего-нибудь? –

0

Что вам нужно, это ajax. Чтобы буквально перезагрузить часть страницы (то есть загрузите всю страницу снова с помощью load(), затем проанализируйте необходимый элемент) - это огромная трата ресурсов. Что вы будете делать Ajax является:

  1. Настройка страницы на сервере, содержимое которого включает только данные, необходимые для области, которую вы хотите
  2. Использование JQuery периодически отправлять асинхронный (т.е.. Ajax) запрос для этой страницы
  3. процесса полученной информации и отображение информации обновилось

Есть много учебников в Интернете, которые помогут вам с тем, что вы хотите.


Edit: Чтобы найти хороший учебник вам нужно включить более подробно. Тем не менее, я просто предоставил простой здесь:

Предположим, у вас есть виджет, который отображает последние заголовки в списке, который обновляется каждые 5 минут. HTML В оригинальном виджете, как это:

<ol id="headline"> 
    <li>Are two heads better than one? Sometimes...</li> 
    <li>Crocodile ate small children in Florida</li> 
    <li>Giant fireball appears across the summer sky!</li> 
    <li>Scientists find method to reticulate spines</li> 
</li> 

На шаге 1, вам нужно будет активизировать страницу на сервере, который выдает что-то вроде этого, который меняется каждые 5 минут:

Arctic found to hold giant oil reserve 

Одиночные строка, содержащая текущий заголовок, без HTML, без форматирования, просто текст. Я не буду касаться кода на стороне сервера, так как я понятия не имею, что вы используете на стороне сервера. Мы предполагаем, что это можно найти по адресу headline.php.

На шаге 2 и 3, вы будете некоторые Javascript код, например:

function getHeadline(){ 
    $.get('headline.php', function(data){ 
    $('<li></li>').prependTo('#headline').text(data); 
    $('#headline > li').last().remove(); 
    }); 
} 

$(document).ready(function(){ 
    setInterval(getHeadline, 300000); 
}); 

Функция getHeadline() использовать метод GET для получения содержимого headline.php. Функция $.get() имеет два параметра, первое - расположение файла, второе - это функция, которая выполняется, когда запрос завершен. Когда он будет завершен, он вставляет содержимое, которое он получает в список заголовков, при удалении последнего заголовка.

Функция setInterval() используется для вызова функции getHeadline() каждые 5 минут (300000 миллисекунд).


Конечно, это просто простой пример, но он охватывает все базы. Для более сложной информации вы также будете использовать структуру данных, например json. Вы также можете посмотреть более подробные учебники как

http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/ http://net.tutsplus.com/tutorials/html-css-techniques/building-a-5-star-rating-system-with-jquery-ajax-and-php/

Они, вероятно, не будет соответствовать вашим потребностям точно, но вы получите хорошее представление о том, с чего начать.

+0

Можете ли вы предложить несколько руководств, о которых вы говорите, которые используют jquery и ajax? – roneden

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