jQuery Forum

On Aug 10, 9:58 pm, Joey Derrico <joeyd...@gmail.com>

> > From: Joey Derrico
> >
> > I am a novice at AJAX and JSON (Ok, I am a novice at
> > JavaScript.), and
> > I am brand new to jQuery. I wanted to use JSON in a project I am
> > working on and I read various tutorials on using JSON with jQuery
> > however none of them answered some of my questions. The biggest one
> > is, does jQuery support JSON or do I need to use another
> > JSON library to use JSON with jQuery?
> From: Stephan Beal
>
> JSON is simply a data format. "Supporting" JSON simply means having:
>
> a) a function which can transform JS objects into a
> JSON-compliant string.
> b) a function which can transform a compliant string into a JS object.
>
> AFAIK, jQuery doesn't have any built-in support for JSON, but
> it doesn't have to - it doesn't operate at a level where JSON
> would be useful (except for possible selector-style traversal
> of a JSON tree).
>
> The canonical JSON implementation for JavaScript is Doug
> Crockford's json2.js, available here:
>
> http://www.json.org/
>
> See JSON.stringify() and JSON.parse().
Actually, jQuery does provide quite a bit of built-in JSON support, and for
a large category of apps, it provides all the support you need.
If you want to make GET or POST requests to a server, get JSON data back,
and use that data in your JavaScript code, you don't need json2.js. jQuery
supports all of that, both for JSON data on your own server or JSONP data
coming from other domains.
Just use $.getJSON() or $.ajax() with the 'json' or 'jsonp' dataType as
needed.
If you want to *generate* JSON in your JavaScript code (e.g. if your server
expects you to send it JSON data in a POST), JSON.stringify() from json2.js
is the way to do it.
If you want a "safer" JSON parser instead of the "eval-ing" JSON parser that
jQuery uses, then JSON.parse() from json2.js will give you that. But for
most apps you don't need this (and it's less useful than it might sound).
Otherwise, you can just use the JSON support in jQuery.
-Mike

On Aug 11, 12:26 am, "Michael Geary" <m...@mg.to>

I'll just add my 2 cents from novice to novice.
1. JSON is just a lightweight markup language. Its like HTML, and more
like XML but just without the weight. And it is easier to read with
the eyeball.
JSON uses {} squiggles and : and [] and others to markup the data.
JSON {"CATALOG" : "JCPENNY"}
XML <CATALOG>JCPENNY</CATALOG>
http://www.json.org/example.html has some good comparisons.

"Speaking of: i recommend AGAINST using getJSON()"
I'd also recommend against use of $.getJSON for a totally different
reason:
There is no option to "catch" errors.....
getJSON: function(url, data, callback) {
return jQuery.get(url, data, callback, "json");
},
so if something happens server side or there is a glitch in the Matrix
that we call the internet, your code would just dead stop, and your
user would be sitting there waiting and waiting and waiting

I also recommend using json2.js for anything more then just a basic key-value json string.
I ran into troubles with the standard jQuery json approach, when implementing a complex system that transfers a lot of json to and from the server.
And as Michael Geary mentions:
<blockquote style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;" class="gmail_quote">"If you want to *generate* JSON in your JavaScript code (e.g. if your server
expects you to send it JSON data in a POST), JSON.stringify() from json2.js
is the way to do it."
</blockquote>
Cam

On Aug 11, 5:13 am, MorningZ <morni...@gmail.com>

On Aug 11, 6:14 am, Cam Spiers <camspi...@gmail.com>

Ok so I have used .ajax function to run my ajax and set type to data. It is getting (well posting) to a php file that echo's a json_encoded array. When it returns I am using console.log to display the returned data. when I just use data it shows the JSON encoded data, but if I use data.key I get undefined. How can I get it to show me the data from the JSON variable?
Here is the script
        $.ajax({ //Begin ajax statement to login file
            type:'POST', //It is a Post request
            url:'functions/php/login.php', //The login file
            datatype:'json', //Return JSON encoded data
            data:{ //Data being sent to the server is...
                Username:$('#CharacterBuilderUsername').val(), //Username
                Password:$('#CharacterBuilderPassword').val() //Password
            },
            cache:false, //Don't Cache the file
            success:function(data){ //if successful....
                $('#UserBar').load('main_pages/UserBar.php'); //Run an AJAX request for the user menu
                console.log("Data: "+data); //Shows Json data: <span class="objectBox objectBox-text ">Data: {"PlayerId":1,"PlayerName":"First Last"}</span>
                console.log("PlayerId: "+data.PlayerId); //Shows undefined
                console.log("Player's Name: "+data.PlayerName); //Shows Undefined
                var testdata=data.PlayerId;
                console.log("Returned Data="+testdata); //shows undefined
            },
            error:function(XMLHttpRequest, textStatus, errorThrown){ //if not successful...
                $('#CharacterBuilderLoginSubmit').show(0); //show the submit button
            },
        });
    });
