基于jQuery中Ajax请求的注册案例

最新推荐文章于 2021-08-05 12:29:43 发布

酱橙C

最新推荐文章于 2021-08-05 12:29:43 发布

阅读量267

点赞数

分类专栏：前端文章标签： ajax jquery

本文链接：https://blog.csdn.net/qq_41982039/article/details/105329309

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

一.直接上代码

1.register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #available{
            color: blue;
            display: none;
        }
        #unavailable{
            color:yellow;
            display: none;
        }
    </style>
    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $('#uname').blur(function () {
                $.get({
                    url:'/checkname',
                    data:{
                        name:$('#uname').val()
                    },
                    success:function (data) {
                        console.log(data);
                        //返回的结果是一个json字符串
                        let x = JSON.parse(data);//把json字符串转化成为一个js对象
                        if (x['available']){
                            $('#available').css('display' , 'inline');
                            $('#unavailable').css('display' , 'none');
                        }else{
                            $('#available').css('display','none');
                            $('#unavailable').css('display' , 'inline');
                        }
                    }
                });
            });
        });
    </script>
</head>
<body>
<form action="/doregister" method="post">
    <span>用户名:</span>
    <input type="text" required name="username" id="uname">
    <span id="available">用户名可以使用</span>
    <span id="unavailable">用户名已经被占用了</span>

    <br>
    <span>密码:</span><input type="password" required name="password"><br>
    <input type="submit" value="注册">
</form>
</body>
</html>

2. app.py(Flask服务器):

import json

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello World!'

@app.route('/register')
def register():
    # 从模板文件夹中呈现具有给定上下文的模板
    return render_template('register.html')

# @app.route('/checkname', methods=['POST']) 列表里可以放post和get,表示支持多种请求
@app.route('/checkname')
def check_name():
    # print(request.args['name'])
    name = request.args['name']
    # 必须返回东西，否则崩
    # 查询数据库，获取到所有的用户名
    username = ['zhangsan', 'lisi', 'wangwu']
    if name in username:
        return json.dumps({'available':False})
    else:
        return json.dumps({'available':True})

酱橙C

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基于jQuery中Ajax请求的注册案例

一.直接上代码1.register.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #available{ ...
复制链接

扫一扫

专栏目录