Flask项目中ajax前端用户名校验（get与post方式）

后端的用于校验逻辑是我们经常使用的，但是前端是用户体验最直观的表现方式。要给予用户良好的感受，假如用户名已经在后台注册过了，应该给用户一种提示信息，并且已注册用户的提交按钮也是不能再进行点击的。如果用户名是没有注册的，提示该用户名是可以进行使用的。

这样的前端校验方式使用ajax是最有效、最简单的方式，因为ajax的一个特性就是局部刷新，我们想要的就是只刷新当前的提示信息。

我们就拿注册功能来说，在用户进行注册时，进行ajax用户名的校验，反馈给后端，后端去查询数据库中的数据，来反馈给ajax数据。并渲染到页面展示提示用户。

先导入一个用于返回json数据的模块

from flask import jsonify

ajax_get请求校验方式

<script src="/static/vendor/jquery/jquery.min.js"></script>
<script>
	//使用jQuery，获取用户名输入框信息，触发焦点事件
    $("#username").blur(
        function () {
        	//获取用户名输入框输入的用户名，并将其拼接到url上，用于ajax get请求
            var username = $("#username").val();
            var url = "/userValid/?username="+username;
            $.ajax(
                {
                    url: url,
                    type: "get",
                    data: "",
                    success: function (data) {
                        if (data.code == 400){//400代表用户名已存在，submit失效
                            $("#submit").attr("disabled",true)
                        } else{//否则submit正常
                            $("#submit").attr("disabled",false)
                        }
                        //将后面传递过来的json数据打印到前端，提示用户
                        $("#message").text(data.data)
                    },
                    error: function (error) {
                        console.log(error)
                    }
                }
            )
        }
    )
</script>

定义一个在后端ajax用户校验的视图：

import hashlib
from flask import jsonify
from flask import request
from flask import redirect

from flask import render_template
from FlaskStudent.main import app
from FlaskStudent.models import *
from FlaskStudent.main import csrf
from FlaskStudent.main import session
from FlaskStudent.forms import TeacherForm
# ajax 前端校验
@app.route("/userValid/")
def userValid():
    # 定义json字典数据格式
    result = {
        "code":"",
        "data":""
    }
    # 获取ajax请求中的参数
    username = request.args.get("username")
    if username:
    	# 查询数据库有无这个用户
        user = User.query.filter_by(username=username).first()
        if user:
            result["code"] = 400
            result["data"] = "用户名已存在"
        else:
            result["code"] = 200
            result["data"] = "用户名未被注册，可以使用"
    return jsonify(result)

效果：

ajax_post请求校验方式

前端：

<script src="/static/vendor/jquery/jquery.min.js"></script>
<script>
    $("#username").blur(
        function () {
            var username = $("#username").val();
            var url = "/userValid/";
            var send_data = {
                "username": username,
                "csrf_token": '{{ csrf_token() }}'
            };
            $.ajax(
                {
                    url: url,
                    type: "post",
                    data: send_data,
                    success: function (data) {
                        if (data.code == 400){
                            $("#submit").attr("disabled",true)
                        } else{
                            $("#submit").attr("disabled",false)
                        }
                        $("#message").text(data.data)
                    },
                    error: function (error) {
                        console.log(error)
                    }
                }
            )
        }
    )
</script>

后端视图：

这里需要注意获取ajax数据时，get请求使用的是request.args 方法，而post请求是需要用request.form获取前端数据

效果还是和ajax_post一样