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

時間  2019-11-18
標籤 Python Flask 前端 調用 後端 方法 欄目 Python 简体版
原文   原文鏈接

後端代碼：javascript

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

前端代碼：html

一、使用<a>標籤前端

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

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

二、使用<button>的onclickajax

提及這個，光這個click就折騰了我一成天了。網上找不到啊。初學 網頁+Python+Flask，因此根本不懂啊，又找不到。最後終於解決。json

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

以前爲何一直失敗呢，由於 <a>標籤是直接{{url_for('test')}}就能夠了，因此我當時就想啊，onclick確定也同樣啊，直接flask

<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>
複製代碼

這樣寫法也同樣的。數組

三、前端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)
一、
複製代碼 
#須要添加 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
複製代碼 
 

 二、
 

 
 
@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
 



        

            

        	





    

		

            
相關文章

            

                

                

                    

                

            


            
相關標籤/搜索

            
        


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

    
    
    	每一个你不满意的现在，都有一个你没有努力的曾经。
    







    

    


    



    

        本站公眾號
    

    

           歡迎關注本站公眾號,獲取更多信息

        
    




    

    




	


	







    

        聯繫我們
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程