-
-
Notifications
You must be signed in to change notification settings - Fork 16.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added JSON Support and started working on jQuery docs
- Loading branch information
Showing
7 changed files
with
254 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -19,3 +19,4 @@ end of the request, the database connection is closed again. | |
wtforms | ||
templateinheritance | ||
flashing | ||
jquery |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
AJAX With jQuery | ||
================ | ||
|
||
`jQuery`_ is a small JavaScript library commonly used to simplify working | ||
with the DOM and JavaScript in general. It is the perfect tool to make | ||
web applications more dynamic by exchanging JSON between server and | ||
client. | ||
|
||
.. _jQuery: http://jquery.com/ | ||
|
||
Loading jQuery | ||
-------------- | ||
|
||
In order to use jQuery, you have to download it first and place it in the | ||
static folder of your application and then ensure it's loaded. Ideally | ||
you have a layout template that is used for all pages where you just have | ||
to add two script statements to your `head` section. One for jQuery, and | ||
one for your own script (called `app.js` here): | ||
|
||
.. sourcecode:: html | ||
|
||
<script type=text/javascript src="{{ | ||
url_for('static', filename='jquery.js') }}"></script> | ||
<script type=text/javascript src="{{ | ||
url_for('static', filename='app.js') }}"></script> | ||
|
||
Where is My Site? | ||
----------------- | ||
|
||
Do you know where your application is? If you are developing the answer | ||
is quite simple: it's on localhost port something and directly on the root | ||
of that server. But what if you later decide to move your application to | ||
a different location? For example to ``http://example.com/myapp``? On | ||
the server side this never was a problem because we were using the handy | ||
:func:`~flask.url_for` function that did could answer that question for | ||
us, but if we are using jQuery we should better not hardcode the path to | ||
the application but make that dynamic, so how can we do that? | ||
|
||
A simple method would be to add a script tag to our page that sets a | ||
global variable to the prefix to the root of the application. Something | ||
like this: | ||
|
||
.. sourcecode:: html+jinja | ||
|
||
<script type=text/javascript> | ||
$SCRIPT_ROOT = {{ request.script_root|tojson|safe }}; | ||
</script> | ||
|
||
The ``|safe`` is necessary so that Jinja does not escape the JSON encoded | ||
string with HTML rules. Usually this would be necessary, but we are | ||
inside a `script` block here where different rules apply. | ||
|
||
.. admonition:: Information for Pros | ||
|
||
In HTML the `script` tag is declared `CDATA` which means that entities | ||
will not be parsed. Everything until ``</script>`` is handled as script. | ||
This also means that there must never be any ``</`` between the script | ||
tags. ``|tojson`` is kindly enough to do the right thing here and | ||
escape backslashes for you. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
# -*- coding: utf-8 -*- | ||
""" | ||
jQuery Example | ||
~~~~~~~~~~~~~~ | ||
A simple application that shows how Flask and jQuery get along. | ||
:copyright: (c) 2010 by Armin Ronacher. | ||
:license: BSD, see LICENSE for more details. | ||
""" | ||
from flask import Flask, jsonify, render_template, request | ||
app = Flask(__name__) | ||
|
||
|
||
@app.route('/_add_numbers') | ||
def add_numbers(): | ||
"""Add two numbers server side, ridiculous but well...""" | ||
a = request.args.get('a', 0, type=int) | ||
b = request.args.get('b', 0, type=int) | ||
return jsonify(result=a + b) | ||
|
||
|
||
@app.route('/') | ||
def index(): | ||
return render_template('index.html') | ||
|
||
|
||
if __name__ == '__main__': | ||
app.run() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
<!doctype html> | ||
<title>jQuery Example</title> | ||
<script type=text/javascript | ||
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> | ||
<script type=text/javascript src="{{ url_for('static', filename='app.js') | ||
}}"></script> | ||
<script type=text/javascript> | ||
var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }}; | ||
|
||
$(function() { | ||
$('a#calculate').bind('click', function() { | ||
$.getJSON($SCRIPT_ROOT + '/_add_numbers', { | ||
a: $('input[name="a"]').val(), | ||
b: $('input[name="b"]').val() | ||
}, function(data) { | ||
$("#result").text(data.result); | ||
}); | ||
}); | ||
}); | ||
</script> | ||
<h1>jQuery Example</h1> | ||
<p><input type=text size=5 name=a> + | ||
<input type=text size=5 name=b> = | ||
<span id=result>?</span> | ||
<p><a href=# id=calculate>calculate server side</a> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters