Flask和Ajax交互

Ajax技術 由下面四部分組成

• Async(異步): 網絡請求是異步的

• JavaScript: JavaScript語言

• And: 並且

• XML: JSON數據類型

在HTML里面使用jQuery寫Ajax

• 　　　　

  <script>
    $(function(){
      //點擊按鈕發送數據
      $("#submit-btn").click(function(event){
           //關閉表單里面的按鈕默認行為
           event.preventDefault();
           $.post({
              //給哪個頁面發送網絡請求  url取  域名后面的所有東西
              'url': '/login/',
              //data是發送過去的數據s
              'data':{
                  'username': $('input[name='username']').val()
                  'password': $('input[name='password']').val()
              },
              //如果網絡請求發送成功，就會執行success里面的函數
              //請求成功 是狀態碼等於200就會執行success里面的函數 
              否則執行fail里面的函數
              'success': function(data){
                   //data是服務器發送過來的數據
                   //如果服務器發送過來的是json數據，那么JS底層會將json進行解析
                   //比如 服務器發送過來的是JSON類型的字典，那么JS底層會將JSOn數據轉換成一個對象          if(data['code']==200){
                      window.location = '/'
                   }else{
                      alert(data['message']);
                   }
                   
                   console.log(data)
              },
              //如果網絡請求發送失敗，就會執行fail里面的函數
              'fail': function(error){
                  console.log(error)
              }
           })
      })
    });
  </script>

在Flask框架里面寫

• from flask import Flask,jsonify,request,render_template
  ​
  app = Flask(__name__,template_folder=r'E:\python編寫1\Flask框架\ajax\templates')
  @app.route('/')
  def index():
      return '這是首頁'
  ​
  @app.route('/login/',methods = ["GET","POST"])
  def hello():
      if request.method == 'GET':
          return render_template('ajax_jquery.html')
      if request.method == "POST":
          username = request.form.get('username')
          password = request.form.get('password')
          if username=='xiaoxin' and password =='726599':
              return jsonify({'code':200,'message':''})
          else:
              return jsonify({'code':400,'message':'用戶名或密碼錯誤'})
  ​
  ​
  if __name__ == '__main__':
      app.run(debug=True)
  ​