jQuery: get a Wikipedia definition

Getting a definition from Wikipedia using jQuery requires only a PHP script used as a proxy to perform this task. This script will return a JSON object that we can parse with jQuery. I've used a general purpose function taken from this excellent article and I've actually modified it in order to make it return a JSON object. The PHP script is as follows:

header('Content-Type: application/json');

function getWikiDefinition($def)

// http://www.barattalo.it/2010/08/29/php-bot-to-get-wikipedia-definitions/
 
{
  $url = 'http://en.wikipedia.org/w/api.php?action=opensearch&search='.urlencode($def).'&format=xml&limit=1';
  $ch = curl_init($url);

    curl_setopt($ch, CURLOPT_HTTPGET, TRUE);

    curl_setopt($ch, CURLOPT_POST, FALSE);

    curl_setopt($ch, CURLOPT_HEADER, false);

    curl_setopt($ch, CURLOPT_NOBODY, FALSE);
    
    curl_setopt($ch, CURLOPT_VERBOSE, FALSE);
    
    curl_setopt($ch, CURLOPT_REFERER, "");
    
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, TRUE);
    
    curl_setopt($ch, CURLOPT_MAXREDIRS, 4);
    
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
    
    curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows; U; Windows NT 6.1; he; rv:1.9.2.8) Gecko/20100722 Firefox/5.0.0');
    
    $page = curl_exec($ch);
    
    $xml = simplexml_load_string($page);
    
    if((string)$xml->Section->Item->Description) {
        return array('term' => (string)$xml->Section->Item->Text, 
                     'desc' => (string)$xml->Section->Item->Description, 
                     'url' => (string)$xml->Section->Item->Url);
    } else {
        return '';
    }
}


$definition = getWikiDefinition($_GET['d']);

echo json_encode($definition);

This script expects a GET parameter named d, which contains our definition term. So we can set up the following HTML form:

<form action="wikipedia/get.php" method="get" id="search">

<div>
 <label for="d">Term:</label>
 <input type="text" name="d" id="d" />
 <input type="submit" name="submit" id="submit" value="Get definition" />
</div>

</form>

Using jQuery now is very easy. In fact, the JSON object has this structure:

{
  "term": "...",
  "desc": "...",
  "url": "..."
  
}

Here's the jQuery's code:

$('#search').submit(function(event) {
  
    var $form = $(this);
    var term = $('#d', $form).val();
    
    $.ajax({
      type: 'GET',
      dataType: 'json',
      url: $form.attr('action'),
      data: 'd=' + term,
      success: function(data) {
      
        var html = '';
        html += '<div class="def">';
        html += '<h2>' + data.term + '</h2>';
        html += '<p>' + data.desc + '</p>';
        html += '<div><a href="' + data.url + '">' 
                 + data.url + '</a></div>';
        html += '</div>';
        
        $(html).appendTo($form);
        
      
      
      }
    });
    
  
    event.preventDefault();
  
});

You can see the demo below.

Demo

Live demo