flask+jquery發送post請求

本次來學習一下如何使用flask發送post請求，我們以上一篇中的 用flask搭建一個測試數據生成器(v1.1) 獲取電話號碼為例子，把它改造為post請求

1、前端html代碼

獲取手機號按鈕、輸入框這部分不用動，依然用<form>標簽圍起來

 <form method="post"><button type="button" id="b01">手機號碼</button>
          <label>
            <input class="w" type="text" id="phone_num" name="phone_num" placeholder="請輸入個數">
          </label>
  </form>

2、修改js代碼 & 后端代碼

修改jquery ajax部分的代碼，使它發送post請求

根據我們提交的數據類型不同，需要做不同的處理

（1）提交表單數據

如果我們不聲明 contentType，會默認以 Content-Type:application/x-www-form-urlencoded的形式提交

對應的js代碼如下

<script type="text/javascript">
    $(document).ready(function(){
            $("#b01").click(function (){
                var num = $('input[name=phone_num]').val()  // 獲取phone輸入框的值

            htmlobj = $.ajax(
                {
                    type: 'post',
                    url: 'http://10.237.4.83:5000/phone',
                    cache: false,
                    data: {"num": num},
                    async:false
                }
            );
            $("#result").html(htmlobj.responseText);
            })
        });

上述代碼中  data: {"num": num}, 這是我們隨請求要發送的數據，定義來一個參數 num，它值為從input標簽獲取到的輸入值

后端對應做如下處理

其中 request.form.get("num")，使用 request.form 獲取隨請求發送的表單類型參數

def create_phone(num):
    """生成電話"""

    phones = [fake.phone_number() for _ in range(int(num))]  # 列表推導，把生成的數據組成一個列表
    return " ".join(phones)

@app.route('/phone', methods=['POST'])
def phone():
    num = request.form.get("num")
if num == "":
        data = create_phone(5)
    else:
        data = create_phone(num)
    return data

執行結果中，請求詳情如下

 

（2）提交json格式數據

如果要使用ajax發送json格式數據，需要聲明 contentType，指定類型為 application/json;charset=utf-8

並且data參數需要為json字符串，js代碼如下

<script type="text/javascript">
       
        $(document).ready(function(){
            $("#b01").click(function (){
                var num = $('input[name=phone_num]').val()  // 獲取phone輸入框的值

　　　　　　　　　 var data = {  //定義data參數值
                    "num": num
                }
            htmlobj = $.ajax(
                {
                    type: 'post',
                    url: 'http://10.237.4.83:5000/phone',
                    cache: false,
                    data: JSON.stringify(data),  //將data參數值轉為json格式字符串
                    contentType: "application/json;charset=utf-8",
                    async:false
                }
            );
            $("#result").html(htmlobj.responseText);
            })
        });

需要注意的是，因為傳送的是json數據，我們必須把傳入的參數轉為json格式的字符串，使用 JSON.stringify()轉換

開始我沒有做這個處理，請求后會報如下錯誤

“Failed to decode JSON object: Expecting value: line 1 column 1”

后端對應做如下處理

其中 request.json.get("num")，使用 request.json 獲取隨請求發送的json參數

@app.route('/phone', methods=['POST'])
def phone():
    num = request.json.get("num") 
if num == "":
        data = create_phone(5)
    else:
        data = create_phone(num)
    return data

執行結果中，請求詳情如下