Flask jQuery ajax

時間 2019-11-10

標籤 flask jquery ajax 欄目 Python 简体版

原文原文鏈接

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

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()java

1、$.ajax的通常格式python

$.ajax({jquery

type: 'POST',ajax

url: url ,json

data: data ,flask

success: success ,segmentfault

dataType: dataType

});

2、$.ajax的參數描述

參數描述

url	必需。規定把請求發送到哪一個 URL。
data	可選。映射或字符串值。規定連同請求發送到服務器的數據。
success(data, textStatus, jqXHR)	可選。請求成功時執行的回調函數。
dataType	可選。規定預期的服務器響應的數據類型。默認執行智能判斷（xml、json、script 或 html）。

3、$.ajax須要注意的一些地方：

1.data主要方式有三種，html拼接的，json數組，form表單經serialize()序列化的；經過dataType指定，不指定智能判斷。

2.$.ajax只提交form以文本方式，若是異步提交包含<file>上傳是傳過不過去,須要使用jquery.form.js的$.ajaxSubmit

經過 jQuery 使用 AJAX

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>`