Flask和Ajax交互

Posted 2021-03-18 冬瓜先生

1. Ajax技术 由下面四部分组成

   • Async(异步): 网络请求是异步的

   • javascript: JavaScript语言

   • And: 并且

   • XML: JSON数据类型

2. 在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>

3. 在Flask框架里面写

   • from flask import Flask,jsonify,request,render_template
     ?
     app = Flask(__name__,template_folder=r‘E:python编写1Flask框架ajax	emplates‘)
     @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)
     ?