У меня установлена форма, которая при отправке использует вызов 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 />'; }; ?>
Вы можете обернуть свой текущий код 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 ] }
Теперь у вас есть массив, который можно сортировать, фильтровать и индексировать. Это дает вам возможность сравнить одно сообщение с другим, чтобы узнать, старый или свежий.
Если вы переписали, как я предложил выше, то это так же просто, как подсчет количества новых сообщений и переписывание заголовка 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 }
Вы можете узнать больше об этом здесь
Надеюсь, я помог тебе