Ajax and jquery dynamic loading data implementation method _jquery

What is Ajax?

Ajax here is not a Greek myth hero, nor detergent brand, not a language, but asynchronous JavaScript and XML (asynchronous JavaScript and XML), where the XML (data format) can also be plain text (Plain Text) or JSON. Simply put, use JavaScript to process data and update page content with XMLHttpRequest objects and server-side exchanges (in XML or JSON format).

Why use Ajax?

With Ajax, we can achieve:

Send a request to the server without overloading the page;

Dynamically loading data, that is, exchanging data in the background.

For example, a sticky note this application, when you fill in the form of the content, click New, there will be no page jump, the content of real-time updates, data in the background to write to the database.

Ajax makes web apps more like apps.

Using jquery to implement Ajax

Use jquery to simplify this process. Here's a simple example of entering numbers in two input boxes, pressing the calculation button, JavaScript sending the data, getting the data at the sever end (the View function), and returning the result of adding two numbers, JavaScript gets the returned data and displays it on the page.

1. Load jquery

Put jquery in the static folder and load it:

<script src= "{{url_for (' static ', filename= ' Jquery.js ')}}" ></script>

or Load from CDN (you may need to replace CDN resources provided by other sites):

<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>

2, set the URL variable

You can't use the Url_for function to get the address in jquery, so we use request to set a dynamic global variable:

<script type=text/javascript>
$SCRIPT _root = {{Request.script_root|tojson|safe}};
</script>

Two input boxes, one button:

3, using the Getjson method to send and obtain data

<script type=text/javascript>
$ (function () {
$ (' a#calculate '). Bind (' click ', Function () {
$. Getjson ($SCRIPT _root + '/calculate ', {
A: $ (' input[name= ' a] '). Val (),
B: $ (' input[name= "B"]). Val ()
}, function (data) {
$ ("#result"). Text (Data.result);
});
return false;
}
); </script>

$.getjson (URL, data, func) sends a GET request where the URL is the view function that you want to process the data url,data is the returned data, Func is the function that processes the data.

JSON is the acronym for JavaScript Object Notation (JavaScript objects notation), a data format that resembles a python-like dictionary and stores data as a key-value pair (the symbol is also curly braces).

4, get, process and return the JSON data of the view function

From flask import flask, jsonify, render_template, request
app = Flask (__name__)
@app. Route ('/calculate ')
Def add_numbers ():
a = Request.args.get (' A ', 0, Type=int) # The second argument is the default value
B = request.args.get (' B ', 0, Type=int) 
   
    return jsonify (result=a + b)
@app. Route ('/')
def index (): Return
render_template (' index.html ')
   

Returns the JSON data using the Jsonify () function provided by flask.

This example is adapted from the Flask official example, the complete source code see: Https://github.com/pallets/flask/blob/master/examples/jqueryexample