jQuery Django JSON JSONP /Work togeter/ (JavaScript Python JSON HTML5)

how to make them work together?

To make jQuery can request to different domain-name server, we use $.ajax and other things.

For example here:

Basic Ajax in jQuery: http://learn.jquery.com/ajax/jquery-ajax-methods/

------------------------ the link above includes examples about how to manipulate json with jquery

What is JSON ???? here: http://json.org/

------------------------ JSON and JSONP are different! JSONP is for crossing server communication while JSON is only for same domain server communication. Data type different also!

JSONP with jQuery: http://learn.jquery.com/ajax/working-with-jsonp/

------------------------ notice that the data type JSONP is different from JSON !!!

Some other cool thins jQuery Events! : http://learn.jquery.com/events/event-basics/

So basically I changed the json data which the server could response to brrowser from the app in Django framework using a python decorator :)

Here's some snapshots:

create a file : jsonp_decorator.py

change the file views.py of the app which is created by django:

Now we see that a decorator is added above the def level(request, levelid): line

They we restart the app, make it be working on port 9999

Then write some jQuery codes into the page iframe.html:  and save it.

Notice the dataType: "jsonp", this is different form json

And if you want to send request to remote servers and expect to get a jsonp response, you will need to un-commit 

jsonp: " callback " and add some data as the request string:

Here's a example:

// Using YQL and JSONP
$.ajax({
    url: "http://query.yahooapis.com/v1/public/yql",
 
    // the name of the callback parameter, as specified by the YQL service
    jsonp: "callback",
 
    // tell jQuery we're expecting JSONP
    dataType: "jsonp",
 
    // tell YQL what we want and that we want JSON
    data: {
        q: "select title,abstract,url from search.news where query=\"cat\"",
        format: "json"
    },
 
    // work with the response
    success: function( response ) {
        console.log( response ); // server response
    }
});

You could find those codes here:http://learn.jquery.com/ajax/working-with-jsonp/

Refresh your web browser then you will see this !!!

Now we have finished using jQuery to get response from the remote site which is build up in Django.

Now we maybe could add some interesting HTML page event to make this page more interactive.

-----------------Here's the link about Events in jQuery.http://learn.jquery.com/events/

 Get good use of it. :)

Hv Fun.