JSON return empty response on FireFox & Safari (Windows Vista)

SOLVED:

The problem lies within Firefox 6.0.2 security. I have changed my URL request from: http://mysite.com/ajax/request to /ajax/reques开发者_StackOverflowt and Its working.

If you need to use cross domains, you need to use jsonp as your dataType.

Many thanks to evildead

My JSON request to my server returns an empty response. This only happens in Firefox 6.0.2 and Safari in a Windows Vista machine.

The output is generated by a php script and has json/application headers.

This returns empty response:

    $('#ajaxcall').click(function(){
var ts = new Date().getTime();
var urlz = $('#targeturl').val()+'/'+ts;
var dataString = $("#datazz").val();
$.ajax({  
    type: "POST", url: urlz, data: "data="+dataString, 
    success: function(data){  
        var obj = jQuery.parseJSON(data);

        for (var i = 0; i < obj.length; i++) {
            var object = obj[i];
            for (property in object) {
            var s = property + "=" + object[property] + "<br>";
                $("#console").after(s);
            }
        }
    }  
});
});

As well as this:

$( "#tags" ).autocomplete({
        source: function( request, response ) {
            $.post("http://mysite.com/v2/ajax/tag_suggestion/ab", {data:request.term}, function(data){
                response($.map(data, function(item) {

                if ($('#tagsboxvals').hasClass(item.name.split(' ').join('_'))){
                return null;

                } else {
                return {
                    label: item.name,
                    value: item.name
                }
                }
                }))
            }, "json");
            },
            ....
});

Thanks for your help

Edit: This is what the PHP script is generating:

$arr = array(
    array('name'=>'pizza', 'point'=>'1'),
    array('name'=>'blt', 'point'=>'1'));

    header('Cache-Control: no-cache, must-revalidate');
    header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
    header('Content-type: application/json');
    echo json_encode($arr);

It's a well formed JSON document.

Headers: Response Headers Date Wed, 07 Sep 2011 23:58:42 GMT Server Apache/2.2.3 (CentOS) X-Powered-By PHP/5.1.6 Expires Mon, 26 Jul 1997 05:00:00 GMT Cache-Control no-cache, must-revalidate Pragma no-cache Content-Length 29 Connection close Content-Type application/json Request Headers Host mysite.com User-Agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:6.0) Gecko/20100101 Firefox/6.0 Accept application/json, text/javascript, /; q=0.01 Accept-Language en-us,en;q=0.5 Accept-Encoding gzip, deflate Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7 Connection keep-alive Content-Type application/x-www-form-urlencoded; charset=UTF-8 X-Requested-With XMLHttpRequest Referer http://mysite.com/v2/user/register Content-Length 8 Cookie city=new york; __utma=100174657.1435105779.1308773648.1314994226.1315368765.113; __utmz=100174657.1315368765.113.98.utmcsr=mysite.com|utmccn=(referral)|utmcmd=referral|utmcct=

Headers Post Response JSON Object { name="pizza", point=1} [Object { name="pizza", point=1}]

It works fine with chrome on the same machine, but not firefox and safari.

You have to make sure, that your return values are "really" json. Some browsers dont accept json which isn't syntactically correct.

so make 100% sure you return something like:

{"foo": 1, "bar": "foobar"}

this is correct json.

e.g. this is not:

{'foo': 1, 'bar': "foobar"}

this is also wrong:

{foo: 1, bar: "foobar"}

further some advices to your javascript code:

   return {
                label: item.name,
                value: item.name
            }

this is not correct, wrap your keys in quotes. return { "label": item.name, "value": item.name }

Generally I've read many time you should do ajax calls as GET Requests not POST, because POST produces more overhead and traffic. But don't nail me for that.

Further, when you want to return e.g. an array from within php, use json_encode($var)

http://php.net/manual/de/function.json-encode.php

For your concrete use case return:

{"name": "pizza", "point": 1}

from within your php script.

Try this on your page in firebug:

var obj = jQuery.parseJSON('[{"name":"pizza","point":1}]');

    for (var i = 0; i < obj.length; i++) {
        var object = obj[i];
        for (property in object) {
        var s = property + "=" + object[property] + "<br>";
            $("#console").after(s); console.log(s)
        }
    }