flask_ajax登录注册




Flask_restful。

注册的html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

      <script>
    function register_data(){

        var u =  $("#d_user").val();
        var p =  $("#d_pass").val();

        if(p!="" && u!="")
        {

              $.ajax({
               type: "post",

               url: "/register_data/",

               data: {
                   'username':u,
                   'password':p
               },

               dataType: "json",
               success: function(data){
                   // console.log(data.success_data);
                   // alert("注册成功!" + data.success_data);


                   var a = data.success_data;

                   $("#sd").html(a+":     注册成功");

               }
           });
        }

        else{
            alert("不能为空");
        }
    }






  </script>


</head>
<body>
    <h1 align="center">注册</h1>
    <table align="center" border="1px">
        <tr>
            <td>用户名:</td>
            <td><input type="text" id = "d_user"></td>
        </tr>


        <tr>
            <td>密码:</td>
            <td><input type="password" id = "d_pass"></td>
        </tr>

        <tr>
            <td><a href="javaScript:register_data()">注册</a></td>
            <td><a href="{{url_for('login')}}">登录</a></td>
        </tr>

    </table>

    <p id="sd" align="center"> </p>

</body>
</html>
登录的html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登录</title>
  <script src="../static/jq/jquery-2.1.0.js"></script>
{#  '''#}
{#  ajax使用有5步#}
{#  1创建异步对象#}
{#  2设置请求方式和请求地址#}
{#  3发送请求#}
{#  4监听状态的变化#}
{#  5处理返回的结果#}
{#  '''#}
  <script>
    function tijiao(){

        var u =  $("#u1").val();
        var p =  $("#p1").val();

        if(p!="" && u!="")
        {

              $.ajax({
               type: "post",

               url: "/login_data/",

               data: {
                   'username':u,
                   'password':p
               },

               dataType: "json",
               success: function(data){
                   console.log(data);
                   alert("登录成功!");
               }
           });
        }

        else{
            alert("不能为空");
        }
    }






  </script>
</head>
<body>
<h1 align="center" >登录</h1>


<table border="1px" align="center">
  <tr>
    <td>username:</td>
    <td><input id="u1" value=""></td>
  </tr>

  <tr>
    <td>password:</td>
    <td><input id="p1" value=""></td>
  </tr>

  <tr>
    <td><a href="javaScript:tijiao()">登录</a></td>
  </tr>
</table>


</body>
</html>
config.py
HOSTNAME = '127.0.0.1'
PORT     = '3306'
DATABASE = 'stu'
USERNAME = 'root'
PASSWORD = '123456'
DB_URI = 'mysql+pymysql://{}:{}@{}:{}/{}?charset=utf8'.format(USERNAME,PASSWORD,HOSTNAME,PORT,DATABASE)
SQLALCHEMY_DATABASE_URI = DB_URI

SQLALCHEMY_TRACK_MODIFICATIONS = False

py代码

from flask import Flask, url_for, render_template
from flask_restful import Api, Resource, reqparse, inputs
from  flask_sqlalchemy import SQLAlchemy
import config

'''
(输入) Flask_restful01 有一个验证、类似于wtf的验证   (输入验证)
 通过 postman 进行输入
'''
app = Flask(__name__)
app.config.from_object(config)
api = Api(app)

db = SQLAlchemy(app)

class User(db.Model):
    __tablename__ = 'user'
    id = db.Column(db.Integer,primary_key=True)
    username = db.Column(db.String(50))
    password = db.Column(db.String(50))



#这是一个接受ajax数据的api
class RegisterView(Resource):
    '''
    注册
    '''

    def post(self):
        # 获取解析对象
        parser = reqparse.RequestParser()
        # 获取username  是否是str类型  ,提示用户名验证错误!
        parser.add_argument("username",required=True)
        parser.add_argument("password",required=True)


        # 拿到这个传来的参数
        args = parser.parse_args()
        # 打印ajax传递来的参数
        print("获取全部传来的值:",args)
        print("username: ",args.get("username"))
        print("password: ",args.get("password"))

        us = args.get("username")
        pa = args.get("password")

        u = User.query.filter(User.username == us).first()
        if u:
            return {"success_data":"用户名已经存在"}
        else:
            new_user = User(username = us,password = pa)
            db.session.add(new_user)
            db.session.commit()
            return {"success_data": us}


# 方式一、在Postman里面输入:http://127.0.0.1:8888/login/?username=哇咔咔 会传递信息 哇咔咔 给username
# 方式二、通过jquery的方式、给后端进行传参、
api.add_resource(RegisterView, "/register_data/")






#这是一个接受ajax数据的api
class LoginView(Resource):
    '''
    登录
    '''

    def post(self):
        # 获取解析对象
        parser = reqparse.RequestParser()
        # 获取username  是否是str类型  ,提示用户名验证错误!
        parser.add_argument("username",required=True)
        parser.add_argument("password",required=True)




        # 拿到这个传来的参数
        args = parser.parse_args()
        # 打印ajax传递来的参数
        print("获取全部传来的值:",args)
        print("username: ",args.get("username"))
        print("password: ",args.get("password"))


        user_data = args.get("username")

        # 获取username的字段
        # print("打印前端传来的值:",args.get("username"))
        return {"username": user_data}


# 方式一、在Postman里面输入:http://127.0.0.1:8888/login/?username=哇咔咔 会传递信息 哇咔咔 给username
# 方式二、通过jquery的方式、给后端进行传参、
api.add_resource(LoginView, "/login_data/")



@app.route('/login/')
def login():

    return render_template("login.html")


@app.route('/')
def hello_world():

    return render_template("register.html")


if __name__ == '__main__': db.drop_all() db.create_all() app.run(debug=True, port=8887)
原文地址:https://www.cnblogs.com/yuanjia8888/p/14048762.html