jQuery getJSON not working

Question

I am trying to get some data back from a server using jQuery $.getJSON , and the code seems to work fine, until it gets to $.getJSON , it doesn't seem to be triggering that at all, there are no console logs when I press the button, here is the code below,

$(document).ready(function(){
var funk;
    $('#button').live('click', function(){
        var funk = "";
        var query = "";
        $('#wrapper > [data-custom="field"]').each(function(i, data){

            if(i == 0){
                funk = query + $(this).attr('id')+" = '"+$(this).val()+"'";
            }else{
                funk = funk + " AND " + $(this).attr('id')+" = '"+$(this).val()+"'";
            };

        }); 

        $.getJSON('test.php', {query: funk}, function(json){
            console.log(json)
        });

    });
});

the PHP file test.php in the same folder,

$weo = $_GET['query'];

echo $weo;

Any ideas on what could be causing the problem?

Thanx in advance!

Answer 1

I expect that getJSON is falling over because the server is not returning nice JSON syntax.

Try doing

echo json_encode($weo);

in your PHP file. If you don't ultimately want to use JSON, but plain text instead, use $.get :

$.get('test.php', {query: funk}, function(data){
    console.log(data)
});

Answer 2

If you are debugging using:

-> Firefox: open Firebug and look at the Net tab to make sure the request is firing, and to see what the response from the server is.

-> IE: Fire up Fiddler2 to see the request/response.

-> Chrome: use the Resources tab.

Once you see what the server is returning (if anything), you can figure out how to proceed.

Answer 3

For sure your Test.php is not working as expected. To debug what is being returned back from the server try this code

function AjaxDebug() {
$.ajax({
    type: "GET",
    url: "test.php",
    dataType: "jsonp",
    data: ({query: funk}),
    success: function(results) {
        alert("Success!");
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
    alert(errorThrown);
    }
}); }

Then try having the break point in error and examine the XMLHttpRequest.getresponseText, getresponseXML etc to have a better understanding of what the problem is.

Answer 4

I had the same problem with getJSON not working. I noticed that data gets loaded but is not available to use.

The solution is to use JSONP and in the url querystring add a callback function variable.

 $.getJSON("http://www.example.com/test.php?callback=?",function(json){
        console.log(json);
    });

Note that we put a ? as the callback function name instead of a real function name. This is because jQuery replaces the ? with a generated function name (like jsonp1232617941775) that calls the inline function.

In your PHP you will need to output with the callback function.

echo $_GET['callback'] . '(' . $jsonData . ');';
// prints: jsonp1232617941775({"name" : "Gaurav", "age" : "91"});

This will output valid JSONP object and you will be able to load and use in your jQuery code.