【Python】【Flask】前端調用後端方法

阿新 • • 發佈：2018-12-24

查看 == 常用數組 index http訪問 temp 文件 string類

後端代碼：

@app.route("/test",methods=[‘POST‘,‘GET‘])
def test():
    return "我是測試的"

前端代碼：

1、使用<a>標簽

<a href="{{url_for(‘test‘)}}">我是測試</a>

這個是最簡單的，點擊一下，就自動跳轉了。

2、使用<button>的onclick

說起這個，光這個click就折騰了我一整天了。網上找不到啊。初學網頁+Python+Flask，所以根本不懂啊，又找不到。最後終於解決。

<button onclick="window.location.href=‘{{ url_for("test") }}‘">點我啊</button>

之前為什麽一直失敗呢，因為 <a>標簽是直接{{url_for(‘test‘)}}就可以了，所以我當時就想啊，onclick肯定也一樣啊，直接

<button onclick="{{ url_for("test") }}">點我啊</button>#這是錯誤的哦

導致一直失敗，百度也找不到，可能是因為太簡單了吧。反正記錄下，說不定也有其他小白和我一樣呢，哈哈哈。

<script>
    function testclick(name)
    {
        //window.location.href="{{ url_for("test") }}";
        window.open("{{ url_for("test") }}","_self");
    }
</script>
<button onclick="testclick(‘淘寶:夢琪動漫屋‘)">點擊我啊</button>

這樣寫法也一樣的。

3、前端ajax發送數據，後臺接收數據(4種顏色，4種寫法)

Html：

$.ajax({
                url:‘/test‘,
                type:‘POST‘,

                data:JSON.stringify({‘username‘:‘js‘,‘psw‘:‘123456789‘}),
                #或者data: {jsdata: JSON.stringify({‘username‘: ‘js‘,‘psw‘: ‘132456789‘})},

                #或者data:{‘username‘:‘js‘,‘psw‘:‘123456789‘},
                #或者data:"username=js&psw=123",

                dataType: ‘json‘,
                success:function(res){
                    console.log(res)
                    console.log(0)

                },
                error:function (res) {
                    console.log(res);
                    console.log(1)
                }
            })

參數介紹：

1.url:
要求為String類型的參數，（默認為當前頁地址）發送請求的地址。

2.type:
要求為String類型的參數，請求方式（post或get）默認為get。註意其他http請求方法，例如put和delete也可以使用，但僅部分瀏覽器支持。

3.timeout:
要求為Number類型的參數，設置請求超時時間（毫秒）。此設置將覆蓋$.ajaxSetup()方法的全局設置。

4.async:
要求為Boolean類型的參數，默認設置為true，所有請求均為異步請求。如果需要發送同步請求，請將此選項設置為false。註意，同步請求將鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執行。

5.cache:
要求為Boolean類型的參數，默認為true（當dataType為script時，默認為false），設置為false將不會從瀏覽器緩存中加載請求信息。

6.data:
要求為Object或String類型的參數，發送到服務器的數據。如果已經不是字符串，將自動轉換為字符串格式。get請求中將附加在url後。防止這種自動轉換，可以查看　　processData選項。對象必須為key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。如果是數組，JQuery將自動為不同值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。

7.dataType:
要求為String類型的參數，預期服務器返回的數據類型。如果不指定，JQuery將自動根據http包mime信息返回responseXML或responseText，並作為回調函數參數傳遞。可用的類型如下：
xml：返回XML文檔，可用JQuery處理。
html：返回純文本HTML信息；包含的script標簽會在插入DOM時執行。
script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。註意在遠程請求時（不在同一個域下），所有post請求都將轉為get請求。
json：返回JSON數據。
jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換後一個“?”為正確的函數名，以執行回調函數。
text：返回純文本字符串。

8.beforeSend：
要求為Function類型的參數，發送請求前可以修改XMLHttpRequest對象的函數，例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請求。XMLHttpRequest對象是惟一的參數。
function(XMLHttpRequest){
this; //調用本次ajax請求時傳遞的options參數
}
9.complete：
要求為Function類型的參數，請求完成後調用的回調函數（請求成功或失敗時均調用）。參數：XMLHttpRequest對象和一個描述成功請求類型的字符串。
function(XMLHttpRequest, textStatus){
this; //調用本次ajax請求時傳遞的options參數
}

