[Ajax] - 判断用户名是否存在 & 关联搜索

最新推荐文章于 2023-05-13 15:33:18 发布

dawn2134

最新推荐文章于 2023-05-13 15:33:18 发布

阅读量434

点赞数 1

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

本文链接：https://blog.csdn.net/dawn2134/article/details/90173415

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

一.判断用户名是否存在

在这里插入图片描述

1.1 前端关键代码

<script src="./js/jquery-3.3.1.min.js"></script>
<script>
$("#username").change(function () {
    var params = "action=isExist&name=" + this.value;
    //发Ajax请求到服务端，判断用户名是否存在
    $.post("user",params,function(result){
        //result的值是字符串。如果存在就是"true"；否则就是"false"
        if (result === "true") {//用户名已存在，不可用
            $("#usernameInfo").html("用户名已存在").css("color","red");
        }else{
            $("#usernameInfo").html("用户名可用").css("color","green");
        }
    },"text");
});
</script>

1.2 后端逻辑

在这里插入图片描述

二.关联搜索

在这里插入图片描述

2.1 前端关键代码

<body>
<div class="content">
    <img alt="" src="img/logo.png"><br/><br/>
    <input type="text" name="word" id="searchWord">
    <input type="button" value="搜索一下">
    <div class="result" style="display: none"></div>
</div>
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $("#searchWord").keyup(function () {
        //没有值的时候不进行查询
        if (this.value === "") {
            return;
        }

        //有输入的时候才进行查询
        $.post("user", "action=search&name=" + this.value, function (result) {
            //清除result中的原数据
            $(".result").empty();
            //只在有相似结果的时候再显示
            if (result != null & result != "") {
            //result = [{"id":1,"name":"张三","password":"123"},{},{},...]
                for (var user of result) { 
                	//创建div标签挂在result标签下
                    $("<div></div>").html(user.name).appendTo(".result");
                }
                $(".result").show();
            }
        }, "json")
    });

    //点击结果列表里的内容, 可以赋值到搜索框
    $(".result").on("click","div",function () {
        //获取div的值,赋给搜素框
        $("#searchWord").val(this.innerHTML);
        //赋值成功后隐藏相似结果列表
        $(".result").hide();
    });
</script>
</body>