"Uncaught SyntaxError: Unexpected token" when parse jsonp

Question

I have created a json webservice in ASP.NET.

URL http://mydomain:21130/JSONdata.aspx?Option=GetListRootMenus

Data return:

{"NumberOfMenu":"2", "Menus":[{"MenuKey":"menu_home", "MenuLevel":"1" },{"MenuKey":"menu_info", "MenuLevel":"1" }]}

After that, i parsed via JSONP

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getJSON demo</title>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p> this is a param </p>
 <script>
      $(document).ready(function(){
      console.log("zc");
            $.ajax({
                  dataType: "jsonp",
                  type: 'GET',
                  url: "http://mydomain:21130/JSONdata.aspx?Option=GetListRootMenus&callback=?",
                  success: function(data) {
                    console.log("123");
                  },
                  error: function(){
                    console.log("456");
                  }
            });
      });
</script>
</body>
</html>

but wrong. i don't know why :( enter image description here

JSON and JSONP are two completely different things, despite the similar name. See https://en.wikipedia.org/wiki/JSONP and http://stackoverflow.com/q/2887209/218196 . Basically, if you tell jQuery to expect JSONP, you have to return JSONP, not JSON. We really should have a canonical answer for that. — Felix Kling, Oct 04 '14 at 20:27

score 2 · Accepted Answer · edited May 23 '17 at 10:25

As I explained in my comment, your service returns JSON, while jQuery expects JSONP. This is an issue because the response will be evaluated as JavaScript, but you are not sending back valid JavaScript.

Since you have control over the server, you have three possible solutions:

1. Tell jQuery to expect JSON

If there are no cross-domain issues because the site itself is also served from that domain, simple let jQuery make a real Ajax request, by changing dataType to json and removing callback=? from the URL.

2. Enable CORS (and tell jQuery to expect JSON)

If there are cross-domain issues, you can still do what I said in the first solution, but in addition, enable CORS on your server. In short, this allows other sites to make Ajax requests to your server. Have a look at http://enable-cors.org/ to learn how to enable it for your server.

3. Return JSONP

JSONP is all about including JavaScript dynamically. This works across domains because <script> elements don't have the same-origin restriction that Ajax has. However, it is still something that the server has to support because it has to return valid JSON. If your JSON response was

{"foo": 42}

then the JSONP response would be

func({"foo": 42});

The name of the function (func) in this example, is taken from some GET parameter that you could choose arbitrarily, but most common is callback. jQuery will actually choose a random function name so it will send something like

callback=jQuery123135343456456

your service has to take that value and use it as function name for JSONP, i.e.

jQuery123135343456456({"foo": 42});

"Uncaught SyntaxError: Unexpected token" when parse jsonp

1 Answers1

1. Tell jQuery to expect JSON

2. Enable CORS (and tell jQuery to expect JSON)

3. Return JSONP