10.success：要求為Function類型的參數，請求成功後調用的回調函數，有兩個參數。
(1)由服務器返回，並根據dataType參數進行處理後的數據。
(2)描述狀態的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //調用本次ajax請求時傳遞的options參數
}

11.error:
要求為Function類型的參數，請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。ajax事件函數如下：
function(XMLHttpRequest, textStatus, errorThrown){
//通常情況下textStatus和errorThrown只有其中一個包含信息
this; //調用本次ajax請求時傳遞的options參數
}

12.contentType：
要求為String類型的參數，當發送信息至服務器時，內容編碼類型默認為"application/x-www-form-urlencoded"。該默認值適合大多數應用場合。

13.dataFilter：
要求為Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。
function(data, type){
//返回處理後的數據
return data;
}

14.dataFilter：
要求為Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。
function(data, type){
//返回處理後的數據
return data;
}

15.global：
要求為Boolean類型的參數，默認為true。表示是否觸發全局ajax事件。設置為false將不會觸發全局ajax事件，ajaxStart或ajaxStop可用於控制各種ajax事件。

16.ifModified：
要求為Boolean類型的參數，默認為false。僅在服務器數據改變時獲取新數據。服務器數據改變判斷的依據是Last-Modified頭信息。默認值是false，即忽略頭信息。

17.jsonp：
要求為String類型的參數，在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數裏的"callback"部分，例如{jsonp:‘onJsonPLoad‘}會導致將"onJsonPLoad=?"傳給服務器。

18.username：
要求為String類型的參數，用於響應HTTP訪問認證請求的用戶名。

19.password：
要求為String類型的參數，用於響應HTTP訪問認證請求的密碼。

20.processData：
要求為Boolean類型的參數，默認為true。默認情況下，發送的數據將被轉換為對象（從技術角度來講並非字符串）以配合默認內容類型"application/x-www-form-urlencoded"。如果要發送DOM樹信息或者其他不希望轉換的信息，請設置為false。

21.scriptCharset：
要求為String類型的參數，只有當請求時dataType為"jsonp"或者"script"，並且type是GET時才會用於強制修改字符集(charset)。通常在本地和遠程的內容編碼不同時使用。

Python Flask：

#PS. 空格可能沒有對齊
@app.route(‘/test‘, methods=[‘POST‘])
def test():

    data = request.get_json(force=True)#獲取json數據
    username =data[‘username‘]
    password =data[‘psw‘]

    #或者data = json.loads(request.form.get(‘jsdata‘))  
    #或者username =data["username"] 
    #或者password =data["psw"]
    #或者password = request.form.get(‘psw‘)
    #或者username = request.form.get(‘username‘)
    #或者password = request.form.get(‘psw‘)
    #或者username = request.form.get(‘username‘)

    print(username) 
    print(password) 
    return username

request

request 對於 Web 應用，與客戶端發送給服務器的數據交互至關重要。在 Flask 中由全局的 request 對象來提供這些信息。

form
一個從POST和PUT請求解析的 MultiDict（一鍵多值字典）。
args
MultiDict，要操作 URL （如 ?key=value ）中提交的參數可以使用 args 屬性:

searchword = request.args.get(‘key‘, ‘‘)

values
CombinedMultiDict，內容是form和args。
可以使用values替代form和args。
cookies
顧名思義，請求的cookies，類型是dict。
stream
在可知的mimetype下，如果進來的表單數據無法解碼，會沒有任何改動的保存到這個·stream·以供使用。很多時候，當請求的數據轉換為string時，使用data是最好的方式。這個stream只返回數據一次。
headers
請求頭，字典類型。
data
包含了請求的數據，並轉換為字符串，除非是一個Flask無法處理的mimetype。
files
MultiDict，帶有通過POST或PUT請求上傳的文件。
environ
WSGI隱含的環境配置。
method
請求方法，比如POST、GET。
path
script_root
url
base_url
url_root
如果用戶請求如下URL：
http://www.example.com/myapplication/page.html?x=y
以上的參數內容如下：

