jquery ajax 查询用户信息

最新推荐文章于 2023-02-15 16:10:54 发布

Instafever

最新推荐文章于 2023-02-15 16:10:54 发布

阅读量692

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/crisonpupil/article/details/90694561

博客介绍了通过输入用户名来查询用户相关信息，涉及到 models.py、views.py 文件，以及 html 和 javascript 下的 demo.html 文件，与信息技术中网页开发及用户信息查询相关。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

输入用户名，查询用户相关信息

效果图

models.py

class Base():
    """
    基础类
    """

    def to_dict(self):
        """
        将实体对象转为json字典格式
        :return:
            {
                "attr": value
            }
        """
        return dict((col.name, getattr(self, col.name)) for col in class_mapper(self.__class__).mapped_table.c)


class User(db.Model, Base):
    id = db.Column(db.Integer, primary_key=True)
    uphone = db.Column(db.String(11))
    upwd = db.Column(db.String(30))
    uname = db.Column(db.String(30))
    uemail = db.Column(db.String(50))

views.py

@main.route('/demo')
def demo():
    return render_template('demo.html')


@main.route('/query')
def query():
    uname = request.args['uname']
    user = User.query.filter_by(uname=uname).first()

    if user:
        return json.dumps(user.to_dict())
    else:
        res = {
            "errMsg": "查无此人"
        }
        return json.dumps(res)

html/demo.html

<p>
    <input type="text" id="uname">
    <button id="btnShow">显示</button>
</p>
<div>
    <p>ID: <span id="show-id"></span></p>
    <p>UPHONE: <span id="show-uphone"></span></p>
    <p>UNAME: <span id="show-uname"></span></p>
    <p>UPWD: <span id="show-upwd"></span></p>
    <p>UEMAIL: <span id="show-uemail"></span></p>
</div>

javascript/demo.html

<script src="/static/js/jquery-1.11.3.js"></script>
<script>
    $(function(){
        $("#btnShow").click(function(){
            var params = "uname=" + $("#uname").val();
            $.get('/query', params, function(res){
                if(res.errMsg){
                    alert(res.errMsg);
                }else{
                    $("#show-id").html(res.id);
                    $("#show-uphone").html(res.uphone);
                    $("#show-uname").html(res.uname);
                    $("#show-upwd").html(res.upwd);
                    $("#show-uemail").html(res.uemail);
                }
            }, 'json');
        });
    });