Problem Fetching JSON Result with jQuery in Firefox and Chrome (IE8 Works)
I'm attempting to parse JSON using jQuery and I'm running into issues. Using the code below, the data keeps coming back null:
<!DOCTYPE html>
<html>
<head>
<title>JSON Test</title>
</head>
<body>
<div id="msg"></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$.ajax({
url: 'http://datawarehouse.hrsa.gov/ReleaseTest/HGDWDataWebService/HGDWDataService.aspx?service=HC&zip=20002&radius=10&filter=8357&format=JSON',
type: 'GET',
dataType: 'json',
success: function(data) {
$('#msg').html(data[0].title); // Always null in Firefox/Chrome. Works in IE8.
},
error: function(data) {
alert(data);
}
});
</script>
</body>
</html>
The JSON results look like the following:
{"title":"HEALTHPOINT TYEE CAMPUS","link":"http://www.healthpointchc.org","id":"tag:datawarehouse.hrsa.gov,2010-04-29:/8357","org":"HEALTHPOINT TYEE CAMPUS","address":{"street-address":"4424 S. 188TH St.","locality":"Seatac","region":"Washington","postal-code":"98188-5028"},"tel":"206-444-7746","category":"Service Delivery Site","location":"47.4344818181818 -122.277672727273","update":"2010-04-28T00:00:00-05:00"}If I replace my URL with the Flickr API URL (http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?), I get back a valid JSON result that I am able to make use of.
I have successfully validated my JSON at JSONLint, so I've run out of ideas as to what I might be doing wrong.
Any thoughts?
Update: I had the client switch the content type to application/json. Unfortunately, I'm stil开发者_如何学Cl experiencing the exact same problem. I also updated my HTML and included the live URL I've been working with.
Update 2: I just gave this a try in IE8 and it works fine. For some reason, it doesn't work in either Firefox 3.6.3 or Chrome 4.1.249.1064 (45376). I did notice a mistake with the data being returned (the developer is returning a collection of data, even for queries that will always return a single record), but it still baffles me why it doesn't work in other browsers.
It might be important to note that I am working from an HTML file on my local file system. I thought it might be a XSS issue, but that doesn't explain why Flickr works.
Flickr's API supports JSONP, whereas the one you're connecting to does not.
jQuery sees that =? and understands there's a request for a JSONP callback and creates one. You can see it on line 5003 of the jQuery library your sample page uses.
So, you need to change two things
- Add a callback parameter to your request. Whatever you (or your developer) wants to call it. Let's say you choose
cb- so add this to the AJAX request:&cb=?(this way we let jQuery handle the creation of a callback for us) - Have your developer that made the service accept this new parameter, and "pad" the result with it before returning it.
Have you considered using the more flexible $.ajax? I would break it down there and see if the default $.getJSON is not providing you with exactly what you need.
$.ajax({
url: 'results.json',
type: 'GET',
dataType: 'json',
success: function(data, status)
{
alert(data);
}
});
Would be the equivalent ajax 'parent' implementation. Try mucking around and see if there is a specific property you need to set.
Is the content served as "application/json"?
if one url (the flickr url) works, while another doesnt (your own), i would say the problem is with your url.
It looks like you are using a relative path, is that your intention? have you used firebug's net panel to see what the request looks like?
This is a case of Crossdomain request error. Flickr Works , because it is JSONP , while the other url does not work because it is not JSONP enabled. 1. Check if the url supports JsonP 2. if not, create a proxy web service in your local domain (the same domain as the web page is) 3. Call that proxy webservice which in turn calls the external url from the server side.
加载中,请稍侯......
精彩评论