1.ajax

• 后台

# 通过flask框架搭建后台from flask import flask,request# 创建一个服务器对象app = Flask(__name__)# 解决ajax请求跨域问题from flask_cors import CORSCORS(app,supports_credentials = True)   # ??????????# 设置处理请求的功能(路由rote --> 接口)# 设置一个主页路由器，对应一个处理主页的功能方法，返回主页信息@app.route('/')def home_action():    return '
home page
'# 为ajax登录请求配置一个处理登录的功能@app.route('/login')def login_action():    # 拿到前台数据，进行数据判断    user = request.args['user']     # 'user'是规定前台需要传入的数据的key    pwd = request.args['pwd']    if user == 'abc' and pwd == '123':        return 'login success'    return 'login fail'# 启动服务(改文件作为自启文件)if __name__ == '__main__':    app.run(port = '8888')

• 前台

    
请先登录
    
    
         
         
     
    

// 取消表单默认事件$('.fm').submit(function(){return false;})// 表单提交完成的是ajax请求$('.sbm').click(function(){    // 前提:准备发送的数据    var user = $('#user').val();    var pwd = $('#pwd').val();        // 1.通过ajax发送请求,获得后台响应结果    // 2.用得到的结果来局部渲染页面内容    $.ajax({        url:'http://127.0.0.1:8888/login',        data:{user:user,pwd:pwd},        success:function(data){doSomething(data);}    })})// 处理数据后，的功能function doSomething(data){    $('h1').text(datae)}

2.bootstrap

• 引入

    
        
        
        
    
        ...    
    
    

• 容器

    
    
    
    
         
     
        
      
标题
    
     
    
    
    
    
     
        
      
标题