Retrieve JSON GET data with Javascript/JQuery

Question

What I am trying to do is retrieve JSON data from an online web service that searches and finds a certain string in a MySQL database and display it using Javascript on an HTML page.

What I am struggling with is actually displaying the resulting data.

The relevant areas of my HTML page looks like this:

<form onSubmit="results()">
    <fieldset>
        <label for="area">First digits of postal code:</label>
        <input name="area" type="text" maxlength="4" placeholder="AB12" required />
        <input type="submit" value="Search" name="search" />
    </fieldset>
</form>



<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="cordova-2.3.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">

function results(){
    $.ajax({
        url: 'http://www.foobar.com/cp/index.php?area=AB12',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        timeout: 5000,
        success: function(data, status){
            $.each(data, function(i,item){
                var place = '<h1>'+item.location+'</h1>'
                + '<p>'+item.id+'</br>';

                output.append(place);
            });
        },
        error: function(){
            output.text('There was an error loading the data.');
        }
    });
};
</script>

<div id="place">
<h3>Places near your location</h3>
</div>

The page for the GET data is http://www.foobar.com/cp/index.php with the search variable 'area'. Test sample is ?area=AB12.

And what exactly is it that you are having problems with? What is the result you get and what do you expect to get? — Felix Kling
– Felix Kling, Commented Jan 23, 2013 at 13:21
FWIW, the API does not seem to support JSONP properly. Appending jsoncallback=foo returns foo[{... which is clearly wrong. You should notify them or have a look at their API documentation how to make a proper JSONP call. — Felix Kling
– Felix Kling, Commented Jan 23, 2013 at 13:23
Well, once "submit" is pressed, the page refreshes into ?area=AB12&search=Search and nothing else changes. I want the page to display all the rows' data but there is no visible change to the page at all. — Ben
– Ben, Commented Jan 23, 2013 at 13:24
I wrote the API myself just to do this single, simple function, is that an issue if this is all that I will be using it for? — Ben
– Ben, Commented Jan 23, 2013 at 13:24
Then you implemented it incorrectly. You need to generate a function call, i.e. the response should be foo(<json here>); not foo<json here>. It should be trivial to fix and then everything else should work fine. — Felix Kling
– Felix Kling, Commented Jan 23, 2013 at 13:27

rsp · Accepted Answer · 2013-01-23 14:04:22Z

4

It seems that this service is not correctly wrapping the JSON object in parentheses so it doesn't work as JSONP.

See: http://www.entertainmentcocktail.com/cp/index.php?area=AB12&jsoncallback=TEST

It returns:

TEST[{"id":"5","name":"The Red Lion", ... ,"confirmed":"0"}]

while it should return:

TEST([{"id":"5","name":"The Red Lion", ... ,"confirmed":"0"}]);

You won't be able to use it because it is not valid JSONP.

UPDATE:

Answering more info from the comment - if you control the server-side script then try changing:

while($row = mysql_fetch_assoc($result)) { $records[] = $row; }
echo $_GET['jsoncallback'] . json_encode($records);

to:

while($row = mysql_fetch_assoc($result)) { $records[] = $row; }
echo $_GET['jsoncallback'] . '(' . json_encode($records) . ');';

and see if that works.

UPDATE 2:

Answering another comment. Do you actually initialize the output variable? For example with something like this at the beginning:

var output = $('#place').append('<div/>');

Do you actually call your results function? It must be called with:

results();

or registered somewhere as an event handler, using the jQuery way:

$('form').submit(results);

but then add:

return false;

to the end of the results function to prevent the page from being reloaded.

See this demo: http://jsbin.com/uziyek/1/edit - it seems to work.

Another problem:

There seems to be another problem with your code, that the area=AB12 parameter is hardcoded into your URL. What you should do instead is get the value from the form and send that.

edited Jan 23, 2013 at 14:04

answered Jan 23, 2013 at 13:25

rsp

112k31 gold badges210 silver badges185 bronze badges

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

2 Comments

Ben Over a year ago

How can this be done? The code on the web service is: while($row = mysql_fetch_assoc($result)) { $records[] = $row; } echo $_GET['jsoncallback'] . json_encode($records); - is there something here that can be changed?

Ben Over a year ago

Okay this is complete but there is no change at all - there is nothing being displayed on my HTML page, still.

Felix Kling · Accepted Answer · 2013-01-23 13:44:56Z

2

You implemented JSONP incorrectly. You need to generate a function call, i.e. the response should be foo(<json here>); not foo<json here>.

It is trivial to fix:

echo $_GET['jsoncallback'] . '(' . json_encode($records) . ');';

Another problem is that you are not preventing the form submission, i.e. when you submit the form, the page refreshes. You have to prevent that. Better bind the event handler with jQuery and don't use inline event handlers:

<form id="myForm">

and

$(function() {
    $('#myForm').submit(function(event) {
        event.preventDefault(); // <-- prevent form submission
        // Ajax call here
    });
});

DEMO

edited Jan 23, 2013 at 13:44

answered Jan 23, 2013 at 13:31

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

5 Comments

Ben Over a year ago

Yes this is what I have done, character for character (see here). However, my client code still isn't presenting anything whatsoever.

Ben Over a year ago

Thanks so much for your help. I'm trying to get that to work but is there a syntax error on the line that says $('#search').submit(event){?

Felix Kling Over a year ago

@Ben: Fixed and added a DEMO: jsfiddle.net/fkling/AKEPX. If you are not very familiar with jQuery, I really recommend to read the tutorial first: docs.jquery.com/Tutorials:Getting_Started_with_jQuery.

Ben Over a year ago

Thanks again for being so patient. I have updated the code and pasted it here but there is still no update to the page whatsoever.

Felix Kling Over a year ago

Probably because you did not define output. Have a look at my demo, try to understand it. It works, so it contains all you need to know.

Collectives™ on Stack Overflow

Retrieve JSON GET data with Javascript/JQuery

2 Answers 2

UPDATE:

UPDATE 2:

Another problem:

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

UPDATE:

UPDATE 2:

Another problem:

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related