名稱	內容
path	/page.html
script_root	/myapplication
base_url	http://www.example.com/myapplication/page.html
url	http://www.example.com/myapplication/page.html?x=y
url_root	http://www.example.com/myapplication/

is_xhr
如果請求是一個來自JavaScript XMLHttpRequest的觸發，則返回True，這個只工作在支持X-Requested-With頭的庫並且設置了XMLHttpRequest。
blurprint
藍本名字。
endpoint
endpoint匹配請求，這個與view_args相結合，可是用於重構相同或修改URL。當匹配的時候發生異常，會返回None。
get_json(force=False, silent=False, cache=True)
json
如果mimetype是application/json，這個參數將會解析JSON數據，如果不是則返回None。
可以使用這個替代get_json()方法。
max_content_length
只讀，返回MAX_CONTENT_LENGTH的配置鍵。
module
如果請求是發送到一個實際的模塊，則該參數返回當前模塊的名稱。這是棄用的功能，使用blueprints替代。
on_json_loading_failed(e)
routing_exception = None
如果匹配URL失敗，這個異常將會/已經拋出作為請求處理的一部分。這通常用於NotFound異常或類似的情況。
url_rule = None
內部規則匹配請求的URL。這可用於在URL之前/之後檢查方法是否允許(request.url_rule.methods) 等等。
默認情況下，在處理請求函數中寫下
```
print(‘request.url_rule.methods‘, request.url_rule.methods) 
```
會打印：
```
request.url_rule.methods {‘GET’, ‘OPTIONS’, ‘HEAD’}
```
view_args = None
一個匹配請求的view參數的字典，當匹配的時候發生異常，會返回None。

PS. JS 頁面被緩存，導致JS代碼修改後，頁面刷新顯示依然是舊數據的問題

　　網上都說加?t=20171206

　　所以呢，我就在ajax請求的url上加了，結果數據依然是舊的，百思不得其解.....

$.ajax({
    type:"GET",
    url:"/employee"+"?t="+new Date().getTime(),
　　.....
})
最後呢，發現原來是在引用JS的src上修改即可<script type="text/javascript" src="../js/emp.js?t=20171206">


PS.參數傳遞方法記錄(補充2018-04-24)
1、

#需要添加 from flask import request

@app.route(‘/login‘,methods=["GET","POST"])
def login():
    if request.method == "POST":
        # 以POST方式傳參數，通過form取值
        # 如果Key之不存在，報錯KeyError，返回400的頁面
        username = request.form[‘username‘]
        password = request.form[‘password‘]
        print username,password
    else:
        # 以GET方式傳參數，通過args取值
        username = request.args[‘username‘]
        print username
    return render_template(‘login.html‘, req_method=request.method)

#網頁調用http://127.0.0.1:8080/login/?username=ceshi&password=123456

2、

@app.route(‘/data/<type>/<startindex>/<count>‘,methods=[‘GET‘])
def GetDataFromType(type,startindex,count):
    return type+startindex+count


#網頁調用http://127.0.0.1:8080/data/ceshi/0/14

【Python】【Flask】前端調用後端方法

查看 == 常用數組 index http訪問 temp 文件 string類後端代碼： @app.route("/test",methods=[‘POST‘,‘GET‘]) def test(): return "我是測試的" 前端代碼： 1、使用<

【Python】【Flask】前端調用後端方法

request

【Python】【Flask】前端調用後端方法

.net list<int>、int[]參數類型前端調用傳參方法

小程序調用後端接口服務配置文件詳解

小程序---調用後端接口的方法

【Python】【Flask】前端呼叫後端方法

【Python模塊學習】sys模塊

【spring源碼學習】spring的遠程調用實現源碼分析

【Python常見問題總結】

【python常見面試題】之python 中對list去重的多種方法

【Python數據分析】

01月05日三周四次【Python基礎進階】

01月11日四周四次【Python基礎進階】

【Selenium】【Python多線程】

01月12日四周五次【Python基礎進階】

【python 字符串】字符串的相關方法(二)

【python 字符串】字符串的相關方法(三)

【Python pip 基礎命令】

【Python學習之七】面向對象高級編程——使用@property

【Python學習之十】yield之send方法

【python標準庫學習】thread，threading(一)多線程的介紹和使用

【Python】【Flask】前端調用後端方法

request

相關推薦