title: retrieving data from python bottle using ajax jquery
body: <p>I am trying an html page to interact with a python script which returns a json string, using ajax/jquery. I installed bottle for the basic functionality of url routing.</p>
  
  <p>The problem is that my browser shows that my ajax script is recieving a content-length of 5 (which is the string "tring" (see server.py function showAll()) but somehow its not stored in the variable result(see function loader in script.js) and hence I cannot use the returned data.</p>
  
  <p>can anyone tell me what is going wrong..</p>
  
  <p>my html file looks like</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;
              magpie
          &lt;/title&gt;
          &lt;script type="text/javascript" src="js/script.js"&gt;&lt;/script&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;script type="text/javascript"&gt;loader();&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="main"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>If I call load() instead of loader() in this file the content is displayed.</p>
  
  <p>the ajax script:</p>
  
  <p><strong>script.js</strong></p>
  
  <pre><code>function loader()
  {
      $(document).ready(function(){
          $.get('http://[localhost]:1111/', function(result){
              alert('success');
              $('#main').html(result);
          });
      });
  }
  
  function load()
  {
      $(document).ready(function () {
          $.getJSON('data.json', function (data) {
              var output = '';
              $.each(data, function(key, val) {
                  output += '&lt;h3&gt;' + val.device + '  ' + val.status + '&lt;/h3&gt;';
              })
              $('#main').html(output);
          });
      });
  }
  </code></pre>
  
  <p>the two python scripts are :</p>
  
  <p><strong>server.py</strong></p>
  
  <pre><code>from bottle import get, post, request, run, response
  import devices
  
  @get('/')
  def showAll():
      # return devices.data
      return "tring"
  
  @post('/act')
  def act():
      deviceId = request.forms.get('deviceId')
      devices.changeState(deviceId)
      return
  
  run(host = "[localhost]", port = 1111)
  </code></pre>
  
  <p><strong>devices.py</strong></p>
  
  <pre><code>import json
  
  data = json.load(open('data.json', 'r+'))
  nos = len(data) # Number of devices
  
  def changeState(id):
      state = data[id]['status']
      if state == 'on':
          data[id]['status'] = 'off'
      else:
          data[id]['status'] = 'on'
  
      json.dump(data, open('data.json', 'w'))
  
      return 1
  </code></pre>
  
  <p>and finally my json file(if it matters):</p>
  
  <pre><code>{"B1": {"device": "fan", "status": "on"}, "B3": {"device": "light", "status": "off"}, "B2": {"device": "fan", "status": "on"}}
  </code></pre>
  
  <p>Loading <a href="http://[localhost]:1111/" rel="nofollow noreferrer">http://[localhost]:1111/</a> in browser shows the returned string "tring".Also the page loads only in firefox while other browsers show some allow-acces-origin error.</p>
  
  <p>This is a screenshot of my browser :</p>
  
  <p><img src="https://i.stack.imgur.com/8ZaUs.png" alt="enter image description here"></p>