title: using AJAX to get data from Bottlepy server
body: <p>I'm trying to retrieve json data from a bottlepy server onto a webpage. I was trying to implement a basic version first so tried with just strings. But nothing seems to be happening. Here is the code - </p>
  
  <p>HTML(including js) - </p>
  
  <pre><code>&lt;!DOCTYPE&gt;
  &lt;html&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;body&gt;
  &lt;script&gt;
  function print()
  {
      $(document).ready(function(){
          $.get('http://localhost:8080/check', function(result){
              alert('success');
              $('#main').html(result);
          });
      });
  }
  
  print();
  &lt;/script&gt;&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The python code - </p>
  
  <pre><code>from bottle import Bottle, route, get,request, response, run, template
  
  app = Bottle()
  
  @app.hook('after_request')
  def enable_cors():
      response.headers['Access-Control-Allow-Origin'] = '*'
  
  # a simple json test main page
  str = "Hello"
  @route('/')                   #irrelevant to this question. Used this to check server...
  def test():
      return template('file', str)
  
  @app.get('/check')
  def showAll():
      return str
  
  run(host='localhost', port=8080)
  </code></pre>
  
  <p>What do I have to do to access the data on the server? 
  Note : The HTML is a separate file, and I want the code to work irrespective of the location of the HTML. </p>
  
  <p>Also, if this is not possible, how can I do it with the help of templates? </p>