Get JSON via javascript [Cross-Domain]

Question

Please help me with the following situation:

there is the page p1.aspx with only one button:

<button id="btn1" onclick="btnclick();">Button</button>    
<script type="text/javascript">
  $('#btn1').click(function () {
    $.getJSON("http://localhost/p2.aspx", function (data) {
      $.each(data, function (i, field) {            
        alert(field);
      });
    });
  });
</script>

Above is how I want to get the JSON text via javascript.

Web application http://localhost/p2.aspx is redirected to http://localhost/p3.aspx inside. And the page http://localhost/p3.aspx again is redirected back to http://localhost/p2.aspx?code=1.

code=1

is the value I want read in my javascript code. But it's not works.

In p2.aspx I generate JSON data as following

Response.Clear();
Response.ContentType = "application/json; charset=utf-8";
Response.Write(jsonString);
Response.End();

After this I can not read json data via javascript. But if I just put the http://localhost/p2.aspx via web browser then it get json data on the page.

The cause is that p2.aspx will be placed on my server but p3.aspx and p1.aspx will be placed on foreign servers — sancoma
– sancoma, Commented Jul 31, 2013 at 19:14
the value for jsonstring is { flag: "1" } just the simple value to try get json object — sancoma
– sancoma, Commented Jul 31, 2013 at 19:21
@sancoma: Using crossDomain and/or adding ?callback=? doesn't magically make it work. You need to make sure the server supports it. If you add ?callback=?, you're requesting JSONP. This means you should return a JavaScript file (application/javascript) using the callback param as a function call: like $_GET['callback'] . '(' . json_encode($data) . ');' (I use PHP, adapt to your language). Or use CORS, by setting the Access-Control-Allow-Origin header on the server (enable-cors.org) — gen_Eric
– gen_Eric, Commented Jul 31, 2013 at 20:25

Darin Dimitrov · Accepted Answer · 2013-07-31 20:24:28Z

3

You need to use JSONP if you want that to work.

So your script should take into account the callback parameter:

Response.Clear();
string callback = Request["callback"];
if (!string.IsNullOrEmpty(callback))
{
    Response.ContentType = "application/javascript; charset=utf-8";
    Response.Write(string.Format("{0}({1})", callback, jsonString));
}
else
{
    Response.ContentType = "application/json; charset=utf-8";
    Response.Write(jsonString);
}
Response.End();

And then on the client:

$.getJSON("http://localhost/p2.aspx?callback=?", function (data) {
    ...
});

Notice how the callback query string parameter is set to ?. Basically jQuery will translate this to a request that looks like this:

http://localhost/p2.aspx?callback=jQuery123456789....

and your server side script should of course return JSONP which is your JSON string wrapped into the callback name:

jQuery123456789....({"code":1})

Also make sure that the jsonString variable used in your code is an actual JSON string (as its name suggests). Because what you have shown in your question (code=1) is very far from being JSON.

answered Jul 31, 2013 at 20:24

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

gen_Eric Over a year ago

If you are using JSONP, the correct Content-type to send with the response should be application/javascript. JSONP is actually just a JavaScript file, that's appended to your page.

Darin Dimitrov Over a year ago

You are perfectly correct. I have updated my answer to reflect this. Thanks for pointing that out.

gen_Eric Over a year ago

No problem. Some browsers might've got mad about that :-P

asawyer Over a year ago

@DarinDimitrov Have I mentioned lately how much I love you?

Darin Dimitrov Over a year ago

@sancoma, this doesn't matter. No matter how many redirects you are doing, at the end of the day you should return JSONP as shown in my answer if you want to be able to do cross domain AJAX calls.

|

Collectives™ on Stack Overflow

Get JSON via javascript [Cross-Domain]

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related