Created
September 10, 2014 18:37
-
-
Save mayfer/8468883a4ae886c420ef to your computer and use it in GitHub Desktop.
jQuery/AJAX/JSON/sinatra example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| require 'sinatra' | |
| require 'nokogiri' | |
| require 'open-uri' | |
| require 'sinatra/json' | |
| # require 'json' | |
| # sets the view directory correctly (to make it work with gists) | |
| set :views, Proc.new { File.dirname(__FILE__) } | |
| get '/' do | |
| erb :jsonp | |
| end | |
| get '/bbc' do | |
| erb :json | |
| end | |
| get '/bbc/fetch' do | |
| doc = Nokogiri::HTML(open('http://www.bbc.com/')) | |
| response = { | |
| :content => doc.content, | |
| :some_other_shit => 'poop', | |
| } | |
| json response | |
| end |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>ajax example</title> | |
| <script type='text/javascript' src='http://code.jquery.com/jquery-1.11.1.min.js'></script> | |
| <script> | |
| $(document).ready(function(){ | |
| // we use submit instead of click to take advantage of things like | |
| // using the enter key to submit | |
| $('form').on('submit', function(e){ | |
| e.preventDefault(); | |
| var query = $('#query').val(); | |
| var url = '/bbc/fetch'; | |
| $('#results').html("Patience my friend"); | |
| $.ajax(url, { | |
| success: function(response) { | |
| var content = response.some_other_shit; | |
| $('#results').html(content); | |
| }, | |
| dataType: "json", | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div id='header'> | |
| Search: | |
| <form> | |
| <input type='text' name='query' id='query' /> | |
| <input type='submit' name='submit' id='submit' value='Search' /> | |
| </form> | |
| </div> | |
| <div id='results'> | |
| <h2></h2> | |
| <div class='content' style='whitespace: pre;'> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>ajax example</title> | |
| <script type='text/javascript' src='http://code.jquery.com/jquery-1.11.1.min.js'></script> | |
| <script> | |
| $(document).ready(function(){ | |
| // we use submit instead of click to take advantage of things like | |
| // using the enter key to submit | |
| $('form').on('submit', function(e){ | |
| e.preventDefault(); | |
| var query = $('#query').val(); | |
| var url = 'http://en.wikipedia.org/w/api.php?format=json&action=query&titles='+ query +'&prop=revisions&rvprop=content&callback=asd'; | |
| $.ajax(url, { | |
| success: function(response) { | |
| for(page in response.query.pages) { | |
| var title = response.query.pages[page].title; | |
| var revision = response.query.pages[page].revisions[0]; | |
| var content = revision['*']; | |
| $('#results h2').html(title); | |
| $('#results .content').html(content); | |
| } | |
| $('#results').html(); | |
| }, | |
| dataType: "jsonp", | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div id='header'> | |
| Search: | |
| <form> | |
| <input type='text' name='query' id='query' /> | |
| <input type='submit' name='submit' id='submit' value='Search' /> | |
| </form> | |
| </div> | |
| <div id='results'> | |
| <h2></h2> | |
| <div class='content'> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment