Flask jQuery ajax

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

http://www.runoob.com/jquery/jquery-ref-ajax.html

http://jun1986.iteye.com/blog/1399242

下面是jQuery官方给出的完整的Ajax事件列表：

ajaxStart (Global Event)
This event is broadcast if an Ajax request is started and no other Ajax requests are currently running.
- beforeSend (Local Event)
  This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.)
- ajaxSend (Global Event)
  This global event is also triggered before the request is run.
- success (Local Event)
  This event is only called if the request was successful (no errors from the server, no errors with the data).
- ajaxSuccess (Global Event)
  This event is also only called if the request was successful.
- error (Local Event)
  This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).
- ajaxError (Global Event)
  This global event behaves the same as the local error event.
- complete (Local Event)
  This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests.
- ajaxComplete (Global Event)
  This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.
ajaxStop (Global Event)
This global event is triggered if there are no more Ajax requests being processed.

$.post、$.get是一些简单的方法，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()

一、$.ajax的一般格式

$.ajax({

type: 'POST',

url: url ,

data: data ,

success: success ,

dataType: dataType

});

二、$.ajax的参数描述

参数描述

url	必需。规定把请求发送到哪个 URL。
data	可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR)	可选。请求成功时执行的回调函数。
dataType	可选。规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script 或 html）。

三、$.ajax需要注意的一些地方：

1.data主要方式有三种，html拼接的，json数组，form表单经serialize()序列化的；通过dataType指定，不指定智能判断。

2.$.ajax只提交form以文本方式，如果异步提交包含<file>上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit

http://dormousehole.readthedocs.org/en/latest/patterns/jquery.html

flask-ajax-json

Flask 代码：

Code example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24	`# -- coding: utf-8 --` `"""` `ajax Example` `~~~~~~~~~~~~~~` `一个简单的应用，展示了 Flask 如果响应 JSON 数据。` `:copyright: (c) 2014 by Innes Luo.` `:license: BSD, see LICENSE for more details.` `"""` `fromflaskimportFlask, jsonify, render_template, request` `app=Flask(__name__)` `@app.route('/', methods=['POST','GET'])` `defindex():` `ifrequest.method=='POST':` `n=[request.form.get(x,0,type=float)forxin{'n1','n2','n3'}]` `returnjsonify(max=max(n),min=min(n))` `else:` `returnrender_template('index.html')` `if__name__=='__main__':` `app.run()`

模板代码：

Code example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44	`<htmlxmlns="http://www.w3.org/1999/html"xmlns="http://www.w3.org/1999/html">` `<head>` `<metacharset="utf-8">` `<title>ajax Exampletitle>` `<scripttype=text/javascriptsrc="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.min.js">script>` `<scripttype=text/javascript.>` `var $SCRIPT_ROOT = {{ request.script_root\|tojson\|safe }};` `function ajaxForm(){` `$.ajax({` `type: 'post',` `url: $SCRIPT_ROOT,` `dataType: 'json',` `data:{` `'n1': $('input[name=n1]').val(),` `'n2': $('input[name=n2]').val(),` `'n3': $('input[name=n3]').val()` `},` `error: function(xhr, err){` `alert('请求失败，原因可能是：' + err + '！')` `},` `success: function(data, textStatus){` `$('#max').text(data.max);` `$('#min').text(data.min);` `}` `});` `return false` `}` `script>` `head>` `body>` `<h1>ajax Exampleh1>` `<formaction=""method="post"onSubmit="return ajaxForm()">` `<p>在下面 3 个文本框中输入数字，然后点击按钮。p>` `<inputname="n1"type="text"/>` `<inputname="n2"type="text"/>` `<inputname="n3"type="text"/>` `<inputtype="submit"/>` `<p>最大数：<spanid=max>?span>p>` `<p>最小数：<spanid=min>?span>p>` `form>` `body>` `html>`