1

I am a noob to jquery and I am stuck on this ajax request. I have a server on my local network running python service. When I hit the server through the browser with the request

http://192.168.0.109:5000/api/environment?seconds=10

I get the JSON I expect shown in the browser. So I know the server is working ok and responding to request OK

{
"Bedroom Light": {
    "host": "192.168.0.121", 
    "model": "Belkin Plugin Socket 1.0", 
    "name": "Bedroom Light", 
    "serialnumber": "221323K1300027", 
    "state": 0, 
    "type": "LightSwitch"
}

However, when trying to do this through Jquery - I get a jQuery - SyntaxError: Unexpected token : error in the browser console. Here is my Jquery

 $(function () {
  $.ajax({
    url: 'http://192.168.0.109:5000/api/environment?seconds=10',
    type: 'GET',
    crossDomain: true,
    dataType: 'jsonp',
    success: function(data) {
      console.log('sucess',data);
      }
    });
  });

and I am just running it through the following page through the main.js

<!doctype html>
<html><head>
    <meta charset="utf-8">
    <title>Home - Dashboard</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="main.js"></script>    
</head>
<body>
</body>
</html>

I have tried

dataType: 'json',

instead of jsonp and still get this issue. I added the crossdomain: true following another post on this site, but still receive the error.

where am I going wrong here?

my server logs the following in the console when I run the ajax

192.168.0.149 - - [2017-01-07 10:25:53] "GET /api/environment?seconds=10&callback=jQuery11110725321438557059_1483745153757&_=1483745153758 HTTP/1.1" 200 3977 0.510238

it logs this when I hit it through the browser directly.

192.168.0.149 - - [2017-01-07 10:27:02] "GET /api/environment?seconds=10 HTTP/1.1" 200 3977 0.629556

both my webserver and the server running the python service are located on the same network/subnet.

btw: the python services is the http://ouimeaux.readthedocs.io/en/latest/readme.html

thanks in advance

Scott S
  • 59
  • 2
  • 7
  • I think your server is responding with incomplete JSON. There is a missing `}`, which throws `Uncaught SyntaxError: Unexpected token :` – chester Jan 06 '17 at 23:40
  • Is the full output json? – Balaji Marimuthu Jan 06 '17 at 23:40
  • Sorry i did truncate the json for the post. it is a long list. When i pasted the json output into JSONlint it validated OK, so I think the json response is OK – Scott S Jan 07 '17 at 00:01
  • *"I have tried ... instead of jsonp and still get this issue"* Are you saying you are getting the exact same error? I doubt that. – Felix Kling Jan 07 '17 at 00:07

4 Answers4

0

Your output is not a valid json, it should be either array of object or object. your output json is missing "}".

{
"Bedroom Light": {
    "host": "192.168.0.121", 
    "model": "Belkin Plugin Socket 1.0", 
    "name": "Bedroom Light", 
    "serialnumber": "221323K1300027", 
    "state": 0, 
    "type": "LightSwitch"}
}
Balaji Marimuthu
  • 1,940
  • 13
  • 13
  • While that's correct, that's not the issue the OP has. – Felix Kling Jan 06 '17 at 23:58
  • Sorry i did truncate the json for the post. it is a long list. When i pasted the json output into JSONlint it validated OK, so I think the json response is OK – Scott S Jan 07 '17 at 00:04
0

You are telling jQuery to request JSONP:

dataType: 'jsonp',

but the server is sending back JSON, not JSONP. JSON is not valid JSONP, hence you get that error.

You can either

  • have to make the server send back JSONP, or

  • enable CORS (on the service) and tell jQuery to expect JSON:

    dataType: 'json',
Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
  • he mentioned already tried with data type as json – Balaji Marimuthu Jan 07 '17 at 00:05
  • @BalajiM: Right, but he probably didn't enable CORS. – Felix Kling Jan 07 '17 at 00:05
  • thanks. yes when I use json. I receive this as the error. XMLHttpRequest cannot load http://192.168.0.109:5000/api/environment. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. – Scott S Jan 07 '17 at 00:15
  • @ScottS: Yep. That's what you get when CORS is not enabled. – Felix Kling Jan 07 '17 at 00:17
  • I am running the ouimeaux on a raspberryPi. it is python server running in the console at the moment, not on any webserver. Doesn't CORS need to be enabled through a webserver. both my script and the python server are all on the same home network. – Scott S Jan 07 '17 at 00:19
  • @ScottS: CORS must be enabled by the endpoint your are connecting to. Your Python server needs to send the right `Access-Control-Allow-Origin` response header. If you cannot set the headers then change the response to be JSONP instead. *"both my script and the python server are all on the same home network."* That doesn't matter. Unless CORS is enabled, a script can only make Ajax requests to the location where the pages was loaded from. – Felix Kling Jan 07 '17 at 00:22
-1

JSON.stringify(data) before you pass it. This will turn it into the proper format for the request to handle it

Pabs123
  • 3,385
  • 13
  • 29
-1

TRY this..

.ajax({
  method: "GET",
  url: "http://192.168.0.109:5000/api/environment?seconds=10",
  dataType: "jsonp"
}).done(function(data) {
      console.log('sucess',data);
      });
user3653796
  • 158
  • 5