Asked  7 Months ago    Answers:  5   Viewed   48 times

I would like to parse JSON array data with jquery ajax with the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample</title>
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    var result;
    function jsonparser1() {
        $.ajax({
            type: "GET",
            url: "http://10.211.2.219:8080/SampleWebService/sample.do",
            dataType: "jsonp",
            success: function (xml) {
                alert(xml.data[0].city);
                result = xml.code;
                document.myform.result1.value = result;
            },
        });
    }        
</script>    
</head>
<body>
<p id="details"></p>
<form name="myform">
    <input type="button" name="clickme" value="Click here to show the first name" onclick=jsonparser1() />
    <input type="text" name="result1" readonly="true"/>        
</form>
</body>
</html>

My JSON data is:

{"Data":   [{"Address":"chetpet","FirstName":"arulmani","Id":1,"LastName":"sathish","City":"chennai"},{"Address":"ramapuram","FirstName":"raj","Id":2,"LastName":"nagu","City":"chennai"},{"Address":"ramapuram","FirstName":"raj","Id":2,"LastName":"nagu","City":"chennai"},{"Address":"ramapuram","FirstName":"ramaraj","Id":3,"LastName":"rajesh","City":"chennai"},{"Address":"ramapuram","FirstName":"yendran","Id":3,"LastName":"sathi","City":"chennai"}],"Code":true}

But i am not getting any output...anybody please help out...

 Answers

40

Concept explained

Are you trying do a cross-domain AJAX call? Meaning, your service is not hosted in your same web application path? Your web-service must support method injection in order to do JSONP.

Your code seems fine and it should work if your web services and your web application hosted in the same domain.

When you do a $.ajax with dataType: 'jsonp' meaning that jQuery is actually adding a new parameter to the query URL.

For instance, if your URL is http://10.211.2.219:8080/SampleWebService/sample.do then jQuery will add ?callback={some_random_dynamically_generated_method}.

This method is more kind of a proxy actually attached in window object. This is nothing specific but does look something like this:

window.some_random_dynamically_generated_method = function(actualJsonpData) {
    //here actually has reference to the success function mentioned with $.ajax
    //so it just calls the success method like this: 
    successCallback(actualJsonData);
}

Summary

Your client code seems just fine. However, you have to modify your server-code to wrap your JSON data with a function name that passed with query string. i.e.

If you have reqested with query string

?callback=my_callback_method

then, your server must response data wrapped like this:

my_callback_method({your json serialized data});
Tuesday, June 1, 2021
 
the_e
answered 7 Months ago
41

From the PHP:

$url = $_GET['url'];

It is trying to read the URL from a query string parameter called url.

From the JavaScript:

url=proxy + '?' +'https://www.aviationweather.gov/adds/dataserver_current/httpparam?datasource=metars&requestType=retrieve&format=xml&mostRecentForEachStation=constraint&hoursBeforeNow=1.25';

You are passing the data raw, without encoding it as a query string.

To do that:

var url = 'https://www.aviationweather.gov/adds/dataserver_current/httpparam?datasource=metars&requestType=retrieve&format=xml&mostRecentForEachStation=constraint&hoursBeforeNow=1.25'
var query = encodeURIComponent("url") + "=" + encodeURIComponent(url);
var proxy_url = proxy + "?" + query;

That said, you are using jQuery already so you shouldn't be constructing the URL manually in the first place:

var url = 'https://www.aviationweather.gov/adds/dataserver_current/httpparam?datasource=metars&requestType=retrieve&format=xml&mostRecentForEachStation=constraint&hoursBeforeNow=1.25'

$.ajax({
    type: "GET",
    url: proxy,
    data: {'url': url},
    // etc
Saturday, May 29, 2021
 
kmunky
answered 7 Months ago
93

JSONP is not JSON. A JSONP response would consist of a JavaScript script containing only a function call (to a pre-defined function) with one argument (which is a JavaScript object literal conforming to JSON syntax).

The response you are getting is JSON, not JSONP so your efforts to handle it as JSONP fail.

Change dataType: 'jsonp' to dataType: 'json' (or remove the line entirely, the server issues the correct content-type so you don't need to override it).

Since your script is running on a different origin to the JSON then you will also need to take steps (most, but not all, of which require that you control the host serving the JSON) to work around the same origin policy.

Wednesday, June 9, 2021
 
MKM
answered 6 Months ago
MKM
73

It is XSS and it is forbidden. You should really not do things that way.

If you really need to, make your AJAX code call the local code (PHP, ASP, whatever) on blah.com and make it behave like client and fetch whatever you need from foo.com and return that back to the client. If you use PHP, you can do this with fopen('www.foo.com/blah.html', 'r') and then reading the contents as if it was a regular file.

Of course, allow_remote_url_fopen (or whatever it is called exactly) needs to be enabled in your php.ini.

Saturday, June 19, 2021
 
VieStar
answered 6 Months ago
65

you can use getJSON for example

$.getJSON('ajax/test.json', function(data) {
  $('.result').html('<p>' + data.foo + '</p>'
    + '<p>' + data.baz[1] + '</p>');
});

check complete getJSON documentation http://api.jquery.com/jQuery.getJSON/

EDIT

I was wrong... using Jquery.ajax will cause cross-browser issue but not with Jquery.getJSON

http://docs.jquery.com/Release:jQuery_1.2/Ajax#Cross-Domain_getJSON_.28using_JSONP.29

Here is an example of cross-domain get JSON

EDIT

Firefox has a problem with HTTPS, as i know it will be fixed if you send your request like this

$.getJSON('ajax/test.json',{}, function(data) {
  $('.result').html('<p>' + data.foo + '</p>'
    + '<p>' + data.baz[1] + '</p>');
});

Source: AJAX https POST requests using jquery fail in Firefox

Hope this helps

Saturday, October 9, 2021
 
a_horse_with_no_name
answered 2 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share