From the PHP file, not the whole script
        $UserInfo['PlayerId']=$PlayerId;
        $UserInfo['PlayerName']=$PlayerFirstName." ".$PlayerLastName;
        echo json_encode($UserInfo);

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META content="text/html; charset=us-ascii" http-equiv=Content-Type>
<META name=GENERATOR content="MSHTML 8.00.6001.18813"></HEAD>
<BODY>
<DIV dir=ltr align=left><SPAN class=499400122-11082009>> when I just use data
it shows the JSON encoded data</SPAN><FONT color=#0000ff size=2
face=Verdana><SPAN class=499400122-11082009></SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT color=#0000ff size=2 face=Verdana><SPAN
class=499400122-11082009></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT color=#0000ff size=2 face=Verdana><SPAN
class=499400122-11082009>That's your problem right there. Your data variable
should <EM>not</EM> be "JSON encoded data" (which is a <STRONG>string</STRONG>).
It should be the actual JavaScript object.</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT color=#0000ff size=2 face=Verdana><SPAN
class=499400122-11082009></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT color=#0000ff size=2 face=Verdana><SPAN
class=499400122-11082009>Try console.log( typeof data ) to see what I'm talking
about.</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT color=#0000ff size=2 face=Verdana><SPAN
class=499400122-11082009></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT color=#0000ff size=2 face=Verdana><SPAN
class=499400122-11082009>Why are you getting a string instead of a JavaScript
object?</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT color=#0000ff size=2 face=Verdana><SPAN
class=499400122-11082009></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT color=#0000ff size=2 face=Verdana><SPAN
class=499400122-11082009><FONT color=#000000 size=3
face="Times New Roman">           
datatype:'json', //Return JSON encoded data</FONT><BR></SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT color=#0000ff size=2 face=Verdana><SPAN
class=499400122-11082009>Take another look at the docs for the $.ajax
options, keeping in mind that JavaScript is case dependent. Also note that the
comment is misleading: encoded data is what you <EM>don't</EM> want.
(Ironically, because of the misspelled option name, it is what
you're getting.) You want decoded data:</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT color=#0000ff size=2 face=Verdana><SPAN
class=499400122-11082009></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT color=#0000ff size=2 face=Verdana><SPAN
class=499400122-11082009><SPAN class=499400122-11082009><FONT color=#000000
size=3
face="Times New Roman">           
dataType:'json', // Decode JSON response into
JavaScript data</FONT><BR></SPAN></SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT color=#0000ff size=2 face=Verdana><SPAN
class=499400122-11082009>-Mike</SPAN></FONT></DIV><FONT color=#0000ff size=2
face=Verdana></FONT><FONT color=#0000ff size=2 face=Verdana></FONT><FONT
color=#0000ff size=2 face=Verdana></FONT><FONT color=#0000ff size=2
face=Verdana></FONT><FONT color=#0000ff size=2 face=Verdana></FONT><BR>
<BLOCKQUOTE
style="BORDER-LEFT: #0000ff 2px solid; PADDING-LEFT: 5px; MARGIN-LEFT: 5px; MARGIN-RIGHT: 0px">
<DIV dir=ltr lang=en-us class=OutlookMessageHeader align=left>
<HR tabIndex=-1>
<FONT size=2 face=Tahoma><B>From:</B> jquery-en@googlegroups.com
[mailto:jquery-en@googlegroups.com] <B>On Behalf Of </B>Joey
Derrico<BR><B>Sent:</B> Tuesday, August 11, 2009 12:17 PM<BR><B>To:</B>
jquery-en@googlegroups.com<BR><B>Subject:</B> [jQuery] Re: AJAX and
JSON<BR></FONT><BR></DIV>
<DIV></DIV>Ok so I have used .ajax function to run my ajax and set type to
data. It is getting (well posting) to a php file that echo's a json_encoded
array. When it returns I am using console.log to display the returned data.
when I just use data it shows the JSON encoded data, but if I use data.key I
get undefined. How can I get it to show me the data from the JSON variable?
<BR><BR>Here is the script<BR>        $.ajax({
//Begin ajax statement to login file<BR>       
    type:'POST', //It is a Post request<BR>   
        url:'functions/php/login.php', //The
login file<BR>           
datatype:'json', //Return JSON encoded data<BR>   
        data:{ //Data being sent to the server
is...<BR>           
    Username:$('#CharacterBuilderUsername').val(),
//Username<BR>           
    Password:$('#CharacterBuilderPassword').val()
//Password<BR>           
},<BR>            cache:false,
//Don't Cache the file<BR>       
    success:function(data){ //if
successful....<BR>           
    $('#UserBar').load('main_pages/UserBar.php'); //Run an AJAX
request for the user menu<BR>       
        console.log("Data: "+data); //Shows Json
data: <SPAN class="objectBox objectBox-text ">Data:
{"PlayerId":1,"PlayerName":"First Last"}</SPAN><BR>   
           
console.log("PlayerId: "+data.PlayerId); //Shows
undefined<BR>           
    console.log("Player's Name: "+data.PlayerName); //Shows
Undefined<BR>           
    var testdata=data.PlayerId;<BR>   
            console.log("Returned
Data="+testdata); //shows undefined<BR>       
    },<BR>       
    error:function(XMLHttpRequest, textStatus, errorThrown){
//if not successful...<BR>       
       
$('#CharacterBuilderLoginSubmit').show(0); //show the submit
button<BR>           
},<BR>        });<BR>   
});<BR><BR>From the PHP file, not the whole
script<BR>       
$UserInfo['PlayerId']=$PlayerId;<BR>       
$UserInfo['PlayerName']=$PlayerFirstName."
".$PlayerLastName;<BR>        echo
json_encode($UserInfo);<BR></BLOCKQUOTE></BODY></HTML>

> > From: Michael Geary
> > Just use $.getJSON() or $.ajax() with the 'json' or 'jsonp'
> > dataType as needed.
> From: Stephan Beal
> Speaking of: i recommend AGAINST using getJSON() because it
> muddles up my Apache logs horribly (the JSON gets encoded in
> the request, which gets logged as urlencoded garbage). JSON
> should, IMO, be sent over POST.
I just replied to a similar point in another thread, but just for anyone who
is reading this thread...
Your point is well taken about *uploading* JSON data with POST instead of
GET. In that case, using JSON.stringify() and putting the data in a POST
would be a very good idea. (If you're updating data on the server, then you
should be using POST instead of GET anyway, even if you weren't using JSON.)
But if you're just *downloading* JSON data and not updating state on the
server, then you may as well just use a GET. The query parameters from the
GET will show up in your server log, but those aren't that lengthy in a
typical GET request.
-Mike

Actually I am sending data to the server from a form so post is needed. But I do agree that normally get is teh better method if you don't need to send data to a server.
Joey