Автоматическое обновление с помощью ajax / jQuery после первоначальной формы submit, затем изменение названия страницы

У меня установлена ​​форма, которая при отправке использует вызов ajax для извлечения данных через PHP-файл, который, в свою очередь, сбрасывает данные с заданного URL на основе значения поля ввода.

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

1) После подачи первоначальной формы мне бы хотелось, чтобы он автоматически обновлял запрос с установленными интервалами (выбран пользователем). Я хотел бы добавить новые результаты выше старых результатов, если это возможно.

2) Когда новые результаты возвращаются, я хотел бы, чтобы уведомление в заголовке страницы информировало пользователя (Think Facebook и их уведомление).

Текущий код jQuery / Ajax:

form.on('submit', function(e) { e.preventDefault(); // prevent default form submit $.ajax({ url: 'jobSearch.php', // form action url type: 'POST', // form submit method get/post dataType: 'html', // request type html/json/xml data: form.serialize(), // serialize form data beforeSend: function() { alert.fadeOut(); submit.val('Searching....'); // change submit button text }, success: function(data) { $('#container').css('height','auto'); alert.html(data).fadeIn(); // fade in response data submit.val('Search!'); // reset submit button text }, error: function(e) { console.log(e) } }); }); 

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

EDIT – jobSearch.php

 <?php error_reporting(E_ALL); include_once("simple_html_dom.php"); $sq = $_POST['sq']; $sq = str_replace(' ','-',$sq); if(!empty($sq)){ //use curl to get html content $url = 'http://www.peopleperhour.com/freelance-'.$sq.'-jobs?remote=GB&onsite=GB&filter=all&sort=latest'; }else{ $url = 'http://www.peopleperhour.com/freelance-jobs?remote=GB&onsite=GB&filter=all&sort=latest'; } $html = file_get_html($url); $jobs = $html->find('div.job-list header aside',0); echo $jobs . "<br/>"; foreach ($html->find('div.item-list div.item') as $div) { echo $div . '<br />'; }; ?> 

Вопрос 1:

Вы можете обернуть свой текущий код ajax в setInterval() который позволит вам продолжить опрос результатов jobSearch.php. Что-то вроде:

 function refreshPosts(interval) { return setInterval(pollData, interval); } function pollData() { /* Place current AJAX code here */ } var timer = refreshPosts(3000); 

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

Добавление данных вместо замены данных сложнее. Лучший способ, честно говоря, требует переписывать экранный скребок, чтобы возвращать объекты JSON, а не чистый HTML. Если вы хотите вернуть объект, например:

 { "posts": [ // Filled with strings of HTML ] } 

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

Вопрос 2:

Если вы переписали, как я предложил выше, то это так же просто, как подсчет количества новых сообщений и переписывание заголовка HTML

 $('title').html(postCount + ' new job postings!'); 

Надеюсь, это поможет!

Если я правильно понимаю. , ,

Для обновления, вы можете попробовать сделать что-то вроде этого:

 var refresh_rate = 2500 function refresh_data() { // - - - do some things here - - - setTimeout (refresh_data(),refresh_rate); // mb not really correct } 

Вы можете узнать больше об этом здесь

Надеюсь, я помог тебе