我已经设置了，提交时，使用Ajax调用通过，反过来擦伤从给定的URL数据基于输入字段值的PHP文件检索数据的一种形式。

一切都工作的很好，但我想现在要做的是实现了几个附加功能。

1）初始表单提交后，我想它的自动更新，在设定的时间间隔查询（由最终用户选择）。我想追加上述旧的结果，如果可能的。新的结果。

2）当新的返回结果，我想在页面标题的通知，告知用户（想想Facebook和他们的通知警报）。

目前的jQuery /阿贾克斯code：

  form.on（'提交'，函数（E）{
即preventDefault（）; // prevent默认表单提交

$阿贾克斯（{
  网址：jobSearch.php'，//表单操作URL
  类型：'POST'，//提交表单的方法GET / POST
  数据类型：HTML，//请求类型HTML / JSON / XML
  数据：form.serialize（）//序列化表单数据
  beforeSend：函数（）{
    alert.fadeOut（）;
    submit.val（搜索...）; //改变提交按钮上的文字
  }，
  成功：功能（数据）{
    $（'＃集装箱）的CSS（'高度'，'自动'）。
    alert.html（数据）.fadeIn（）; //淡入响应数据
    submit.val（搜索！）; //重新提交按钮上的文字
  }，
  错误：函数（E）{
    执行console.log（五）
  }
}）;

}）;
 

我不太知道我怎么会去这一点，任何人都可以给我的见解？我不是后有人来完成它对于我来说，只要给我一点上，我应该用什么方法指导。

编辑 - jobSearch.php

 ＆LT; PHP
使用error_reporting（E_ALL）;
include_once（simple_html_dom.php）;

$平方= $ _ POST ['平'];
$平方= str_replace函数（''，' - '，$平方米）;


如果（！空（$ SQ））{
//使用curl将HTML内容
$ URL = 'http://www.peopleperhour.com/freelance-'.$sq.'-jobs?remote=GB&onsite=GB&filter=all&sort=latest';
}其他{
$ URL = 'http://www.peopleperhour.com/freelance-jobs?remote=GB&onsite=GB&filter=all&sort=latest';
}

$的HTML = file_get_html（$网址）;
 $就业= $基于HTML＆GT;找到（'div.job列表头撇开'，0）;
回声$工作。 ＆LT; BR /＆gt;中;
的foreach（$基于HTML＆GT;找到（'div.item列表div.item）为$ DIV）{
 回声$ DIV。 '＆LT; BR /＆GT;';
};
？＆GT;
 

解决方案

问题1：

您可以包装在当前的ajax code进行的setInterval（），这将让你继续轮询jobSearch.php结果。是这样的：

 函数refreshPosts（间隔）{
  返回的setInterval（pollData，间隔）;
}

功能pollData（）{
  / *将当前AJAX code这里* /
}

VAR定时器= refreshPosts（3000）;
 

这具有能够调用额外的好处 timer.clearInterval（）停止自动更新。

追加替换数据的数据反而是棘手。最好的办法，说实话，需要重写你的屏幕刮板将返回JSON对象，而不是单纯的HTML。如果你要像返回一个对象：

  {
  上岗：
  //充满HTML串
  ]
}
 

您现在具有可以排序，过滤和索引的数组。这给你的权力，以一个职位比较的工具，看看它是旧的还是新的。

问题2：

如果你重写了像我上面的建议，比这是为保持新鲜的职位数的计数和重写标题HTML

  $（标题）HTML（postCount +的新工作信息！'）。
 

希望帮助！

I have a form set up that, when submitted, uses an ajax call to retrieve data via a PHP file that in turn scrapes data from a given URL based on the input field value.

Everything is working perfectly, but what I'd like to do now is implement a couple of additional features.

1) After the initial form submission, I'd like it to auto-update the query at set intervals (Chosen by the end user). I'd like to append the new results above the old results if possible.

2) When new results are returned, I'd like a notification in the title of the page to inform the user (Think Facebook and their notification alert).

Current jQuery/Ajax code:

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

});

I'm not too sure how I'd go about this, could anyone give me an insight? I'm not after somebody to complete it for me, just give me a bit of guidance on what methodology I should use.

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 />';
};
?>

Question 1:

You can wrap your current ajax code in a setInterval() which will allow you to continue to poll the jobSearch.php results. Something like:

function refreshPosts(interval) {
  return setInterval(pollData, interval); 
}

function pollData() {
  /* Place current AJAX code here */
}

var timer = refreshPosts(3000);

This has the added benefit of being able to call timer.clearInterval() to stop auto-updating.

Appending the data instead of replacing the data is trickier. The best way, honestly, requires rewriting your screen scraper to return JSON objects rather than pure HTML. If you were to return an object like:

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

You now have an array that can be sorted, filtered, and indexed. This gives you the power to compare one post to another to see if it is old or fresh.

Question 2:

If you rewrote like I suggested above, than this is as easy as keeping count of the number of fresh posts and rewriting the title HTML

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

Hope that helps!